ContextMenu

Overview

Displays a menu located at the pointer, triggered by a right-click. SContextMenu is a data-driven menu built on the shared Aria menu primitives, opening at the pointer position via the contextmenu event (or a press-and-hold on touch, after pressOpenDelay). The family also ships checkbox (SContextMenuCheckbox), radio (SContextMenuRadio) and custom (SContextMenuWrapper) variants.

Use a context menu for pointer-relative actions (files, canvas, tree nodes). For a button-triggered menu use dropdown-menu; for a rich hover preview use hover-card.

Usage

Features

🖱️ Right-click trigger — opens at the pointer via the contextmenu event; event.preventDefault() prevents the native menu
📱 Press-and-hold — pressOpenDelay (default 700ms) opens on long-press for touch/pen
🧩 Aria/menu based — built on the shared menu primitives with full keyboard navigation, typeahead and roving focus
📊 Data-driven — pass items (with value/label/icon/disabled/hidden/separator…) or use the item slots
🙈 Hidden items — an item flagged hidden (and its whole subtree) is dropped from the menu
☑️ Checkbox / 🔘 Radio variants — SContextMenuCheckbox/SContextMenuRadio for selectable menus
🧩 Wrapper variant — SContextMenuWrapper for fully custom menu content
🎭 Modal — modal controls outside-pointer blocking and focus trapping
♿ Accessible — role="menu"/menuitem, aria-checked on checkbox/radio, axe-core clean

Component family

SContextMenu (styled) — the data-driven menu; forwards to ContextMenuCompact
SContextMenuCheckbox / SContextMenuRadio (styled) — selectable menus with v-model
SContextMenuWrapper (styled) — custom-content menu
ContextMenuCompact / ContextMenuWrapperCompact / ContextMenuCheckboxCompact / ContextMenuRadioCompact (Aria) — the aggregated composites
ContextMenuRoot / ContextMenuTrigger / ContextMenuContent (Aria) — the pointer-anchored trigger and menu surface
MenuOptions/MenuItem/… (Aria) — the shared menu primitives

Demos

Basic

100%

Right click here

Checkbox

100%

Right click here

Radio

100%

Right click here

Mixed

100%

Right click here

API

Aria Layer

ContextMenu<T>

24 Props9 Emits6 Slots

Props

Prop	Type	Default	Description
class	ClassValue	—	class of menu popup
size	ThemeSize	—	Visual size of the component.
ui	Partial<ContextMenuUi>	—	Per-slot class overrides for the component.
disabled	boolean	—	Whether the component is disabled.
showArrow	boolean	—	Whether to show an arrow.
triggerProps	ContextMenuTriggerProps	—	Properties forwarded to the trigger element.
portalProps	ContextMenuPortalProps	—	Properties forwarded to the portal element.
contentProps	ContextMenuContentProps	—	Properties forwarded to the content element.
popupProps	ContextMenuPopupProps	—	Properties forwarded to the popup element.
arrowProps	ContextMenuArrowProps	—	Properties forwarded to the arrow element.
pressOpenDelay	number	700	The duration from when the trigger is pressed until the menu opens.
dir	Direction	—	The reading direction of the combobox when applicable. If omitted, inherits globally from `ConfigProvider` or assumes LTR (left-to-right) reading mode.
modal	boolean	true	The modality of the dialog. When set to `true`, interaction with outside elements will be disabled and only dialog content will be visible to screen readers.
items	MenuOptionData<T>[]	—	Items rendered by the component.
selectedValue	T	—	The selected value of the menu.
itemProps	ContextMenuItemProps	—	Properties forwarded to the item element.
linkProps	LinkExtraProps	—	Properties forwarded to the link element.
subProps	ContextMenuSubProps	—	Properties forwarded to the sub element.
groupProps	ContextMenuGroupProps	—	Properties forwarded to the group element.
groupLabelProps	ContextMenuGroupLabelProps	—	Properties forwarded to the group label element.
shortcutProps	MenuShortcutProps	—	Properties forwarded to the shortcut element.
separatorProps	ContextMenuSeparatorProps	—	Properties forwarded to the separator element.
subTriggerProps	ContextMenuSubTriggerProps	—	Properties forwarded to the sub trigger element.
subContentProps	ContextMenuSubContentProps	—	Properties forwarded to the sub content element.

Emits

Emit Name	Parameters	Description
update:open	boolean	Event handler called when the open state of the dialog changes.
escapeKeyDown	KeyboardEvent	Event handler called when the escape key is down. Can be prevented.
pointerDownOutside	PointerDownOutsideEvent	Event handler called when a `pointerdown` event happens outside of the `DismissableLayer`. Can be prevented.
focusOutside	FocusOutsideEvent	Event handler called when the focus moves outside of the `DismissableLayer`. Can be prevented.
interactOutside	PointerDownOutsideEvent \| FocusOutsideEvent	Event handler called when an interaction happens outside the `DismissableLayer`. Specifically, when a `pointerdown` event happens outside or focus moves outside of it. Can be prevented.
openAutoFocus	Event	Event handler called when auto-focusing on open. Can be prevented.
closeAutoFocus	Event	Event handler called when auto-focusing on close. Can be prevented.
entryFocus	Event	Emitted when entry focus occurs.
select	MenuOptionData<T>, event: Event	Emitted when select occurs.

Slots

Slot Name	Parameters	Description
item	{ item: MenuOptionData<T>; isTrigger?: boolean; }	Custom content for the item slot.
item-leading	{ item: MenuOptionData<T>; }	Custom content for the item leading slot.
item-trailing	{ item: MenuOptionData<T>; }	Custom content for the item trailing slot.
item-trigger-icon	{ item: MenuOptionData<T>; }	Custom content for the item trigger icon slot.
item-link-icon	{ item: MenuOptionData<T>; }	Custom content for the item link icon slot.
trigger	—	Custom content for the trigger slot.

ContextMenuAnchor

ContextMenuArrow

ContextMenuCheckbox<T>

24 Props10 Emits5 Slots

Props

Prop	Type	Default	Description
class	((string \| false \| Record<string, any> \| ClassValue[]) & (string \| false \| Record<string, any> \| import("vue").ClassValue[])) \| null	—	class of menu popup
size	ThemeSize	—	Visual size of the component.
ui	Partial<ContextMenuUi>	—	Per-slot class overrides for the component.
indicatorPosition	AlignSide	—	Indicator position.
disabled	boolean	—	Whether the component is disabled.
showArrow	boolean	—	Whether to show an arrow.
triggerProps	ContextMenuTriggerProps	—	Properties forwarded to the trigger element.
portalProps	ContextMenuPortalProps	—	Properties forwarded to the portal element.
contentProps	ContextMenuContentProps	—	Properties forwarded to the content element.
popupProps	ContextMenuPopupProps	—	Properties forwarded to the popup element.
arrowProps	ContextMenuArrowProps	—	Properties forwarded to the arrow element.
pressOpenDelay	number	700	The duration from when the trigger is pressed until the menu opens.
dir	Direction	—	The reading direction of the combobox when applicable. If omitted, inherits globally from `ConfigProvider` or assumes LTR (left-to-right) reading mode.
modal	boolean	true	The modality of the dialog. When set to `true`, interaction with outside elements will be disabled and only dialog content will be visible to screen readers.
items	MenuCheckboxOptionData<T>[]	—	Items rendered by the component.
groupLabelProps	ContextMenuGroupLabelProps	—	Properties forwarded to the group label element.
checkboxItemProps	ContextMenuCheckboxItemProps	—	Properties forwarded to the checkbox item element.
indicatorProps	ContextMenuItemIndicatorProps	—	Properties forwarded to the indicator element.
shortcutProps	MenuShortcutProps	—	Properties forwarded to the shortcut element.
separatorProps	ContextMenuSeparatorProps	—	Properties forwarded to the separator element.
modelValue	T[]	—	The controlled value of the checkbox. Can be bound with v-model.
defaultValue	T[]	—	The value of the checkbox when it is initially rendered. Use when you do not need to control its value.
asChild	boolean	—	Change the default rendered element for the one passed as a child, merging their props and behavior.
as	AsTag \| Component	'div'	The element or component this component should render as. Can be overwrite by `asChild`

Emits

Emit Name	Parameters	Description
update:open	boolean	Event handler called when the open state of the dialog changes.
escapeKeyDown	KeyboardEvent	Event handler called when the escape key is down. Can be prevented.
pointerDownOutside	PointerDownOutsideEvent	Event handler called when a `pointerdown` event happens outside of the `DismissableLayer`. Can be prevented.
focusOutside	FocusOutsideEvent	Event handler called when the focus moves outside of the `DismissableLayer`. Can be prevented.
interactOutside	PointerDownOutsideEvent \| FocusOutsideEvent	Event handler called when an interaction happens outside the `DismissableLayer`. Specifically, when a `pointerdown` event happens outside or focus moves outside of it. Can be prevented.
openAutoFocus	Event	Event handler called when auto-focusing on open. Can be prevented.
closeAutoFocus	Event	Event handler called when auto-focusing on close. Can be prevented.
entryFocus	Event	Emitted when entry focus occurs.
update:modelValue	T[]	Event handler called when the value of the checkbox group changes.
select	MenuCheckboxOptionData<T>, event: Event	Emitted when select occurs.

Slots

Slot Name	Parameters	Description
item	MenuCheckboxOptionData<T>	Custom content for the item slot.
item-leading	MenuCheckboxOptionData<T>	Custom content for the item leading slot.
item-trailing	MenuCheckboxOptionData<T>	Custom content for the item trailing slot.
item-indicator-icon	MenuCheckboxOptionData<T>	Custom content for the item indicator icon slot.
trigger	—	Custom content for the trigger slot.

ContextMenuCheckboxCompact<T>

20 Props10 Emits5 Slots

Props

Prop	Type	Default	Description
disabled	boolean	—	Whether the component is disabled.
showArrow	boolean	—	Whether to show an arrow.
triggerProps	ContextMenuTriggerProps	—	Properties forwarded to the trigger element.
portalProps	ContextMenuPortalProps	—	Properties forwarded to the portal element.
contentProps	ContextMenuContentProps	—	Properties forwarded to the content element.
popupProps	ContextMenuPopupProps	—	Properties forwarded to the popup element.
arrowProps	ContextMenuArrowProps	—	Properties forwarded to the arrow element.
pressOpenDelay	number	700	The duration from when the trigger is pressed until the menu opens.
dir	Direction	—	The reading direction of the combobox when applicable. If omitted, inherits globally from `ConfigProvider` or assumes LTR (left-to-right) reading mode.
modal	boolean	true	The modality of the dialog. When set to `true`, interaction with outside elements will be disabled and only dialog content will be visible to screen readers.
items	MenuCheckboxOptionData<T>[]	—	Items rendered by the component.
groupLabelProps	ContextMenuGroupLabelProps	—	Properties forwarded to the group label element.
checkboxItemProps	ContextMenuCheckboxItemProps	—	Properties forwarded to the checkbox item element.
indicatorProps	ContextMenuItemIndicatorProps	—	Properties forwarded to the indicator element.
shortcutProps	MenuShortcutProps	—	Properties forwarded to the shortcut element.
separatorProps	ContextMenuSeparatorProps	—	Properties forwarded to the separator element.
modelValue	T[]	—	The controlled value of the checkbox. Can be bound with v-model.
defaultValue	T[]	—	The value of the checkbox when it is initially rendered. Use when you do not need to control its value.
asChild	boolean	—	Change the default rendered element for the one passed as a child, merging their props and behavior.
as	AsTag \| Component	'div'	The element or component this component should render as. Can be overwrite by `asChild`

Emits

Emit Name	Parameters	Description
update:open	boolean	Event handler called when the open state of the dialog changes.
escapeKeyDown	KeyboardEvent	Event handler called when the escape key is down. Can be prevented.
pointerDownOutside	PointerDownOutsideEvent	Event handler called when a `pointerdown` event happens outside of the `DismissableLayer`. Can be prevented.
focusOutside	FocusOutsideEvent	Event handler called when the focus moves outside of the `DismissableLayer`. Can be prevented.
interactOutside	PointerDownOutsideEvent \| FocusOutsideEvent	Event handler called when an interaction happens outside the `DismissableLayer`. Specifically, when a `pointerdown` event happens outside or focus moves outside of it. Can be prevented.
openAutoFocus	Event	Event handler called when auto-focusing on open. Can be prevented.
closeAutoFocus	Event	Event handler called when auto-focusing on close. Can be prevented.
entryFocus	Event	Emitted when entry focus occurs.
update:modelValue	T[]	Event handler called when the value of the checkbox group changes.
select	MenuCheckboxOptionData<T>, event: Event	Emitted when select occurs.

Slots

Slot Name	Parameters	Description
item	MenuCheckboxOptionData<T>	Custom content for the item slot.
item-leading	MenuCheckboxOptionData<T>	Custom content for the item leading slot.
item-trailing	MenuCheckboxOptionData<T>	Custom content for the item trailing slot.
item-indicator-icon	MenuCheckboxOptionData<T>	Custom content for the item indicator icon slot.
trigger	—	Custom content for the trigger slot.

ContextMenuCheckboxGroup<T>

ContextMenuCheckboxItem

ContextMenuCompact<T>

21 Props9 Emits6 Slots

Props

Prop	Type	Default	Description
disabled	boolean	—	Whether the component is disabled.
showArrow	boolean	—	Whether to show an arrow.
triggerProps	ContextMenuTriggerProps	—	Properties forwarded to the trigger element.
portalProps	ContextMenuPortalProps	—	Properties forwarded to the portal element.
contentProps	ContextMenuContentProps	—	Properties forwarded to the content element.
popupProps	ContextMenuPopupProps	—	Properties forwarded to the popup element.
arrowProps	ContextMenuArrowProps	—	Properties forwarded to the arrow element.
pressOpenDelay	number	700	The duration from when the trigger is pressed until the menu opens.
dir	Direction	—	The reading direction of the combobox when applicable. If omitted, inherits globally from `ConfigProvider` or assumes LTR (left-to-right) reading mode.
modal	boolean	true	The modality of the dialog. When set to `true`, interaction with outside elements will be disabled and only dialog content will be visible to screen readers.
items	MenuOptionData<T>[]	—	Items rendered by the component.
selectedValue	T	—	The selected value of the menu.
itemProps	ContextMenuItemProps	—	Properties forwarded to the item element.
linkProps	LinkExtraProps	—	Properties forwarded to the link element.
subProps	ContextMenuSubProps	—	Properties forwarded to the sub element.
groupProps	ContextMenuGroupProps	—	Properties forwarded to the group element.
groupLabelProps	ContextMenuGroupLabelProps	—	Properties forwarded to the group label element.
shortcutProps	MenuShortcutProps	—	Properties forwarded to the shortcut element.
separatorProps	ContextMenuSeparatorProps	—	Properties forwarded to the separator element.
subTriggerProps	ContextMenuSubTriggerProps	—	Properties forwarded to the sub trigger element.
subContentProps	ContextMenuSubContentProps	—	Properties forwarded to the sub content element.

Emits

Emit Name	Parameters	Description
update:open	boolean	Event handler called when the open state of the dialog changes.
escapeKeyDown	KeyboardEvent	Event handler called when the escape key is down. Can be prevented.
pointerDownOutside	PointerDownOutsideEvent	Event handler called when a `pointerdown` event happens outside of the `DismissableLayer`. Can be prevented.
focusOutside	FocusOutsideEvent	Event handler called when the focus moves outside of the `DismissableLayer`. Can be prevented.
interactOutside	PointerDownOutsideEvent \| FocusOutsideEvent	Event handler called when an interaction happens outside the `DismissableLayer`. Specifically, when a `pointerdown` event happens outside or focus moves outside of it. Can be prevented.
openAutoFocus	Event	Event handler called when auto-focusing on open. Can be prevented.
closeAutoFocus	Event	Event handler called when auto-focusing on close. Can be prevented.
entryFocus	Event	Emitted when entry focus occurs.
select	MenuOptionData<T>, event: Event	Emitted when select occurs.

Slots

Slot Name	Parameters	Description
item	{ item: MenuOptionData<T>; isTrigger?: boolean; }	Custom content for the item slot.
item-leading	{ item: MenuOptionData<T>; }	Custom content for the item leading slot.
item-trailing	{ item: MenuOptionData<T>; }	Custom content for the item trailing slot.
item-trigger-icon	{ item: MenuOptionData<T>; }	Custom content for the item trigger icon slot.
item-link-icon	{ item: MenuOptionData<T>; }	Custom content for the item link icon slot.
trigger	—	Custom content for the trigger slot.

ContextMenuContent

20 Props7 Emits

Props

Prop	Type	Default	Description
loop	boolean	false	Whether keyboard navigation should loop around
placement	Placement	undefined	The placement of the floating element. If used, it will override the `side` and `align` props.
popupProps	ContextMenuPopupProps	—	Properties forwarded to the popup element.
sideFlip	boolean	true	Flip to the opposite side when colliding with boundary.
alignOffset	number	0	An offset in pixels from the `start` or `end` alignment options.
alignFlip	boolean	true	Flip alignment when colliding with boundary. May only occur when `prioritizePosition` is true.
avoidCollisions	boolean	true	When `true`, overrides the side and align preferences to prevent collisions with boundary edges.
collisionBoundary	Element \| (Element \| null)[] \| null	[ ]	The element used as the collision boundary. By default this is the viewport, though you can provide additional element(s) to be included in this check.
collisionPadding	Padding	0	The distance in pixels from the boundary edges where collision detection should occur. Accepts a number (same for all sides), or a partial padding object, for example: { top: 20, left: 20 }.
hideShiftedArrow	boolean	true	When `true`, hides the arrow when it cannot be centered to the reference element.
sticky	'partial' \| 'always'	'partial'	The sticky behavior on the align axis. `partial` will keep the content in the boundary as long as the trigger is at least partially in the boundary whilst "always" will keep the content in the boundary regardless.
hideWhenDetached	boolean	false	Whether to hide the content when the trigger becomes fully occluded.
positionStrategy	'fixed' \| 'absolute'	'fixed'	The type of CSS position property to use.
disableUpdateOnLayoutShift	boolean	false	Whether to disable the update position for the content when the layout shifted.
prioritizePosition	boolean	false	Force content to be position within the viewport. Might overlap the reference element, which may not be desired.
reference	ReferenceElement	—	The custom element or virtual element that will be set as the reference to position the floating element. If provided, it will replace the default anchor element.
trapFocus	boolean	modal	Whether focus is trapped inside the popup while open (Tab cycles within the layer and body scroll is locked for modal layers).
disableHoverableContent	boolean	false	When `true`, hovering the popup closes instead of keeping it open (the grace area is disabled, so leaving the trigger closes the layer immediately).
onGracePointerExit	(() => void)	—	Callback invoked when the pointer finally leaves the grace area. Lets an upper layer (e.g. Tooltip) run area-scoped close logic without registering its own second grace area.
forceMount	boolean	—	Used to force mounting when more control is needed. Useful when controlling animation with Vue animation libraries.

Emits

Emit Name	Parameters	Description
escapeKeyDown	KeyboardEvent	Event handler called when the escape key is down. Can be prevented.
pointerDownOutside	PointerDownOutsideEvent	Event handler called when a `pointerdown` event happens outside of the `DismissableLayer`. Can be prevented.
focusOutside	FocusOutsideEvent	Event handler called when the focus moves outside of the `DismissableLayer`. Can be prevented.
interactOutside	PointerDownOutsideEvent \| FocusOutsideEvent	Event handler called when an interaction happens outside the `DismissableLayer`. Specifically, when a `pointerdown` event happens outside or focus moves outside of it. Can be prevented.
openAutoFocus	Event	Event handler called when auto-focusing on open. Can be prevented.
closeAutoFocus	Event	Event handler called when auto-focusing on close. Can be prevented.
entryFocus	Event	Emitted when entry focus occurs.

ContextMenuGroup

ContextMenuGroupLabel

ContextMenuItem

ContextMenuItemIndicator

ContextMenuPortal

ContextMenuRadio<T>

24 Props10 Emits5 Slots

Props

Prop	Type	Default	Description
class	((string \| false \| Record<string, any> \| ClassValue[]) & (string \| false \| Record<string, any> \| import("vue").ClassValue[])) \| null	—	class of menu popup
size	ThemeSize	—	Visual size of the component.
ui	Partial<ContextMenuUi>	—	Per-slot class overrides for the component.
indicatorPosition	AlignSide	—	Indicator position.
disabled	boolean	—	Whether the component is disabled.
showArrow	boolean	—	Whether to show an arrow.
triggerProps	ContextMenuTriggerProps	—	Properties forwarded to the trigger element.
portalProps	ContextMenuPortalProps	—	Properties forwarded to the portal element.
contentProps	ContextMenuContentProps	—	Properties forwarded to the content element.
popupProps	ContextMenuPopupProps	—	Properties forwarded to the popup element.
arrowProps	ContextMenuArrowProps	—	Properties forwarded to the arrow element.
pressOpenDelay	number	700	The duration from when the trigger is pressed until the menu opens.
dir	Direction	—	The reading direction of the combobox when applicable. If omitted, inherits globally from `ConfigProvider` or assumes LTR (left-to-right) reading mode.
modal	boolean	true	The modality of the dialog. When set to `true`, interaction with outside elements will be disabled and only dialog content will be visible to screen readers.
items	MenuRadioOptionData<T>[]	—	Items rendered by the component.
groupLabelProps	ContextMenuGroupLabelProps	—	Properties forwarded to the group label element.
radioItemProps	ContextMenuRadioItemProps	—	Properties forwarded to the radio item element.
indicatorProps	ContextMenuItemIndicatorProps	—	Properties forwarded to the indicator element.
shortcutProps	MenuShortcutProps	—	Properties forwarded to the shortcut element.
separatorProps	ContextMenuSeparatorProps	—	Properties forwarded to the separator element.
modelValue	T \| null	—	The controlled value of the radio item to check. Can be bound as `v-model`.
defaultValue	T	—	The value of the radio item that should be checked when initially rendered. Use when you do not need to control the state of the radio items.
asChild	boolean	—	Change the default rendered element for the one passed as a child, merging their props and behavior.
as	AsTag \| Component	'div'	The element or component this component should render as. Can be overwrite by `asChild`

Emits

Emit Name	Parameters	Description
update:open	boolean	Event handler called when the open state of the dialog changes.
escapeKeyDown	KeyboardEvent	Event handler called when the escape key is down. Can be prevented.
pointerDownOutside	PointerDownOutsideEvent	Event handler called when a `pointerdown` event happens outside of the `DismissableLayer`. Can be prevented.
focusOutside	FocusOutsideEvent	Event handler called when the focus moves outside of the `DismissableLayer`. Can be prevented.
interactOutside	PointerDownOutsideEvent \| FocusOutsideEvent	Event handler called when an interaction happens outside the `DismissableLayer`. Specifically, when a `pointerdown` event happens outside or focus moves outside of it. Can be prevented.
openAutoFocus	Event	Event handler called when auto-focusing on open. Can be prevented.
closeAutoFocus	Event	Event handler called when auto-focusing on close. Can be prevented.
entryFocus	Event	Emitted when entry focus occurs.
update:modelValue	Exclude<T, undefined> \| null	Event handler called when the radio group value changes
select	MenuRadioOptionData<T>, event: Event	Emitted when select occurs.

Slots

Slot Name	Parameters	Description
item	MenuRadioOptionData<T>	Custom content for the item slot.
item-leading	MenuRadioOptionData<T>	Custom content for the item leading slot.
item-trailing	MenuRadioOptionData<T>	Custom content for the item trailing slot.
item-indicator-icon	MenuRadioOptionData<T>	Custom content for the item indicator icon slot.
trigger	—	Custom content for the trigger slot.

ContextMenuRadioCompact<T>

20 Props10 Emits5 Slots

Props

Prop	Type	Default	Description
disabled	boolean	—	Whether the component is disabled.
showArrow	boolean	—	Whether to show an arrow.
triggerProps	ContextMenuTriggerProps	—	Properties forwarded to the trigger element.
portalProps	ContextMenuPortalProps	—	Properties forwarded to the portal element.
contentProps	ContextMenuContentProps	—	Properties forwarded to the content element.
popupProps	ContextMenuPopupProps	—	Properties forwarded to the popup element.
arrowProps	ContextMenuArrowProps	—	Properties forwarded to the arrow element.
pressOpenDelay	number	700	The duration from when the trigger is pressed until the menu opens.
dir	Direction	—	The reading direction of the combobox when applicable. If omitted, inherits globally from `ConfigProvider` or assumes LTR (left-to-right) reading mode.
modal	boolean	true	The modality of the dialog. When set to `true`, interaction with outside elements will be disabled and only dialog content will be visible to screen readers.
items	MenuRadioOptionData<T>[]	—	Items rendered by the component.
groupLabelProps	ContextMenuGroupLabelProps	—	Properties forwarded to the group label element.
radioItemProps	ContextMenuRadioItemProps	—	Properties forwarded to the radio item element.
indicatorProps	ContextMenuItemIndicatorProps	—	Properties forwarded to the indicator element.
shortcutProps	MenuShortcutProps	—	Properties forwarded to the shortcut element.
separatorProps	ContextMenuSeparatorProps	—	Properties forwarded to the separator element.
modelValue	T \| null	—	The controlled value of the radio item to check. Can be bound as `v-model`.
defaultValue	T	—	The value of the radio item that should be checked when initially rendered. Use when you do not need to control the state of the radio items.
asChild	boolean	—	Change the default rendered element for the one passed as a child, merging their props and behavior.
as	AsTag \| Component	'div'	The element or component this component should render as. Can be overwrite by `asChild`

Emits

Emit Name	Parameters	Description
update:open	boolean	Event handler called when the open state of the dialog changes.
escapeKeyDown	KeyboardEvent	Event handler called when the escape key is down. Can be prevented.
pointerDownOutside	PointerDownOutsideEvent	Event handler called when a `pointerdown` event happens outside of the `DismissableLayer`. Can be prevented.
focusOutside	FocusOutsideEvent	Event handler called when the focus moves outside of the `DismissableLayer`. Can be prevented.
interactOutside	PointerDownOutsideEvent \| FocusOutsideEvent	Event handler called when an interaction happens outside the `DismissableLayer`. Specifically, when a `pointerdown` event happens outside or focus moves outside of it. Can be prevented.
openAutoFocus	Event	Event handler called when auto-focusing on open. Can be prevented.
closeAutoFocus	Event	Event handler called when auto-focusing on close. Can be prevented.
entryFocus	Event	Emitted when entry focus occurs.
update:modelValue	Exclude<T, undefined> \| null	Event handler called when the radio group value changes
select	MenuRadioOptionData<T>, event: Event	Emitted when select occurs.

Slots

Slot Name	Parameters	Description
item	MenuRadioOptionData<T>	Custom content for the item slot.
item-leading	MenuRadioOptionData<T>	Custom content for the item leading slot.
item-trailing	MenuRadioOptionData<T>	Custom content for the item trailing slot.
item-indicator-icon	MenuRadioOptionData<T>	Custom content for the item indicator icon slot.
trigger	—	Custom content for the trigger slot.

ContextMenuRadioGroup<T>

ContextMenuRadioItem

ContextMenuRoot

3 Props1 Emits

Props

Prop	Type	Default	Description
pressOpenDelay	number	700	The duration from when the trigger is pressed until the menu opens.
dir	Direction	—	The reading direction of the combobox when applicable. If omitted, inherits globally from `ConfigProvider` or assumes LTR (left-to-right) reading mode.
modal	boolean	true	The modality of the dialog. When set to `true`, interaction with outside elements will be disabled and only dialog content will be visible to screen readers.

Emits

Emit Name	Parameters	Description
update:open	boolean	Event handler called when the open state of the dialog changes.

ContextMenuSeparator

ContextMenuSub

ContextMenuSubContent

ContextMenuSubTrigger

ContextMenuTrigger

5 Props

Props

Prop	Type	Default	Description
reference	HTMLElement \| null	—	The reference element for the context menu trigger.
type	ButtonType	'button'	The type of the button element. Can be one of 'button', 'submit', or 'reset'.
disabled	boolean	—	Whether the component is disabled.
asChild	boolean	—	Change the default rendered element for the one passed as a child, merging their props and behavior.
as	AsTag \| Component	'div'	The element or component this component should render as. Can be overwrite by `asChild`

ContextMenuWrapper

14 Props8 Emits

Props

Prop	Type	Default	Description
class	ClassValue	—	class of menu popup
size	ThemeSize	—	Visual size of the component.
ui	Partial<ContextMenuUi>	—	Per-slot class overrides for the component.
indicatorPosition	AlignSide	—	Indicator position.
disabled	boolean	—	Whether the component is disabled.
showArrow	boolean	—	Whether to show an arrow.
triggerProps	ContextMenuTriggerProps	—	Properties forwarded to the trigger element.
portalProps	ContextMenuPortalProps	—	Properties forwarded to the portal element.
contentProps	ContextMenuContentProps	—	Properties forwarded to the content element.
popupProps	ContextMenuPopupProps	—	Properties forwarded to the popup element.
arrowProps	ContextMenuArrowProps	—	Properties forwarded to the arrow element.
pressOpenDelay	number	700	The duration from when the trigger is pressed until the menu opens.
dir	Direction	—	The reading direction of the combobox when applicable. If omitted, inherits globally from `ConfigProvider` or assumes LTR (left-to-right) reading mode.
modal	boolean	true	The modality of the dialog. When set to `true`, interaction with outside elements will be disabled and only dialog content will be visible to screen readers.

Emits

Emit Name	Parameters	Description
update:open	boolean	Event handler called when the open state of the dialog changes.
escapeKeyDown	KeyboardEvent	Event handler called when the escape key is down. Can be prevented.
pointerDownOutside	PointerDownOutsideEvent	Event handler called when a `pointerdown` event happens outside of the `DismissableLayer`. Can be prevented.
focusOutside	FocusOutsideEvent	Event handler called when the focus moves outside of the `DismissableLayer`. Can be prevented.
interactOutside	PointerDownOutsideEvent \| FocusOutsideEvent	Event handler called when an interaction happens outside the `DismissableLayer`. Specifically, when a `pointerdown` event happens outside or focus moves outside of it. Can be prevented.
openAutoFocus	Event	Event handler called when auto-focusing on open. Can be prevented.
closeAutoFocus	Event	Event handler called when auto-focusing on close. Can be prevented.
entryFocus	Event	Emitted when entry focus occurs.

ContextMenuWrapperCompact

10 Props8 Emits

Props

Prop	Type	Default	Description
disabled	boolean	—	Whether the component is disabled.
showArrow	boolean	—	Whether to show an arrow.
triggerProps	ContextMenuTriggerProps	—	Properties forwarded to the trigger element.
portalProps	ContextMenuPortalProps	—	Properties forwarded to the portal element.
contentProps	ContextMenuContentProps	—	Properties forwarded to the content element.
popupProps	ContextMenuPopupProps	—	Properties forwarded to the popup element.
arrowProps	ContextMenuArrowProps	—	Properties forwarded to the arrow element.
pressOpenDelay	number	700	The duration from when the trigger is pressed until the menu opens.
dir	Direction	—	The reading direction of the combobox when applicable. If omitted, inherits globally from `ConfigProvider` or assumes LTR (left-to-right) reading mode.
modal	boolean	true	The modality of the dialog. When set to `true`, interaction with outside elements will be disabled and only dialog content will be visible to screen readers.

Emits

Emit Name	Parameters	Description
update:open	boolean	Event handler called when the open state of the dialog changes.
escapeKeyDown	KeyboardEvent	Event handler called when the escape key is down. Can be prevented.
pointerDownOutside	PointerDownOutsideEvent	Event handler called when a `pointerdown` event happens outside of the `DismissableLayer`. Can be prevented.
focusOutside	FocusOutsideEvent	Event handler called when the focus moves outside of the `DismissableLayer`. Can be prevented.
interactOutside	PointerDownOutsideEvent \| FocusOutsideEvent	Event handler called when an interaction happens outside the `DismissableLayer`. Specifically, when a `pointerdown` event happens outside or focus moves outside of it. Can be prevented.
openAutoFocus	Event	Event handler called when auto-focusing on open. Can be prevented.
closeAutoFocus	Event	Event handler called when auto-focusing on close. Can be prevented.
entryFocus	Event	Emitted when entry focus occurs.

Notes

Architecture and benchmark differences

The context-menu family composes the shared menu primitives inside a pointer-anchored popover portal; the UI wrappers only inject the shared menuVariants classes (via provideMenuUi) and forward props/slots. This mirrors radix-ui/shadcn-ui’s headless menu split. Ant Design, Element Plus, Mantine and Naive UI ship a single styled context-menu (or reuse their dropdown with trigger="contextmenu"); VeanUI additionally exposes checkbox/radio/wrapper variants, a size scale, and full keyboard/typeahead behavior through the shared menu layer.

Capability	VeanUI	shadcn/ui	Ant Design	Element Plus	Mantine	Naive UI
Pointer-positioned	✅	✅	✅	✅	✅	✅
Right-click trigger	✅	✅	✅	✅	✅	✅
Press-and-hold (touch)	✅	✅	—	—	—	—
Checkbox / radio	✅	✅	—	—	✅	—
Keyboard + typeahead	✅	✅	—	—	—	—
Sizes (6)	✅	—	—	—	—	—

— = unsupported or a different interaction model.

Cautions

The menu opens at the pointer via contextmenu; pressOpenDelay governs touch long-press (default 700ms).
SContextMenu is modal by default (true); pass modal={false} for a lightweight menu.
items is data-driven; use the matching item slots (item, item-leading, item-trailing) for custom rendering.
Checkbox/radio variants bind selection with v-model; radio expects a single value, checkbox an array.
The menu is rendered through a portal at the pointer position; event.preventDefault() on right-click suppresses the native browser menu.

Roadmap

N/A — context-menu is feature-complete for the current parity set.

FAQ

How do I build a basic context menu?

Pass items and wrap a trigger region:

<SContextMenu
  :items="[
    { value: 'copy', label: 'Copy' },
    { value: 'paste', label: 'Paste' },
    { type: 'separator' },
    { value: 'delete', label: 'Delete', disabled: true }
  ]"
>
  <div class="target">Right-click here</div>
</SContextMenu>

How do I open on press-and-hold for touch?

Adjust press-open-delay:

<SContextMenu :press-open-delay="500" :items="items">
  <div class="target">Hold to open</div>
</SContextMenu>

How do I use the checkbox/radio variants?

Use SContextMenuCheckbox/SContextMenuRadio with v-model:

<SContextMenuCheckbox v-model="selected" :items="items">
  <div class="target">Right-click</div>
</SContextMenuCheckbox>

How do I build a custom menu?

Use SContextMenuWrapper with MenuItems:

<SContextMenuWrapper>
  <div class="target">Right-click</div>
  <MenuItem value="a">Item A</MenuItem>
  <MenuItem value="b">Item B</MenuItem>
</SContextMenuWrapper>

Quick jump

Related components

ContextMenu

Overview

Usage

Features

Component family

Demos

Basic

Checkbox

Radio

Mixed

API

Aria Layer

ContextMenu<T>

Props

Emits

Slots

ContextMenuAnchor

ContextMenuArrow

ContextMenuCheckbox<T>

Props

Emits

Slots

ContextMenuCheckboxCompact<T>

Props

Emits

Slots

ContextMenuCheckboxGroup<T>

ContextMenuCheckboxItem

ContextMenuCompact<T>

Props

Emits

Slots

ContextMenuContent

Props

Emits

ContextMenuGroup

ContextMenuGroupLabel

ContextMenuItem

ContextMenuItemIndicator

ContextMenuPortal

ContextMenuRadio<T>

Props

Emits

Slots

ContextMenuRadioCompact<T>

Props

Emits

Slots

ContextMenuRadioGroup<T>

ContextMenuRadioItem

ContextMenuRoot

Props

Emits

ContextMenuSeparator

ContextMenuSub

ContextMenuSubContent

ContextMenuSubTrigger

ContextMenuTrigger

Props

ContextMenuWrapper

Props

Emits

ContextMenuWrapperCompact

Props

Emits

Notes

Architecture and benchmark differences

Cautions

Roadmap

FAQ

How do I build a basic context menu?

How do I open on press-and-hold for touch?

How do I use the checkbox/radio variants?

How do I build a custom menu?

Changelog

v0.50.0

Fix

Fix