Toggle Sidebar B
header.lightDarkMode D
Dropdown Menu
Click-triggered menu attached to a button. Supports items, separators, labels, shortcuts, checkbox and radio items, and nested submenus.
Default
Trigger button + items with separators.
Checkbox items
Toggle persisted state inside a menu.
Radio items
One-of-many selection within a menu.
API Reference
Props, events, and slots for each sub-component.
DropdownMenu
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| open | boolean | — | Open state. Supports v-model:open. |
| modal | boolean | true | Trap focus and dim background when open. |
Events
| Event | Description |
|---|---|
| update:open | Fires when the menu opens or closes. Enables v-model:open. |
DropdownMenuTrigger
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| asChild | boolean | false | Merge props onto the child element instead of a button. |
DropdownMenuContent
Props
| 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. |
Events
| Event | Description |
|---|---|
| close-auto-focus | Fires when focus returns to the trigger after closing. |
DropdownMenuItem
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| disabled | boolean | false | Block selection. |
| inset | boolean | false | Extra left padding to align with icon items. |
Events
| Event | Description |
|---|---|
| select | Fires when the item is chosen. |
DropdownMenuCheckboxItem / DropdownMenuRadioItem
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. |
DropdownMenuSub / DropdownMenuSubTrigger / DropdownMenuSubContent
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| inset | boolean | false | (SubTrigger) Align with icon items. Submenu opens on hover or right-arrow. |
DropdownMenuLabel
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| inset | boolean | false | Align the section label with inset items. |
Accessibility
Keyboard shortcuts and ARIA behavior.
Keyboard
| 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.