Dropdown Menu
Click-triggered menu attached to a button. Supports items, separators, labels, shortcuts, checkbox and radio items, and nested submenus.
Demo
A dropdown menu with icons, shortcuts and sub menu items.
Basic
A basic dropdown menu with labels and separators.
Submenu
Use DropdownMenuSub to nest secondary actions.
Shortcuts
Add DropdownMenuShortcut to show keyboard hints.
Icons
Combine icons with labels for quick scanning.
Checkboxes
Use DropdownMenuCheckboxItem for toggles.
Checkboxes Icons
Add icons to checkbox items.
Radio Group
Use DropdownMenuRadioGroup for exclusive choices.
Radio Icons
Show radio options with icons.
Destructive
Use variant="destructive" for irreversible actions.
Avatar
An account switcher dropdown triggered by an avatar.
Complex
A richer example combining groups, icons, and submenus.
RTL
Pass dir="rtl" to flip the menu's alignment and submenu direction.
API Reference
DropdownMenu
| Prop | Type | Default | Description |
|---|---|---|---|
open | boolean | — | Open state. Supports v-model:open. |
modal | boolean | true | Trap focus and dim background when open. |
| Event | Description |
|---|---|
update:open | Fires when the menu opens or closes. Enables v-model:open. |
DropdownMenuTrigger
| Prop | Type | Default | Description |
|---|---|---|---|
asChild | boolean | false | Merge props onto the child element instead of a button. |
DropdownMenuContent
| Prop | Type | Default | Description |
|---|---|---|---|
side | "top" | "right" | "bottom" | "left" | "bottom" | Anchor side. |
align | "start" | "center" | "end" | "center" | Alignment along the side. |
sideOffset | number | 4 | Gap from the trigger in px. |
| Event | Description |
|---|---|
close-auto-focus | Fires when focus returns to the trigger after closing. |
DropdownMenuItem
| 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 icon items. |
| Event | Description |
|---|---|
select | Fires when the item is chosen. |
DropdownMenuCheckboxItem / DropdownMenuRadioItem
| 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. |
DropdownMenuSub / DropdownMenuSubTrigger / DropdownMenuSubContent
| Prop | Type | Default | Description |
|---|---|---|---|
inset | boolean | false | (SubTrigger) Align with icon items. Submenu opens on hover or right-arrow. |
DropdownMenuLabel
| Prop | Type | Default | Description |
|---|---|---|---|
inset | boolean | false | Align the section label with inset items. |
Accessibility
Keyboard shortcuts and ARIA behavior.
| Shortcut | Description |
|---|---|
| Space | Opens the menu from the trigger, or activates the focused item. |
| Enter | Opens the menu from the trigger, or activates the focused item. |
| ↑ | 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. |
| Home | Moves focus to the first item. |
| End | Moves focus to the last item. |
| Esc | Closes the menu and returns focus to the trigger. |
| A | Typing characters jumps to the matching item (typeahead). |
- Uses a roving tabindex: only one item is tabbable and arrows move focus between items.
- Menu items use role=menuitem within a role=menu container.