Context Menu Component

Displays a menu to the user — such as a set of actions or functions — triggered by right-clicking.

Default

Right-click the area below to open the context menu.

With Icons

Add Lucide icons to menu items for better visual hierarchy.

With Labels and Groups

Organize menu items into groups with labels.

With Destructive Item

Highlight dangerous actions with custom styling.

With Inset Items

Use inset for items without icons to align with other items.

On Image

Context menu on an image element.

Features

Opens on right-click (contextmenu event)
Positioned at mouse cursor location
Closes on outside click or Escape key
Full keyboard navigation (↑/↓, Enter, Escape)
Support for disabled items
Keyboard shortcut hints
Separator and label components

Keyboard Navigation

↑/↓ Navigate items

Enter/Space Select item

Escape Close menu

Installation

@using BlazorUI.Components.ContextMenu

Usage

<ContextMenu>
    <ContextMenuTrigger>
        <div>Right click here</div>
    </ContextMenuTrigger>
    <ContextMenuContent>
        <ContextMenuItem OnClick="HandleCopy">
            Copy
            <ContextMenuShortcut>⌘C</ContextMenuShortcut>
        </ContextMenuItem>
        <ContextMenuSeparator />
        <ContextMenuItem>Delete</ContextMenuItem>
    </ContextMenuContent>
</ContextMenu>

With Checkbox Items

Toggle preferences directly from the context menu.

Hidden: Hidden Extensions: Shown Compact: No

With Radio Items

Select from mutually exclusive options.

Sort order: name

With Submenus

Organize complex options in nested menus.