Skip to content
uiify

Framework

Next.jsTanStack StartAstroVike

Style

CSSTailwind

Theme

Language

English简体中文日本語العربيةРусскийEspañolPortuguês (Brasil)Pseudo (accented)Pseudo (bidi)

Context menu

Menu that opens on a right-click.

Browsers
Chrome 151+
Why this version?

CSS anchor positioning places this surface beside its trigger using position-anchor, and anchor(). Older Chrome versions may place the surface away from its trigger.

Firefox 151+
Why this version?

CSS anchor positioning places this surface beside its trigger using position-anchor, and anchor(). Older Firefox versions may place the surface away from its trigger.

Safari 27+
Why this version?

CSS anchor positioning places this surface beside its trigger using position-anchor, and anchor(). Older Safari versions may place the surface away from its trigger.

Tier
2
Bundle compressed
4.90 kB
Forced layout budget
0 ms
Axe budget
0
SSR compatible
Yes
Published contract
Test harness

Playground

Context Menu

Closed

Right-click area

Open

Right-click area

API

ContextMenu.Root

PropTypeDefaultDescription
childrenReactNode—The trigger area and the menu content.
defaultOpenboolean—Open state the menu starts in when it is left uncontrolled.
idstring—Id used for the popover element that holds the menu.
onOpenChangePopoverChangeHandler—Called when the menu opens or closes, with the reason and the originating event.
openboolean—Open state of the menu, making it controlled.

ContextMenu.Trigger

PropTypeDefaultDescription
childrenReactNode—Area that opens the menu on right-click.
classNamestring—Class applied to the rendered element.
renderReactElement | ((props, state) => ReactElement)—Replace the rendered element while keeping behavior and accessibility wiring.

ContextMenu.Content

PropTypeDefaultDescription
childrenReactNode—Items, labels and separators of the menu.
classNamestring—Class applied to the rendered element.
renderReactElement | ((props, state) => ReactElement)—Replace the rendered element while keeping behavior and accessibility wiring.

ContextMenu.Item

PropTypeDefaultDescription
childrenReactNode—Content of the item.
classNamestring—Class applied to the rendered element.
disabledbooleanfalseDisables the item and skips it during keyboard navigation.
onSelect(event: MenuSelectEvent) => void—Called when the item is selected; calling preventDefault on the event keeps the menu open.
textValuestring—Text the typeahead matches against when the item's content is not plain text.
renderReactElement | ((props, state) => ReactElement)—Replace the rendered element while keeping behavior and accessibility wiring.

ContextMenu.CheckboxItem

PropTypeDefaultDescription
checkedboolean | "indeterminate"falseChecked state of the item.
childrenReactNode—Content of the item.
classNamestring—Class applied to the rendered element.
disabledbooleanfalseDisables the item and skips it during keyboard navigation.
onCheckedChange(checked: boolean) => void—Called with the new checked state when the item is selected.
textValuestring—Text the typeahead matches against when the item's content is not plain text.

ContextMenu.RadioItem

PropTypeDefaultDescription
value*string—Value this item selects within the menu.
childrenReactNode—Content of the item.
classNamestring—Class applied to the rendered element.
disabledbooleanfalseDisables the item and skips it during keyboard navigation.
textValuestring—Text the typeahead matches against when the item's content is not plain text.

ContextMenu.Label

PropTypeDefaultDescription
childrenReactNode—Text of the group heading.
classNamestring—Class applied to the rendered element.

ContextMenu.Separator

PropTypeDefaultDescription
classNamestring—Class applied to the rendered element.

ContextMenu.Sub

PropTypeDefaultDescription
childrenReactNode—The submenu trigger and its content.

ContextMenu.Sub.Trigger

PropTypeDefaultDescription
childrenReactNode—Label of the submenu trigger.
classNamestring—Class applied to the rendered element.
disabledbooleanfalseDisables the trigger and skips it during keyboard navigation.
textValuestring—Text the typeahead matches against when the item's content is not plain text.

ContextMenu.Sub.Content

PropTypeDefaultDescription
childrenReactNode—Items of the submenu.
classNamestring—Class applied to the rendered element.

Keyboard

KeyAction
Shift+F10 / Menu keyOpen at the focused element
↑ / ↓Rove between items
EscapeClose and return focus

Accessibility

Menu pattern opened at the pointer or keyboard-invoked position.

Styling hooks

data-statedata-highlighted