Toggle Sidebar B
header.lightDarkMode D
Context Menu
Right-click menu. Same shape as DropdownMenu but triggered by contextmenu events instead of a button. Supports nested submenus and checkbox/radio items.
Default
Right-click the trigger to open.
Right-click here
With submenu
Nest related actions in a submenu that opens on hover or right arrow.
Right-click here
Checkbox and radio items
Toggle options with checkbox items and pick one from a radio group.
Right-click here
API Reference
Props, events, and slots for each sub-component.
ContextMenu
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| open | boolean | — | Open state. Supports v-model:open. |
Events
| Event | Description |
|---|---|
| update:open | Fires when the menu opens or closes. |
ContextMenuTrigger
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| disabled | boolean | false | Stop the contextmenu event from opening the menu. |
Slots
| Slot | Description |
|---|---|
| default | The region that responds to right-click. |
ContextMenuContent
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| class | string | — | Extra classes. Forwards positioning props to reka-ui ContextMenuContent. |
Events
| Event | Description |
|---|---|
| close-auto-focus | Fires when focus returns after the menu closes. |
ContextMenuItem
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| disabled | boolean | false | Block selection. |
| inset | boolean | false | Extra left padding to align with sibling items that have an icon. |
Events
| Event | Description |
|---|---|
| select | Fires when the item is chosen. |
ContextMenuCheckboxItem / ContextMenuRadioItem
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| modelValue | boolean | string | — | Item state. Supports v-model. |
Events
| Event | Description |
|---|---|
| update:modelValue | Fires when the checkbox toggles or the radio value changes. |
ContextMenuSub / ContextMenuSubTrigger / ContextMenuSubContent
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| inset | boolean | false | (SubTrigger) Extra left padding to align with icon items. Submenu opens on hover/right-arrow. |
ContextMenuLabel
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| inset | boolean | false | Align the non-interactive section label with inset items. |
Accessibility
Keyboard shortcuts and ARIA behavior.
Keyboard
| Shortcut | Description |
|---|---|
| Shift+F10 | Opens the context menu from the keyboard (alongside the Menu key). |
| ↑ | Moves focus to the previous item. |
| ↓ | Moves focus to the next item. |
| → | Opens a submenu when focus is on a submenu trigger. |
| ← | Closes a submenu and returns focus to its trigger. |
| Esc | Closes the menu. |
| A | Typing characters jumps to the matching item (typeahead). |
- Opens via the contextmenu event (right-click, Shift+F10, or the Menu key).
- Shares the same menu semantics as DropdownMenu (roving tabindex, role=menuitem) but is contextmenu-triggered.