Components
Context Menu
A menu of actions revealed by right-clicking (or long-pressing) a target region, built on Radix with full keyboard navigation and nested submenus.
Basic usage
Right-click the dashed box to open the menu.
Right-click here
Checkboxes, radios & submenus
Compose ContextMenuCheckboxItem, ContextMenuRadioGroup, and ContextMenuSub for richer menus. These previews stay uncontrolled via defaultChecked and defaultValue.
Right-click here
Props
| Prop | Type | Default | Description |
|---|---|---|---|
ContextMenu | Root | — | Wraps the trigger and content. Manages open state; uncontrolled by default. |
ContextMenuTrigger | ReactNode | — | The region that opens the menu on right-click (or long-press on touch). Pass className to style the box. |
ContextMenuContent | ReactNode | — | The floating surface, rendered in a portal. Holds the menu items. |
ContextMenuItem | ReactNode | — | A selectable action. Accepts variant and inset. |
ContextMenuItem.variant | 'default' | 'destructive' | 'default' | Use destructive to render the item in the danger color. |
ContextMenuItem.inset | boolean | false | Adds left padding to align with items that have a leading icon or indicator. |
ContextMenuCheckboxItem | ReactNode | — | Toggleable item with a check indicator. Controlled via checked / defaultChecked. |
ContextMenuRadioGroup | ReactNode | — | Groups radio items; value / defaultValue selects the active one. |
ContextMenuRadioItem | ReactNode | — | A single-choice item; requires a unique value prop. |
ContextMenuSub | ReactNode | — | Wraps a nested submenu (SubTrigger + SubContent). |
ContextMenuLabel | ReactNode | — | A non-interactive group heading. Accepts inset. |
ContextMenuSeparator | ReactNode | — | A horizontal divider between groups of items. |
ContextMenuShortcut | ReactNode | — | Right-aligned text for a keyboard shortcut hint. |
Accessibility
- The menu opens on the platform context-menu gesture — right-click on pointer devices and long-press on touch.
- Once open, focus is trapped inside the menu and arrow keys move between items, with type-ahead to jump by first letter.
- Enter or Space activate the focused item; Esc closes the menu and restores focus to the trigger.
- Items carry the correct
menuitem,menuitemcheckbox, andmenuitemradioroles; disabled items are skipped during keyboard navigation.