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.

Usage

Import the parts you need from the component's folder.

import {
  DropdownMenu,
  DropdownMenuTrigger,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuLabel,
  DropdownMenuSeparator,
  DropdownMenuShortcut,
  DropdownMenuGroup,
  DropdownMenuCheckboxItem,
  DropdownMenuRadioGroup,
  DropdownMenuRadioItem,
  DropdownMenuSub,
  DropdownMenuSubTrigger,
  DropdownMenuSubContent,
  DropdownMenuPortal,
} from "@/components/ui/dropdown-menu";

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.

Drawer Hover Card