Lumeo
Package LumeoA11yfocus-managedkeyboardgroupmenuTested Tier 4 · 57 testsView source ↗

Context Menu

Displays a menu triggered by right-clicking an element.

Installation

dotnet add package Lumeo

One-time app setup (AddLumeo(), CSS & JS) is covered in the installation guide.

Usage

@using Lumeo

<ContextMenu />
Tested Tier 4 · E2E + a11y
all components →
Render Behavior A11y Keyboard Scale E2E

57 tests across 17 files. Auto-generated from the test suite.

When to Use

  • Right-click actions on elements like files, cards, or table rows
  • Custom context menus replacing the browser default for specific areas
  • Element-specific operations such as copy, edit, delete, or move

ContextMenuShortcut right-aligns a keyboard hint; Variant=Destructive tints a dangerous action; Inset aligns label-only items beside icon items.

Submenus

Nest menus with the ContextMenuSub / ContextMenuSubTrigger / ContextMenuSubContent triplet. Submenus open on hover (with intent delay), and nesting is recursive so you can build deep right-click trees.

Keyboard:

  • ArrowRight on a SubTrigger opens the submenu and focuses its first item.
  • ArrowLeft closes the current submenu and returns focus to the parent trigger.
  • Escape closes the entire context menu, not just the current submenu.
  • Type-ahead: with the menu open, start typing a label and focus jumps to the first matching item; keep typing to refine, or pause to reset the search buffer.

API Reference

ContextMenu

Prop Type Default Description
ChildContent RenderFragment? — The trigger and any other content that shares the menu's positioning context — typically a ContextMenuTrigger wrapping the target element, plus the ContextMenuContent to render on right-click / long-press.
Open bool false Whether the menu is currently open. Two-way bindable via OpenChanged.
IsOpen bool false Use Open instead. IsOpen will be removed in a future release.
AdditionalAttributes Dictionary<string, object>? — Additional HTML attributes captured and forwarded to the trigger wrapper div.

Events

OpenChanged EventCallback<bool> Invoked when the open state changes (right-click open, Escape/click-outside/item-select close).
IsOpenChanged EventCallback<bool> Use OpenChanged instead. IsOpenChanged will be removed in a future release.

ContextMenuTrigger

Prop Type Default Description
ChildContent RenderFragment? — The element that opens the context menu on right-click, long-press, or Shift+F10 / the Menu key.
Class string? — Additional CSS classes merged onto the trigger's wrapping div.
AdditionalAttributes Dictionary<string, object>? — Additional HTML attributes captured and forwarded to the trigger's wrapping div.
LongPressMs int 500 Duration in milliseconds a touch must remain on the trigger (without significant movement) before the context menu opens. Default: 500ms.
MoveTolerancePx double 10.0 Pixel threshold for touch movement that cancels the long-press timer. Above this, the user is interpreted as scrolling, not long-pressing.

ContextMenuContent

Prop Type Default Description
ChildContent RenderFragment? — The menu's items — typically ContextMenuItem, ContextMenuCheckboxItem, ContextMenuRadioGroup, ContextMenuSub, and ContextMenuSeparator.
MaxHeight string? — Overrides the panel's built-in scroll cap on its inner item viewport (a CSS length, e.g. "20rem" or "400px"). By default the viewport caps itself to the available viewport space below the open point — --lumeo-dropdown-available-height, set live by the positioning JS — and scrolls past that.
Class string? — Additional CSS classes merged onto the menu panel.
AdditionalAttributes Dictionary<string, object>? — Additional HTML attributes captured and forwarded to the menu panel.

ContextMenuItem

Prop Type Default Description
ChildContent RenderFragment? — The item's label content.
Disabled bool false Disables the item, removing it from click/keyboard activation and arrow-key roving.
Inset bool false Indents the item by a label's width so it lines up with checkbox/radio items (shadcn inset). Adds ps-8 and emits data-inset.
Variant MenuItemVariant MenuItemVariant.Default Visual variant. Destructive renders the item in the destructive color and emits data-variant="destructive".
Class string? — Additional CSS classes merged onto the button element.
AdditionalAttributes Dictionary<string, object>? — Additional HTML attributes captured and forwarded to the button element.

Events

OnClick EventCallback Invoked when the item is activated (click, or Enter/Space when focused). The enclosing menu also closes automatically after this fires.

ContextMenuShortcut

Prop Type Default Description
ChildContent RenderFragment? — The shortcut hint text (e.g. ⌘K).
Class string? — Additional CSS classes merged onto the span element.
AdditionalAttributes Dictionary<string, object>? — Additional HTML attributes captured and forwarded to the span element.

ContextMenuCheckboxItem

Prop Type Default Description
ChildContent RenderFragment? — The item's label content.
Checked bool false Whether the checkbox item is checked. Controlled when CheckedChanged has a delegate; otherwise the item manages its own toggle state internally, seeded from this value.
Disabled bool false Disables the item, removing it from click/keyboard activation and arrow-key roving.
Class string? — Additional CSS classes merged onto the button element.
AdditionalAttributes Dictionary<string, object>? — Additional HTML attributes captured and forwarded to the button element.

Events

CheckedChanged EventCallback<bool> Invoked when the item is toggled. Binding this makes Checked controlled.

ContextMenuRadioGroup

Prop Type Default Description
ChildContent RenderFragment? — The group's ContextMenuRadioItems.
Value string? — The currently-selected item's value. Controlled together with ValueChanged; when left unbound the group tracks the selection internally.
AdditionalAttributes Dictionary<string, object>? — Additional HTML attributes captured and forwarded to the role="group" wrapper.

Events

ValueChanged EventCallback<string> Invoked when a different ContextMenuRadioItem is selected.

ContextMenuRadioItem

Selecting a radio item closes the menu, same as a plain item — matching Radix.

Prop Type Default Description
ChildContent RenderFragment? — The item's label content.
Value* string "" This item's value. Selected when it matches the enclosing ContextMenuRadioGroup's Value.
Disabled bool false Disables the item, removing it from click/keyboard activation and arrow-key roving.
Class string? — Additional CSS classes merged onto the button element.
AdditionalAttributes Dictionary<string, object>? — Additional HTML attributes captured and forwarded to the button element.

ContextMenuLabel

Prop Type Default Description
ChildContent RenderFragment? — The label's text/content.
Inset bool false Indents the label to align with inset items (shadcn inset).
Class string? — Additional CSS classes merged onto the label div.
AdditionalAttributes Dictionary<string, object>? — Additional HTML attributes captured and forwarded to the label div.

ContextMenuSeparator

Prop Type Default Description
Class string? — Additional CSS classes merged onto the separator div.
AdditionalAttributes Dictionary<string, object>? — Additional HTML attributes captured and forwarded to the separator div.

ContextMenuGroup

Prop Type Default Description
ChildContent RenderFragment? — The grouped items, typically ContextMenuItems sharing a related purpose.
Class string? — Additional CSS classes merged onto the role="group" wrapper.
AdditionalAttributes Dictionary<string, object>? — Additional HTML attributes captured and forwarded to the role="group" wrapper.

Related Components

  • DropdownMenu — For action menus triggered by a click on a button or icon
  • Menubar — For persistent application menu bars with multiple dropdown menus
  • Popover — For displaying arbitrary content in a floating panel on click

Cookies & consent

We use a minimal set of cookies to run the site and optionally measure anonymous usage to improve it. You choose what's on.Read the privacy policy.