ContextMenu, Asgard Docs

Navigation & chrome

A right-click menu.

A context menu with positioned rendering, nested submenus, keyboard shortcuts, and separator dividers.

Key features:

Nested submenu arrays for fly-out sub-menus
shortcutKey hints and checked state for toggle items
Icons, disabled states, and separator dividers
Auto-repositions to stay within viewport bounds

Loading preview…

When to use it

Right-click actions in tables and trees
Canvas / editor context actions
Power-user shortcut menus

Properties

Prop	Type	Default	Description
`items`	`MenuItem[]`	—	Array of menu item definitions. Each item can have a label, icon, shortcut, submenu, and other properties.
`anchorElement`	`HTMLElement \| null`	—	The DOM element the context menu is anchored to. When null, the menu is hidden.
`onClose`	`() => void`	—	Callback invoked when the menu is dismissed, either by clicking outside or selecting an item.
`item.id`	`string`	—	Unique identifier for the menu item.
`item.label`	`string`	—	Display text for the menu item.
`item.icon`	`ReactNode`	—	Optional icon rendered to the left of the label.
`item.shortcutKey`	`string`	—	Keyboard shortcut hint displayed on the right side of the menu item.
`item.submenu`	`MenuItem[]`	—	Nested array of menu items displayed as a fly-out submenu on hover.

Notes

Nested submenus are created by providing a submenu array on a MenuItem, which renders as a fly-out menu on hover.
Set the separator property to true on a MenuItem to render a visual divider line between groups of items.
The menu automatically repositions itself to stay within the viewport when rendered near screen edges.

Presets