Radzen Blazor Studio alpha is available! Get Now

ContextMenu (Blazor)

This article demonstrates how to use the ContextMenu component. Check also the component guide and API reference.

  1. Register <RadzenContextMenu /> in your application main layout.
  2. Register ContextMenuService in your application Startup or Program.
  3. Inject ContextMenuService in your page.
  4. Execute Open() method of the ContextMenuService.

Blazor declaration

@inject ContextMenuService contextMenuService
<RadzenButton Text="Show context menu with items for Radzen component" ContextMenu="@(args => ShowContextMenuWithItems(args))" />
<RadzenButton Text="Show context menu with custom content for Radzen component" ContextMenu="@(args => ShowContextMenuWithContent(args) )" />
<button @oncontextmenu="@(args => ShowContextMenuWithContent(args))" @oncontextmenu:preventDefault="true">
    Show context menu with custom content for HTML element

@code {
    void ShowContextMenuWithItems(MouseEventArgs args)
            new List<ContextMenuItem>() {
                new ContextMenuItem(){ Text = "Context menu item 1", Value = 1 },
                new ContextMenuItem(){ Text = "Context menu item 2", Value = 2 },
                new ContextMenuItem(){ Text = "Context menu item 3", Value = 3 },
         }, OnMenuItemClick);

    void ShowContextMenuWithContent(MouseEventArgs args) => contextMenuService.Open(args, ds =>
        @<RadzenMenu Click="OnMenuItemClick">
            <RadzenMenuItem Text="Item1" Value="1"></RadzenMenuItem>
            <RadzenMenuItem Text="Item2" Value="2"></RadzenMenuItem>
            <RadzenMenuItem Text="More items" Value="3">
                <RadzenMenuItem Text="More sub items" Value="4">
                    <RadzenMenuItem Text="Item1" Value="5"></RadzenMenuItem>
                    <RadzenMenuItem Text="Item2" Value="6"></RadzenMenuItem>

    void OnMenuItemClick(MenuItemEventArgs args)

We are here for you

Making our users happy is always a priority for us.