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.

API

Parameters

ContextMenu

Parameter Description TypeDefault
ChildContent

Specifies the content to be rendered inside this ContextMenu.

 RenderFragmentnull
CloseOnClick

Closes the menu when a regular item is clicked.

 booltrue
CloseOnEscape

Closes the menu when pressing the Escape key.

 booltrue
CloseOnOutsideClick

Closes the menu when clicking outside of it.

 booltrue
Disabled

Prevents the menu from opening through its observed target.

 boolfalse
SubmenuHoverCloseDelay

Delay in milliseconds before hiding a hover-opened submenu after the mouse leaves it.

 int300
SubmenuTrigger

Defines which pointer interactions can open or close nested submenus.

Possible values:None, Click, Hover, All

 DropdownTriggerdefault(DropdownTrigger)
TargetId

Specifies an element id that opens this context menu when right-clicked.

 string
TargetSelector

Specifies a CSS selector that opens this context menu when a matching element is right-clicked.

 string
Visible

Gets or sets whether the menu is visible.

Remarks

Setting this to opens the menu relative to its configured target. Use Double) to open the menu at a specific viewport position.

 boolfalse

ContextMenuToggle

Parameter Description TypeDefault
ChildContent

Specifies the content to be rendered inside this ContextMenuToggle.

 RenderFragmentnull

ContextMenuBody

Parameter Description TypeDefault
ChildContent

Specifies the content to be rendered inside this ContextMenuBody.

 RenderFragmentnull

ContextMenuItem

Parameter Description TypeDefault
Active

Indicates the currently active item.

 boolfalse
Checked

Tracks the checked state whenever the item is in checkbox mode.

 boolfalse
ChildContent

Specifies the content to be rendered inside this ContextMenuItem.

 RenderFragmentnull
Disabled

Indicates the currently disabled item.

 boolfalse
Icon

Specifies the icon to render before the item content.

 objectnull
Shortcut

Specifies shortcut text rendered at the end of the item.

 string
ShowCheckbox

The item renders a checkbox.

 boolfalse
Value

Holds the item value.

 objectnull

ContextMenuToolbar

Parameter Description TypeDefault
ChildContent

Specifies the content to be rendered inside this ContextMenuToolbar.

 RenderFragmentnull

ContextMenuToolbarItem

Parameter Description TypeDefault
Active

Indicates the currently active item.

 boolfalse
Disabled

Indicates the currently disabled item.

 boolfalse
EndAligned

Pushes this item and any following items to the logical end of the toolbar.

 boolfalse
Icon

Specifies the icon to render inside the toolbar item.

 objectnull
ShowText

Indicates whether Text should be rendered visibly next to the icon.

 boolfalse
Text

Specifies the toolbar item text. It is used as the default title and aria-label.

 string
Value

Holds the item value.

 objectnull

ContextMenuHeader

Parameter Description TypeDefault
ChildContent

Specifies the content to be rendered inside this ContextMenuHeader.

 RenderFragmentnull

ContextMenuGroup

Parameter Description TypeDefault
CheckMode

Defines how child items handle checked state.

Possible values:None, Radio

 ContextMenuCheckModeContextMenuCheckMode.None
ChildContent

Specifies the content to be rendered inside this ContextMenuGroup.

 RenderFragmentnull
SelectedValue

Gets or sets the currently selected value when CheckMode is Radio.

 objectnull

ContextMenuSubmenu

Parameter Description TypeDefault
ChildContent

Specifies the content to be rendered inside this ContextMenuSubmenu.

 RenderFragmentnull
Disabled

Indicates the submenu is disabled.

 boolfalse
HoverCloseDelay

Delay in milliseconds before hiding this hover-opened submenu after the mouse leaves it.

 int?null
Icon

Specifies the icon to render before the submenu label.

 objectnull
Text

Specifies the submenu label.

 string
Trigger

Defines which pointer interactions can open or close this submenu.

 DropdownTrigger?null

Events

ContextMenu

Event Description Type
Closed

Occurs after the menu closes.

 EventCallback<ContextMenuEventArgs>
Closing

Callback invoked before the menu closes. Set Cancel to prevent closing.

 Func<ContextMenuClosingEventArgs, Task>
Opened

Occurs after the menu body has rendered and its initial position has been applied.

 EventCallback<ContextMenuEventArgs>
Opening

Callback invoked before the menu opens. Set Cancel to prevent opening.

 Func<ContextMenuOpeningEventArgs, Task>
VisibleChanged

Notifies when the effective menu visibility changes or a canceled request must be synchronized.

 EventCallback<bool>

ContextMenuItem

Event Description Type
CheckedChanged

Occurs after the checked state changes whenever the item is in checkbox mode.

 EventCallback<bool>
Clicked

Notifies when the item is clicked.

 EventCallback<object>

ContextMenuToolbarItem

Event Description Type
Clicked

Notifies when the toolbar item is clicked.

 EventCallback<object>

ContextMenuGroup

Event Description Type
SelectedValueChanged

Occurs after the selected value changes.

 EventCallback<object>

Methods

ContextMenu

Method DescriptionReturnParameters
Hide Hides the context menu. Task
Reposition Repositions the visible context menu relative to its configured target.
Remarks

This method does nothing while the menu is hidden and does not invoke Opening, Opened, or VisibleChanged.

Task
Reposition Repositions the visible context menu at the supplied viewport coordinates.
Remarks

This method does nothing while the menu is hidden and does not invoke Opening, Opened, or VisibleChanged.

Taskdouble clientX, double clientY
Show Opens the context menu relative to its configured target.
Remarks

This method does nothing while the menu is visible. Use Reposition to update its position.

Task
Show Opens the context menu at the supplied viewport coordinates.
Remarks

This method does nothing while the menu is visible. Use Double) to update its position.

Taskdouble clientX, double clientY
On this page