Lumeo

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 />

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
Right click here
Right click here

document.pdf

Right click for options

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.

Right-click me

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.

API Reference

ContextMenu

Prop Type Default Description
ChildContentRenderFragment?nullTrigger and content elements.
OpenboolfalseControls whether the context menu is visible. Use with @bind-Open.
OpenChangedEventCallback<bool>—Callback invoked when the open state changes.
AdditionalAttributesDictionary<string, object>?nullAdditional HTML attributes.
LongPressMsint500Duration in milliseconds a touch must be held before the menu opens (rc.49).
MoveTolerancePxint10How many CSS pixels a finger may drift during a long-press before it is cancelled (rc.49).
IsOpenboolfalseObsolete alias for Open; forwards to and from it.
IsOpenChangedEventCallback<bool>—Obsolete alias for OpenChanged; forwards to and from it.

ContextMenuTrigger

Prop Type Default Description
ChildContentRenderFragment?nullThe right-clickable area content.
Classstring?nullAdditional CSS classes.
AdditionalAttributesDictionary<string, object>?nullAdditional HTML attributes.

ContextMenuContent

Prop Type Default Description
ChildContentRenderFragment?nullMenu items, labels, and separators.
Classstring?nullAdditional CSS classes.
AdditionalAttributesDictionary<string, object>?nullAdditional HTML attributes.

ContextMenuItem

Prop Type Default Description
ChildContentRenderFragment?nullItem label content.
OnClickEventCallback—Callback invoked when clicked. Closes the menu after execution.
DisabledboolfalseDisables the menu item.
Classstring?nullAdditional CSS classes.
AdditionalAttributesDictionary<string, object>?nullAdditional HTML attributes.

ContextMenuCheckboxItem

Prop Type Default Description
ChildContentRenderFragment?nullCheckbox item label content.
CheckedboolfalseWhether the item is checked. Use with @bind-Checked.
CheckedChangedEventCallback<bool>—Callback invoked when the checked state changes.
Classstring?nullAdditional CSS classes.
AdditionalAttributesDictionary<string, object>?nullAdditional HTML attributes.

ContextMenuRadioGroup

Prop Type Default Description
ChildContentRenderFragment?nullRadio items.
Valuestring?nullCurrently selected value. Use with @bind-Value.
ValueChangedEventCallback<string>—Callback invoked when the selected value changes.
AdditionalAttributesDictionary<string, object>?nullAdditional HTML attributes.

ContextMenuRadioItem

Prop Type Default Description
ChildContentRenderFragment?nullRadio item label content.
Valuestring""The value this radio item represents. Required.
Classstring?nullAdditional CSS classes.
AdditionalAttributesDictionary<string, object>?nullAdditional HTML attributes.

ContextMenuLabel

Prop Type Default Description
ChildContentRenderFragment?nullLabel text content.
Classstring?nullAdditional CSS classes.
AdditionalAttributesDictionary<string, object>?nullAdditional HTML attributes.

ContextMenuSeparator

Prop Type Default Description
Classstring?nullAdditional CSS classes.
AdditionalAttributesDictionary<string, object>?nullAdditional HTML attributes.

ContextMenuGroup

Prop Type Default Description
ChildContentRenderFragment?nullGroup items.
Classstring?nullAdditional CSS classes.
AdditionalAttributesDictionary<string, object>?nullAdditional HTML attributes.

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