ContextMenu

Open in Playground

Wrap an area and give it items; right-clicking inside opens a custom menu at the pointer instead of the default browser menu. The items are the same as Menu: icons, shortcut hints, dividers, tone="danger" and nested children. Arrow keys move, Enter chooses, Escape or an outside click closes it, and the Menu key opens it from the keyboard. Right-clicking again elsewhere moves it. disabled hands the click back to the browser.

Right-click anywhere in the lair 🌕

Last action: nothing yet

Props

ContextMenu

childrenReactNode
The area that opens the menu when right-clicked.
itemsMenuItem[]
The entries, as in Menu. children makes a submenu; { key, divider: true } is a separator. See the MenuItem table below.
labelstring
Accessible name of the menu.
disabledboolean
Default: false
Leave the browser's own context menu alone.
look'default' | 'actions'
Default: 'default'
The look of the menu: "actions" matches ActionMenu (uppercase labels, ruled rows, a fixed width); the default is the compact one.
linkComponentElementType
Default: 'a'
Component used for items with a site path as href (not absolute URLs), e.g. a router Link.
linkPropstring
Default: 'href'
Prop that receives the href on linkComponent, e.g. "to".
onOpenChange(open: boolean) => void
Called when it opens or closes.
classNamestring
Default: ''
Extra classes for the root element.

ContextMenu props
Prop	Type	Default	Description
`children`	ReactNode	–	The area that opens the menu when right-clicked.
`items`	MenuItem[]	–	The entries, as in `Menu`. `children` makes a submenu; `{ key, divider: true }` is a separator. See the MenuItem table below.
`label`	string	–	Accessible name of the menu.
`disabled`	boolean	`false`	Leave the browser's own context menu alone.
`look`	'default' \| 'actions'	`'default'`	The look of the menu: "actions" matches ActionMenu (uppercase labels, ruled rows, a fixed width); the default is the compact one.
`linkComponent`	ElementType	`'a'`	Component used for items with a site path as href (not absolute URLs), e.g. a router Link.
`linkProp`	string	`'href'`	Prop that receives the href on linkComponent, e.g. "to".
`onOpenChange`	(open: boolean) => void	–	Called when it opens or closes.
`className`	string	`''`	Extra classes for the root element.

MenuItem

keystring
Unique key of the item.
labelReactNode
Text of the item (not needed for a divider or heading).
headingReactNode
A group label instead of an item; the items after it, up to the next heading or divider, are grouped under it.
itemsMenuItem[]
Makes the item a group: its label is the heading and these are the items under it (dividers and submenus work inside).
iconReactNode
Shown before the label, hidden from screen readers.
descriptionReactNode
A smaller grey line under the label.
badgeReactNode
Short value at the end of the row, e.g. a count.
shortcutstring
A keyboard shortcut hint at the end, e.g. "Ctrl+C" (display only).
disabledboolean
Default: false
Dim the item and ignore it.
tone'default' | 'warning' | 'danger'
Default: 'default'
Color of the item; "danger" is red, for destructive actions.
hasDialogboolean
Default: false
Marks an item that opens a dialog (aria-haspopup="dialog").
hrefstring
Makes the item a real link instead of a button; onClick is then optional.
targetstring
For link items: where to open it. "_blank" opens a new tab and adds rel="noopener noreferrer".
externalboolean
Show the external-link arrow. By default a link is external when it has target="_blank" or an absolute http(s) address.
onClick() => void
Called when the item is chosen.
childrenMenuItem[]
Makes the item open a submenu with these items.
dividerboolean
Default: false
A separator line instead of an item (only key is needed).

MenuItem props
Prop	Type	Default	Description
`key`	string	–	Unique key of the item.
`label`	ReactNode	–	Text of the item (not needed for a divider or heading).
`heading`	ReactNode	–	A group label instead of an item; the items after it, up to the next heading or divider, are grouped under it.
`items`	MenuItem[]	–	Makes the item a group: its label is the heading and these are the items under it (dividers and submenus work inside).
`icon`	ReactNode	–	Shown before the label, hidden from screen readers.
`description`	ReactNode	–	A smaller grey line under the label.
`badge`	ReactNode	–	Short value at the end of the row, e.g. a count.
`shortcut`	string	–	A keyboard shortcut hint at the end, e.g. "Ctrl+C" (display only).
`disabled`	boolean	`false`	Dim the item and ignore it.
`tone`	'default' \| 'warning' \| 'danger'	`'default'`	Color of the item; "danger" is red, for destructive actions.
`hasDialog`	boolean	`false`	Marks an item that opens a dialog (aria-haspopup="dialog").
`href`	string	–	Makes the item a real link instead of a button; onClick is then optional.
`target`	string	–	For link items: where to open it. "_blank" opens a new tab and adds rel="noopener noreferrer".
`external`	boolean	–	Show the external-link arrow. By default a link is external when it has target="_blank" or an absolute http(s) address.
`onClick`	() => void	–	Called when the item is chosen.
`children`	MenuItem[]	–	Makes the item open a submenu with these items.
`divider`	boolean	`false`	A separator line instead of an item (only key is needed).