Toggle Sidebar B
AppearanceLight & dark mode 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.
Basic
Right-click the dashed region to open a list of items with a separator.
Replay preview
Right click here
Submenu
ContextMenuSub nests a second menu behind a submenu trigger.
Replay preview
Right click here
Shortcuts
ContextMenuShortcut right-aligns a keyboard hint inside an item.
Replay preview
Right click here
Groups
ContextMenuGroup with a ContextMenuLabel splits items into labeled sections.
Replay preview
Right click here
With icons
A leading icon before each item.
Replay preview
Right click here
Checkbox items
ContextMenuCheckboxItem toggles a boolean with v-model.
Replay preview
Right click here
Radio group
ContextMenuRadioGroup binds one-of-many selection with v-model.
Replay preview
Right click here
Destructive
Set variant to destructive on an item for delete-style actions.
Replay preview
Right click here
API Reference
ContextMenu
| Prop | Type | Default | Description |
|---|---|---|---|
open | boolean | — | Open state. Supports v-model:open. |
| Event | Description |
|---|---|
update:open | Fires when the menu opens or closes. |
ContextMenuTrigger
| Prop | Type | Default | Description |
|---|---|---|---|
disabled | boolean | false | Stop the contextmenu event from opening the menu. |
| Slot | Description |
|---|---|
default | The region that responds to right-click. |
ContextMenuContent
| Prop | Type | Default | Description |
|---|---|---|---|
class | string | — | Extra classes. Forwards positioning props to reka-ui ContextMenuContent. |
| Event | Description |
|---|---|
close-auto-focus | Fires when focus returns after the menu closes. |
ContextMenuItem
| Prop | Type | Default | Description |
|---|---|---|---|
variant | "default" | "destructive" | "default" | destructive tints the item red for delete-style actions. |
disabled | boolean | false | Block selection. |
inset | boolean | false | Extra left padding to align with sibling items that have an icon. |
| Event | Description |
|---|---|
select | Fires when the item is chosen. |
ContextMenuCheckboxItem / ContextMenuRadioItem
| Prop | Type | Default | Description |
|---|---|---|---|
modelValue | boolean | string | — | Item state. Supports v-model. |
| Event | Description |
|---|---|
update:modelValue | Fires when the checkbox toggles or the radio value changes. |
ContextMenuSub / ContextMenuSubTrigger / ContextMenuSubContent
| Prop | Type | Default | Description |
|---|---|---|---|
inset | boolean | false | (SubTrigger) Extra left padding to align with icon items. Submenu opens on hover/right-arrow. |
ContextMenuLabel
| Prop | Type | Default | Description |
|---|---|---|---|
inset | boolean | false | Align the non-interactive section label with inset items. |
Accessibility
Keyboard shortcuts and ARIA behavior.
| 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.