Component detail entry

Navigation

@vean/ui

SDropdownMenu

DropdownMenu

DropdownMenu belongs to the Navigation category. Start with demos and usage, then use the API tables to finish integration and styling decisions.

Use the quick jump panel to reach overview, usage, demos, and API first, then continue through the full page.

Quick jump

Overview Usage Demos API Changelog

Related components

If you are composing interactions in the same family, these components usually pair well together.

Anchor Breadcrumb Command ContextMenu Menu Menubar

DropdownMenu

Overview

Displays a menu to the user—such as a set of actions or functions—triggered by a button. SDropdownMenu is a data-driven menu built on the Aria menu primitives (MenuOptions/MenuItem/…), rendered through the shared popover portal. The family also ships checkbox (SDropdownMenuCheckbox, multi-select), radio (SDropdownMenuRadio, single-select) and custom (SDropdownMenuWrapper) variants.

Use a dropdown for a compact action menu. For navigation menus use nav-menu; for a rich hover preview use hover-card.

Usage

Features

🧩 Aria/menu based — built on the shared menu primitives with full keyboard navigation (arrow/Home/End/PageUp/PageDown), typeahead and roving focus
🖱️ Trigger modes — trigger="click" or "hover"; delayDuration/skipDelayDuration tune hover latency
📊 Data-driven — pass items (with value/label/icon/disabled/hidden/separator…) or use the item slots
☑️ Checkbox variant — SDropdownMenuCheckbox for multi-select with v-model
🔘 Radio variant — SDropdownMenuRadio for single-select with v-model
🧩 Wrapper variant — SDropdownMenuWrapper for fully custom menu content
🎯 Placement — popper placement + showArrow
🎭 Modal — modal controls outside-pointer blocking and focus trapping
🪜 Submenus — nested submenu support with side-aware open/close keys (RTL-aware)
🙈 Hidden items — an item flagged hidden (and its whole subtree) is dropped from the menu
♿ Accessible — role="menu"/menuitem, aria-checked on checkbox/radio, axe-core clean

Component family

SDropdownMenu (styled) — the data-driven menu; forwards to DropdownMenuCompact
SDropdownMenuCheckbox (styled) — multi-select menu with v-model
SDropdownMenuRadio (styled) — single-select menu with v-model
SDropdownMenuWrapper (styled) — custom-content menu
DropdownMenuCompact / DropdownMenuWrapperCompact / DropdownMenuCheckboxCompact / DropdownMenuRadioCompact (Aria) — the aggregated composites
MenuOptions/MenuItem/… (Aria) — the shared menu primitives (roving focus, keyboard nav, submenus)

Demos

Basic

100%

Checkbox

100%

Radio

100%

Mixed

100%

API

Aria Layer

DropdownMenu<T>

29 Props9 Emits6 Slots

Props

Prop	Type	Default	Description
class	ClassValue	—	class of menu popup
size	ThemeSize	—	Visual size of the component.
ui	Partial<DropdownMenuUi>	—	Per-slot class overrides for the component.
disabled	boolean	—	Whether the component is disabled.
placement	Placement	—	Placement.
showArrow	boolean	—	Whether to show an arrow.
triggerProps	DropdownMenuTriggerProps	—	Properties forwarded to the trigger element.
portalProps	DropdownMenuPortalProps	—	Properties forwarded to the portal element.
contentProps	DropdownMenuContentProps	—	Properties forwarded to the content element.
popupProps	DropdownMenuPopupProps	—	Properties forwarded to the popup element.
arrowProps	DropdownMenuArrowProps	—	Properties forwarded to the arrow element.
trigger	DropdownMenuTriggerType	'click'	The trigger type of the dropdown menu. - `click`: The dropdown menu will be opened when the trigger is clicked. - `hover`: The dropdown menu will be opened when the trigger is hovered.
delayDuration	number	150	The duration from when the pointer enters the trigger until the dropdown menu gets opened.
skipDelayDuration	number	300	How much time a user has to enter another trigger without incurring a delay again.
dir	Direction	—	The reading direction of the combobox when applicable. If omitted, inherits globally from `ConfigProvider` or assumes LTR (left-to-right) reading mode.
open	boolean	undefined	The controlled open state of the dialog. Can be bound with `v-model:open`.
defaultOpen	boolean	false	The open state of the dialog when it is initially rendered. Use when you do not need to control its open state.
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	DropdownMenuItemProps	—	Properties forwarded to the item element.
linkProps	LinkExtraProps	—	Properties forwarded to the link element.
subProps	DropdownMenuSubProps	—	Properties forwarded to the sub element.
groupProps	DropdownMenuGroupProps	—	Properties forwarded to the group element.
groupLabelProps	DropdownMenuGroupLabelProps	—	Properties forwarded to the group label element.
shortcutProps	MenuShortcutProps	—	Properties forwarded to the shortcut element.
separatorProps	DropdownMenuSeparatorProps	—	Properties forwarded to the separator element.
subTriggerProps	DropdownMenuSubTriggerProps	—	Properties forwarded to the sub trigger element.
subContentProps	DropdownMenuSubContentProps	—	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.

DropdownMenuAnchor

DropdownMenuArrow

DropdownMenuCheckbox<T>

29 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<DropdownMenuUi>	—	Per-slot class overrides for the component.
indicatorPosition	AlignSide	—	Indicator position.
disabled	boolean	—	Whether the component is disabled.
placement	Placement	—	Placement.
showArrow	boolean	—	Whether to show an arrow.
triggerProps	DropdownMenuTriggerProps	—	Properties forwarded to the trigger element.
portalProps	DropdownMenuPortalProps	—	Properties forwarded to the portal element.
contentProps	DropdownMenuContentProps	—	Properties forwarded to the content element.
popupProps	DropdownMenuPopupProps	—	Properties forwarded to the popup element.
arrowProps	DropdownMenuArrowProps	—	Properties forwarded to the arrow element.
trigger	DropdownMenuTriggerType	'click'	The trigger type of the dropdown menu. - `click`: The dropdown menu will be opened when the trigger is clicked. - `hover`: The dropdown menu will be opened when the trigger is hovered.
delayDuration	number	150	The duration from when the pointer enters the trigger until the dropdown menu gets opened.
skipDelayDuration	number	300	How much time a user has to enter another trigger without incurring a delay again.
dir	Direction	—	The reading direction of the combobox when applicable. If omitted, inherits globally from `ConfigProvider` or assumes LTR (left-to-right) reading mode.
open	boolean	undefined	The controlled open state of the dialog. Can be bound with `v-model:open`.
defaultOpen	boolean	false	The open state of the dialog when it is initially rendered. Use when you do not need to control its open state.
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	DropdownMenuGroupLabelProps	—	Properties forwarded to the group label element.
checkboxItemProps	DropdownMenuCheckboxItemProps	—	Properties forwarded to the checkbox item element.
indicatorProps	DropdownMenuItemIndicatorProps	—	Properties forwarded to the indicator element.
shortcutProps	MenuShortcutProps	—	Properties forwarded to the shortcut element.
separatorProps	DropdownMenuSeparatorProps	—	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.

DropdownMenuCheckboxCompact<T>

25 Props10 Emits5 Slots

Props

Prop	Type	Default	Description
disabled	boolean	—	Whether the component is disabled.
placement	Placement	—	Placement.
showArrow	boolean	—	Whether to show an arrow.
triggerProps	DropdownMenuTriggerProps	—	Properties forwarded to the trigger element.
portalProps	DropdownMenuPortalProps	—	Properties forwarded to the portal element.
contentProps	DropdownMenuContentProps	—	Properties forwarded to the content element.
popupProps	DropdownMenuPopupProps	—	Properties forwarded to the popup element.
arrowProps	DropdownMenuArrowProps	—	Properties forwarded to the arrow element.
trigger	DropdownMenuTriggerType	'click'	The trigger type of the dropdown menu. - `click`: The dropdown menu will be opened when the trigger is clicked. - `hover`: The dropdown menu will be opened when the trigger is hovered.
delayDuration	number	150	The duration from when the pointer enters the trigger until the dropdown menu gets opened.
skipDelayDuration	number	300	How much time a user has to enter another trigger without incurring a delay again.
dir	Direction	—	The reading direction of the combobox when applicable. If omitted, inherits globally from `ConfigProvider` or assumes LTR (left-to-right) reading mode.
open	boolean	undefined	The controlled open state of the dialog. Can be bound with `v-model:open`.
defaultOpen	boolean	false	The open state of the dialog when it is initially rendered. Use when you do not need to control its open state.
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	DropdownMenuGroupLabelProps	—	Properties forwarded to the group label element.
checkboxItemProps	DropdownMenuCheckboxItemProps	—	Properties forwarded to the checkbox item element.
indicatorProps	DropdownMenuItemIndicatorProps	—	Properties forwarded to the indicator element.
shortcutProps	MenuShortcutProps	—	Properties forwarded to the shortcut element.
separatorProps	DropdownMenuSeparatorProps	—	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.

DropdownMenuCheckboxGroup

DropdownMenuCheckboxItem

DropdownMenuCompact<T>

26 Props9 Emits6 Slots

Props

Prop	Type	Default	Description
disabled	boolean	—	Whether the component is disabled.
placement	Placement	—	Placement.
showArrow	boolean	—	Whether to show an arrow.
triggerProps	DropdownMenuTriggerProps	—	Properties forwarded to the trigger element.
portalProps	DropdownMenuPortalProps	—	Properties forwarded to the portal element.
contentProps	DropdownMenuContentProps	—	Properties forwarded to the content element.
popupProps	DropdownMenuPopupProps	—	Properties forwarded to the popup element.
arrowProps	DropdownMenuArrowProps	—	Properties forwarded to the arrow element.
trigger	DropdownMenuTriggerType	'click'	The trigger type of the dropdown menu. - `click`: The dropdown menu will be opened when the trigger is clicked. - `hover`: The dropdown menu will be opened when the trigger is hovered.
delayDuration	number	150	The duration from when the pointer enters the trigger until the dropdown menu gets opened.
skipDelayDuration	number	300	How much time a user has to enter another trigger without incurring a delay again.
dir	Direction	—	The reading direction of the combobox when applicable. If omitted, inherits globally from `ConfigProvider` or assumes LTR (left-to-right) reading mode.
open	boolean	undefined	The controlled open state of the dialog. Can be bound with `v-model:open`.
defaultOpen	boolean	false	The open state of the dialog when it is initially rendered. Use when you do not need to control its open state.
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	DropdownMenuItemProps	—	Properties forwarded to the item element.
linkProps	LinkExtraProps	—	Properties forwarded to the link element.
subProps	DropdownMenuSubProps	—	Properties forwarded to the sub element.
groupProps	DropdownMenuGroupProps	—	Properties forwarded to the group element.
groupLabelProps	DropdownMenuGroupLabelProps	—	Properties forwarded to the group label element.
shortcutProps	MenuShortcutProps	—	Properties forwarded to the shortcut element.
separatorProps	DropdownMenuSeparatorProps	—	Properties forwarded to the separator element.
subTriggerProps	DropdownMenuSubTriggerProps	—	Properties forwarded to the sub trigger element.
subContentProps	DropdownMenuSubContentProps	—	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.

DropdownMenuContent

25 Props7 Emits

Props

Prop	Type	Default	Description
popupProps	DropdownMenuPopupProps	—	Properties forwarded to the popup element.
placement	Placement	undefined	The placement of the floating element. If used, it will override the `side` and `align` props.
side	Side	'bottom'	The preferred side of the trigger to render against when open. Will be reversed when collisions occur and avoidCollisions is enabled.
sideOffset	number	0	The distance in pixels from the trigger.
sideFlip	boolean	true	Flip to the opposite side when colliding with boundary.
align	Align	'center'	The preferred alignment against the trigger. May change when collisions occur.
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 }.
arrowPadding	number	0	The padding between the arrow and the edges of the content. If your content has border-radius, this will prevent it from overflowing the corners.
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.
updatePositionStrategy	'always' \| 'optimized'	'optimized'	Strategy to update the position of the floating element on every animation frame.
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.
loop	boolean	false	Whether keyboard navigation should loop around

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.

DropdownMenuGroup

DropdownMenuGroupLabel

DropdownMenuItem

DropdownMenuItemIndicator

DropdownMenuPortal

DropdownMenuRadio<T>

29 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<DropdownMenuUi>	—	Per-slot class overrides for the component.
indicatorPosition	AlignSide	—	Indicator position.
disabled	boolean	—	Whether the component is disabled.
placement	Placement	—	Placement.
showArrow	boolean	—	Whether to show an arrow.
triggerProps	DropdownMenuTriggerProps	—	Properties forwarded to the trigger element.
portalProps	DropdownMenuPortalProps	—	Properties forwarded to the portal element.
contentProps	DropdownMenuContentProps	—	Properties forwarded to the content element.
popupProps	DropdownMenuPopupProps	—	Properties forwarded to the popup element.
arrowProps	DropdownMenuArrowProps	—	Properties forwarded to the arrow element.
trigger	DropdownMenuTriggerType	'click'	The trigger type of the dropdown menu. - `click`: The dropdown menu will be opened when the trigger is clicked. - `hover`: The dropdown menu will be opened when the trigger is hovered.
delayDuration	number	150	The duration from when the pointer enters the trigger until the dropdown menu gets opened.
skipDelayDuration	number	300	How much time a user has to enter another trigger without incurring a delay again.
dir	Direction	—	The reading direction of the combobox when applicable. If omitted, inherits globally from `ConfigProvider` or assumes LTR (left-to-right) reading mode.
open	boolean	undefined	The controlled open state of the dialog. Can be bound with `v-model:open`.
defaultOpen	boolean	false	The open state of the dialog when it is initially rendered. Use when you do not need to control its open state.
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	DropdownMenuGroupLabelProps	—	Properties forwarded to the group label element.
radioItemProps	DropdownMenuRadioItemProps	—	Properties forwarded to the radio item element.
indicatorProps	DropdownMenuItemIndicatorProps	—	Properties forwarded to the indicator element.
shortcutProps	MenuShortcutProps	—	Properties forwarded to the shortcut element.
separatorProps	DropdownMenuSeparatorProps	—	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.

DropdownMenuRadioCompact<T>

25 Props10 Emits5 Slots

Props

Prop	Type	Default	Description
disabled	boolean	—	Whether the component is disabled.
placement	Placement	—	Placement.
showArrow	boolean	—	Whether to show an arrow.
triggerProps	DropdownMenuTriggerProps	—	Properties forwarded to the trigger element.
portalProps	DropdownMenuPortalProps	—	Properties forwarded to the portal element.
contentProps	DropdownMenuContentProps	—	Properties forwarded to the content element.
popupProps	DropdownMenuPopupProps	—	Properties forwarded to the popup element.
arrowProps	DropdownMenuArrowProps	—	Properties forwarded to the arrow element.
trigger	DropdownMenuTriggerType	'click'	The trigger type of the dropdown menu. - `click`: The dropdown menu will be opened when the trigger is clicked. - `hover`: The dropdown menu will be opened when the trigger is hovered.
delayDuration	number	150	The duration from when the pointer enters the trigger until the dropdown menu gets opened.
skipDelayDuration	number	300	How much time a user has to enter another trigger without incurring a delay again.
dir	Direction	—	The reading direction of the combobox when applicable. If omitted, inherits globally from `ConfigProvider` or assumes LTR (left-to-right) reading mode.
open	boolean	undefined	The controlled open state of the dialog. Can be bound with `v-model:open`.
defaultOpen	boolean	false	The open state of the dialog when it is initially rendered. Use when you do not need to control its open state.
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	DropdownMenuGroupLabelProps	—	Properties forwarded to the group label element.
radioItemProps	DropdownMenuRadioItemProps	—	Properties forwarded to the radio item element.
indicatorProps	DropdownMenuItemIndicatorProps	—	Properties forwarded to the indicator element.
shortcutProps	MenuShortcutProps	—	Properties forwarded to the shortcut element.
separatorProps	DropdownMenuSeparatorProps	—	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.

DropdownMenuRadioGroup

DropdownMenuRadioItem

DropdownMenuRoot

7 Props1 Emits

Props

Prop	Type	Default	Description
trigger	DropdownMenuTriggerType	'click'	The trigger type of the dropdown menu. - `click`: The dropdown menu will be opened when the trigger is clicked. - `hover`: The dropdown menu will be opened when the trigger is hovered.
delayDuration	number	150	The duration from when the pointer enters the trigger until the dropdown menu gets opened.
skipDelayDuration	number	300	How much time a user has to enter another trigger without incurring a delay again.
dir	Direction	—	The reading direction of the combobox when applicable. If omitted, inherits globally from `ConfigProvider` or assumes LTR (left-to-right) reading mode.
open	boolean	undefined	The controlled open state of the dialog. Can be bound with `v-model:open`.
defaultOpen	boolean	false	The open state of the dialog when it is initially rendered. Use when you do not need to control its open state.
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.

DropdownMenuSeparator

DropdownMenuSub

DropdownMenuSubContent

DropdownMenuSubTrigger

DropdownMenuTrigger

4 Props

Props

Prop	Type	Default	Description
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`

DropdownMenuWrapper

19 Props8 Emits

Props

Prop	Type	Default	Description
class	ClassValue	—	class of menu popup
size	ThemeSize	—	Visual size of the component.
ui	Partial<DropdownMenuUi>	—	Per-slot class overrides for the component.
indicatorPosition	AlignSide	—	Indicator position.
disabled	boolean	—	Whether the component is disabled.
placement	Placement	—	Placement.
showArrow	boolean	—	Whether to show an arrow.
triggerProps	DropdownMenuTriggerProps	—	Properties forwarded to the trigger element.
portalProps	DropdownMenuPortalProps	—	Properties forwarded to the portal element.
contentProps	DropdownMenuContentProps	—	Properties forwarded to the content element.
popupProps	DropdownMenuPopupProps	—	Properties forwarded to the popup element.
arrowProps	DropdownMenuArrowProps	—	Properties forwarded to the arrow element.
trigger	DropdownMenuTriggerType	'click'	The trigger type of the dropdown menu. - `click`: The dropdown menu will be opened when the trigger is clicked. - `hover`: The dropdown menu will be opened when the trigger is hovered.
delayDuration	number	150	The duration from when the pointer enters the trigger until the dropdown menu gets opened.
skipDelayDuration	number	300	How much time a user has to enter another trigger without incurring a delay again.
dir	Direction	—	The reading direction of the combobox when applicable. If omitted, inherits globally from `ConfigProvider` or assumes LTR (left-to-right) reading mode.
open	boolean	undefined	The controlled open state of the dialog. Can be bound with `v-model:open`.
defaultOpen	boolean	false	The open state of the dialog when it is initially rendered. Use when you do not need to control its open state.
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.

DropdownMenuWrapperCompact

15 Props8 Emits

Props

Prop	Type	Default	Description
disabled	boolean	—	Whether the component is disabled.
placement	Placement	—	Placement.
showArrow	boolean	—	Whether to show an arrow.
triggerProps	DropdownMenuTriggerProps	—	Properties forwarded to the trigger element.
portalProps	DropdownMenuPortalProps	—	Properties forwarded to the portal element.
contentProps	DropdownMenuContentProps	—	Properties forwarded to the content element.
popupProps	DropdownMenuPopupProps	—	Properties forwarded to the popup element.
arrowProps	DropdownMenuArrowProps	—	Properties forwarded to the arrow element.
trigger	DropdownMenuTriggerType	'click'	The trigger type of the dropdown menu. - `click`: The dropdown menu will be opened when the trigger is clicked. - `hover`: The dropdown menu will be opened when the trigger is hovered.
delayDuration	number	150	The duration from when the pointer enters the trigger until the dropdown menu gets opened.
skipDelayDuration	number	300	How much time a user has to enter another trigger without incurring a delay again.
dir	Direction	—	The reading direction of the combobox when applicable. If omitted, inherits globally from `ConfigProvider` or assumes LTR (left-to-right) reading mode.
open	boolean	undefined	The controlled open state of the dialog. Can be bound with `v-model:open`.
defaultOpen	boolean	false	The open state of the dialog when it is initially rendered. Use when you do not need to control its open state.
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 dropdown-menu family composes the shared menu primitives (MenuOptions/MenuItem) inside a 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 dropdown with items/onSelect props; VeanUI additionally exposes dedicated checkbox/radio/wrapper variants, a size scale, and full keyboard/typeahead behavior through the shared menu layer.

Capability	VeanUI	shadcn/ui	Ant Design Dropdown	Element Plus Dropdown	Mantine Menu	Naive UI Dropdown
Aria/styled split	✅	✅	—	—	—	—
Data-driven items	✅	✅	✅	✅	✅	✅
Checkbox / radio	✅	✅	—	—	✅	—
Trigger click/hover	✅	✅	✅	✅	✅	✅
Keyboard + typeahead	✅	✅	—	—	—	—
Submenu	✅	✅	✅	✅	✅	✅
Sizes (6)	✅	—	—	—	—	—

— = unsupported or a different interaction model.

Cautions

SDropdownMenu is modal by default (true); pass modal={false} for a lightweight, non-blocking menu.
trigger accepts "click" (default) or "hover"; for hover, tune delayDuration (open) and skipDelayDuration (between triggers).
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; position it inside a relatively-positioned ancestor only with portalProps: { disabled: true }.

Roadmap

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

FAQ

How do I build a basic action menu?

Pass items and a trigger slot:

<SDropdownMenu
  :items="[
    { value: 'edit', label: 'Edit' },
    { value: 'delete', label: 'Delete', disabled: true }
  ]"
>
  <template #trigger><SButton>Actions</SButton></template>
</SDropdownMenu>

How do I use the checkbox (multi-select) variant?

Use SDropdownMenuCheckbox with v-model:

<SDropdownMenuCheckbox v-model="selected" :items="items">
  <template #trigger><SButton>Filters</SButton></template>
</SDropdownMenuCheckbox>

How do I use the radio (single-select) variant?

Use SDropdownMenuRadio with v-model:

<SDropdownMenuRadio v-model="sort" :items="sortOptions">
  <template #trigger><SButton>Sort</SButton></template>
</SDropdownMenuRadio>

How do I build a fully custom menu?

Use SDropdownMenuWrapper and fill the default slot with MenuItems:

<SDropdownMenuWrapper>
  <template #trigger><SButton>Open</SButton></template>
  <MenuItem value="a">Item A</MenuItem>
  <MenuItem value="b">Item B</MenuItem>
</SDropdownMenuWrapper>

How do I open on hover?

Set trigger="hover" and adjust the delays:

<SDropdownMenu trigger="hover" :delay-duration="100" :items="items">
  <template #trigger><SButton>Hover</SButton></template>
</SDropdownMenu>

Changelog

Version history is grouped by release so you can quickly see what changed for this component across published versions.

v0.40.0

2026-09-14

Compare release

Fix

guard empty popup id in trigger blur close

Scope: dropdown-menuAuthors: soybeanfeView commit38f5e

Fix

guard empty popup id in trigger blur close

Scope: dropdown-menuAuthors: soybeanfeView commit38f5e

v0.0.9

2026-01-02

Compare release

Feature

add placement prop to DropdownMenuWrapper and DropdownMenu components

Scope: dropdown-menuAuthors: soybeanjsView commit04e0b

v0.0.8

2026-01-01

Compare release

Fix

add popupProps to dropdown menu components for enhanced functionality

Scope: dropdown-menuAuthors: soybeanjsView commitab340

Refactor

streamline context management by removing unused elements and updating references for improved clarity and functionality

Scope: dropdown-menuAuthors: soybeanjsView commit73ac1

v0.0.2

2025-11-18

Compare release

Feature

implement dropdown menu components with context management and accessibility features

Scope: dropdown-menuAuthors: soybeanjsView commit96bcd

Feature

add DropdownMenuExample component and integrate it into App.vue

Scope: dropdown-menuAuthors: soybeanjsView commit4a190

Feature

enhance dropdown functionality with new submenus, checkbox, and radio groups

Scope: dropdown-menuAuthors: soybeanjsView commit2a8e7

Feature

add aria-disabled attribute to dropdown menu trigger for better accessibility

Scope: dropdown-menuAuthors: soybeanjsView commit0da08

Fix

update MenuAnchor syntax for improved template compatibility

Scope: dropdown-menuAuthors: soybeanjsView commit6d96c

Optimization

remove unnecessary Slot wrapper from dropdown menu trigger for cleaner markup

Scope: dropdown-menuAuthors: soybeanjsView commit0d9f3

Refactor

enhance content element management by introducing shallowRef and el-ref binding

Scope: dropdown-menuAuthors: soybeanjsView commit2c9ed

Refactor

implement hover functionality with delay management for improved user experience

Scope: dropdown-menuAuthors: soybeanjsView commite24ef

Feature

add 'disabledTrigger' prop to dropdown components

Scope: dropdown-menuAuthors: soybeanjsView commit113cc

Feature

implement dropdown menu components with context management and accessibility features

Scope: dropdown-menuAuthors: soybeanjsView commit96bcd

Feature

add DropdownMenuExample component and integrate it into App.vue

Scope: dropdown-menuAuthors: soybeanjsView commit4a190

Feature

enhance dropdown functionality with new submenus, checkbox, and radio groups

Scope: dropdown-menuAuthors: soybeanjsView commit2a8e7

Feature

add aria-disabled attribute to dropdown menu trigger for better accessibility

Scope: dropdown-menuAuthors: soybeanjsView commit0da08

Fix

update MenuAnchor syntax for improved template compatibility

Scope: dropdown-menuAuthors: soybeanjsView commit6d96c

Optimization

add size selection to dropdown menu component example

Scope: dropdown-menuAuthors: soybeanjsView commit75f3c

Optimization

remove unnecessary Slot wrapper from dropdown menu trigger for cleaner markup

Scope: dropdown-menuAuthors: soybeanjsView commit0d9f3

Refactor

enhance content element management by introducing shallowRef and el-ref binding

Scope: dropdown-menuAuthors: soybeanjsView commit2c9ed

Refactor

implement hover functionality with delay management for improved user experience

Scope: dropdown-menuAuthors: soybeanjsView commite24ef

Feature

add 'disabledTrigger' prop to dropdown components

Scope: dropdown-menuAuthors: soybeanjsView commit113cc

Optimization

add size selection to dropdown menu component example

Scope: dropdown-menuAuthors: soybeanjsView commit75f3c