A menu that opens at the pointer on right-click or long press, with actions for the area under it.
Selector: mui-context-menu
Import
import { ContextMenu, ContextMenuTrigger, ContextMenuItem, ContextMenuSeparator } from '@mushilu-san/ui/overlays';
PreviewCode
Loading example…
Overview
Context menu wraps an area marked with muiContextMenuTrigger. Right-click opens the menu at the pointer. On touch screens a long press does the same. open is a two-way model, and items are mui-context-menu-item entries.
Escape closes the menu. Choosing an item closes it unless closeOnSelect is off.
When to use
Secondary actions on a file, row or canvas item, where the same actions also exist elsewhere.
Power-user shortcuts in a document or editor.
When not to use
The only way to reach an action. Keyboard and touch users may not find it. Use Dropdown menu instead.
Choosing a value. Use a select. Use Select instead.
Guidelines
Do
Show the same actions in a visible control too, such as a "more" button.
Mark destructive items with color="danger".
Don't
Do not rely on right-click as the only way to open a menu.
Accessibility
Roles and attributes
Element
Role
Notes
menu item
menuitem
aria-disabled when disabled.
separator
separator
Keyboard
Keys
Action
ArrowDownArrowUp, HomeEnd
Move between items.
Escape
Closes the menu.
A context menu is a supplement. Always offer the same actions through a visible control.
API
ContextMenu
Selector: mui-context-menu
Name
Type
Default
Description
closeOnSelect
boolean
true
Closes the menu after an item is chosen. Default `true`. Accepts attribute presence, e.g. <… closeOnSelect>.
Name
Type
Default
Description
open
boolean
false
Whether the menu is open. Two-way bindable with `[(open)]`.
Name
Type
Description
opened
void
Emits when the menu opens.
closed
void
Emits when the menu closes, however it was closed.
CSS parts
::part(panel)
::part(root)
ContextMenuTrigger
Selector: [muiContextMenuTrigger]
CSS parts
::part(trigger)
ContextMenuItem
Selector: mui-context-menu-item
Name
Type
Default
Description
disabled
boolean
false
Disables the item. It is skipped by the arrow keys. Accepts attribute presence, e.g. <… disabled>.
color
'danger' | 'default'
'default'
Colour of the item: `default` or `danger`. Default `default`.
shortcut
string | undefined
—
Keyboard shortcut shown on the right, for display only.
Mushilu-San UI