Blazorise ContextMenu component

Show contextual actions when a user right-clicks a target element or when application code opens the menu.

The <ContextMenu> component uses the shared document observer to listen for right-click events on a toggle or target selector. Use <ContextMenuBody> for the menu surface and <ContextMenuItem>, <ContextMenuDivider>, <ContextMenuHeader>, and <ContextMenuSubmenu> for commands.

Examples

Basic usage

Attach a menu to any element id and provide menu items for the available actions.
Right-click this area.

Last action: None

<Div id="context-menu-basic-target"
     Padding="Padding.Is4"
     Border="Border.Is1.Rounded"
     Background="Background.Light">
    Right-click this area.
</Div>

<ContextMenu TargetId="context-menu-basic-target">
    <ContextMenuBody Width="Width.Rem().Min( 12 )">
        <ContextMenuHeader>Document</ContextMenuHeader>
        <ContextMenuItem Icon="IconName.Copy" Value="@("Copy")" Clicked="@SetSelectedAction">Copy</ContextMenuItem>
        <ContextMenuItem Icon="IconName.Paste" Value="@("Paste")" Clicked="@SetSelectedAction">Paste</ContextMenuItem>
        <ContextMenuDivider />
        <ContextMenuItem Icon="IconName.Delete" Value="@("Delete")" Clicked="@SetSelectedAction">Delete</ContextMenuItem>
    </ContextMenuBody>
</ContextMenu>

<Paragraph Margin="Margin.Is2.FromTop">
    Last action: @selectedAction
</Paragraph>

@code {
    private string selectedAction = "None";

    private void SetSelectedAction( object value )
    {
        selectedAction = value?.ToString();
    }
}

Toggle content

Use <ContextMenuToggle> when the menu target is declared inside the <ContextMenu>, without assigning an element id.

Last action: None

<ContextMenu>
    <ContextMenuToggle>
        <Button Color="Color.Primary">
            Right-click this button
        </Button>
    </ContextMenuToggle>
    <ContextMenuBody Width="Width.Rem().Min( 12 )">
        <ContextMenuHeader>Button actions</ContextMenuHeader>
        <ContextMenuItem Icon="IconName.Edit" Value="@("Rename")" Clicked="@SetSelectedAction">Rename</ContextMenuItem>
        <ContextMenuItem Icon="IconName.Copy" Value="@("Duplicate")" Clicked="@SetSelectedAction">Duplicate</ContextMenuItem>
        <ContextMenuDivider />
        <ContextMenuItem Icon="IconName.Delete" Value="@("Delete")" Clicked="@SetSelectedAction">Delete</ContextMenuItem>
    </ContextMenuBody>
</ContextMenu>

<Paragraph Margin="Margin.Is2.FromTop">
    Last action: @selectedAction
</Paragraph>

@code {
    private string selectedAction = "None";

    private void SetSelectedAction( object value )
    {
        selectedAction = value?.ToString();
    }
}

Checked items

Use ShowCheckbox for toggle items, or <ContextMenuGroup> with radio mode for mutually exclusive choices.
Right-click to change view options.

Grid: True, Snap: True, Density: Comfortable

<Div id="context-menu-checked-target"
     Padding="Padding.Is4"
     Border="Border.Is1.Rounded"
     Background="Background.Light">
    Right-click to change view options.
</Div>

<ContextMenu TargetId="context-menu-checked-target" CloseOnClick="false">
    <ContextMenuBody Width="Width.Rem().Min( 13 )">
        <ContextMenuHeader>View</ContextMenuHeader>
        <ContextMenuItem ShowCheckbox @bind-Checked="@showGrid">Show grid</ContextMenuItem>
        <ContextMenuItem ShowCheckbox @bind-Checked="@snapToGrid">Snap to grid</ContextMenuItem>
        <ContextMenuDivider />
        <ContextMenuGroup CheckMode="ContextMenuCheckMode.Radio" @bind-SelectedValue="@density">
            <ContextMenuItem Value="@("Comfortable")">Comfortable</ContextMenuItem>
            <ContextMenuItem Value="@("Compact")">Compact</ContextMenuItem>
        </ContextMenuGroup>
    </ContextMenuBody>
</ContextMenu>

<Paragraph Margin="Margin.Is2.FromTop">
    Grid: @showGrid, Snap: @snapToGrid, Density: @density
</Paragraph>

@code {
    private bool showGrid = true;

    private bool snapToGrid = true;

    private object density = "Comfortable";
}

Toolbar

Use <ContextMenuToolbar> for compact icon commands that should be grouped on a single row.
Right-click to open compact commands.

Last action: None

<Div id="context-menu-toolbar-target"
     Padding="Padding.Is4"
     Border="Border.Is1.Rounded"
     Background="Background.Light">
    Right-click to open compact commands.
</Div>

<ContextMenu TargetId="context-menu-toolbar-target">
    <ContextMenuBody Width="Width.Rem().Min( 12 )">
        <ContextMenuToolbar>
            <ContextMenuToolbarItem Icon="IconName.Cut" Text="Cut" Value="@("Cut")" Clicked="@SetSelectedAction" />
            <ContextMenuToolbarItem Icon="IconName.Copy" Text="Copy" Value="@("Copy")" Clicked="@SetSelectedAction" />
            <ContextMenuToolbarItem Icon="IconName.Paste" Text="Paste" Value="@("Paste")" Clicked="@SetSelectedAction" />
            <ContextMenuToolbarItem Icon="IconName.Delete" Text="Delete" Value="@("Delete")" Clicked="@SetSelectedAction" />
        </ContextMenuToolbar>
        <ContextMenuDivider />
        <ContextMenuItem Icon="IconName.List" Value="@("Properties")" Clicked="@SetSelectedAction">Properties</ContextMenuItem>
    </ContextMenuBody>
</ContextMenu>

<Paragraph Margin="Margin.Is2.FromTop">
    Last action: @selectedAction
</Paragraph>

@code {
    private string selectedAction = "None";

    private void SetSelectedAction( object value )
    {
        selectedAction = value?.ToString();
    }
}

Submenus

Use <ContextMenuSubmenu> to group related commands inside a nested menu.
Right-click to open commands with submenus.

Selected command: None

<Div id="context-menu-submenu-target"
     Padding="Padding.Is4"
     Border="Border.Is1.Rounded"
     Background="Background.Light">
    Right-click to open commands with submenus.
</Div>

<ContextMenu TargetId="context-menu-submenu-target">
    <ContextMenuBody Width="Width.Rem().Min( 12 )">
        <ContextMenuItem Icon="IconName.Edit" Value="@("Rename")" Clicked="@SetSelectedCommand">Rename</ContextMenuItem>
        <ContextMenuSubmenu Text="Move to" Icon="IconName.Folder">
            <ContextMenuItem Value="@("Move to Inbox")" Clicked="@SetSelectedCommand">Inbox</ContextMenuItem>
            <ContextMenuItem Value="@("Move to Archive")" Clicked="@SetSelectedCommand">Archive</ContextMenuItem>
            <ContextMenuItem Value="@("Move to Trash")" Clicked="@SetSelectedCommand">Trash</ContextMenuItem>
        </ContextMenuSubmenu>
        <ContextMenuSubmenu Text="Priority" Icon="IconName.Flag">
            <ContextMenuItem Value="@("High priority")" Clicked="@SetSelectedCommand">High</ContextMenuItem>
            <ContextMenuItem Value="@("Normal priority")" Clicked="@SetSelectedCommand">Normal</ContextMenuItem>
            <ContextMenuItem Value="@("Low priority")" Clicked="@SetSelectedCommand">Low</ContextMenuItem>
        </ContextMenuSubmenu>
    </ContextMenuBody>
</ContextMenu>

<Paragraph Margin="Margin.Is2.FromTop">
    Selected command: @selectedCommand
</Paragraph>

@code {
    private string selectedCommand = "None";

    private void SetSelectedCommand( object value )
    {
        selectedCommand = value?.ToString();
    }
}

Functions

Name Description
Show() Shows the context menu relative to its configured target. Calling it while visible has no effect.
Show( double clientX, double clientY ) Shows the context menu at the supplied client coordinates. Calling it while visible has no effect.
Reposition() Repositions a visible context menu relative to its configured target without invoking Opening, Opened, or VisibleChanged.
Reposition( double clientX, double clientY ) Repositions a visible context menu at the supplied client coordinates without invoking Opening, Opened, or VisibleChanged.
Hide() Hides the context menu.

Best Practices

Visible Actions

A context menu is suited to actions that apply to the clicked or focused object. Because the menu is hidden until invoked, important or frequently used actions should also remain available through a visible control.

Menu Structure

Use concise, verb-first labels and organize related actions with headers or dividers. Separate destructive actions from common ones and state their effect clearly. Keep submenus shallow, and verify that every item can be reached, opened, and selected with both a keyboard and a pointer.

API

See the API reference for the parameters, events, methods, and related types available to the components covered on this page.

On this page