Dropdown Menu

PreviewCopy Anchor Link

Use a dropdown menu to put related actions behind one button. Labels and separators help people scan longer menus.

InstallationCopy Anchor Link

pnpm dlx shadcn@latest add https://migoy.stanleyaf.com/r/dropdown-menu.json

Uses Base UI, Lucide icons, the existing cn utility, and semantic theme tokens. The preview composes the separately installable Button using render.

UsageCopy Anchor Link

• Use DropdownMenuItem with onClick for commands and DropdownMenuLinkItem with href for navigation.
• Use checkbox items for independent options and a radio group for mutually exclusive options. Control them with checked and onCheckedChange, or value and onValueChange on the radio group.
• Use DropdownMenuGroup with DropdownMenuLabel for named sections. Use separators between sets of items.
• Content is portaled and positioned automatically. Set align, side, or sideOffset when needed.

CompositionCopy Anchor Link

DropdownMenu
├── DropdownMenuTrigger
└── DropdownMenuContent
    ├── DropdownMenuGroup
    │   ├── DropdownMenuLabel
    │   └── DropdownMenuItem
    │       └── DropdownMenuShortcut
    ├── DropdownMenuSeparator
    ├── DropdownMenuCheckboxItem
    ├── DropdownMenuRadioGroup
    │   └── DropdownMenuRadioItem
    └── DropdownMenuSub
        ├── DropdownMenuSubTrigger
        └── DropdownMenuSubContent
            └── DropdownMenuLinkItem

Start with a trigger, content, and one or more items. Add groups and separators when the menu has distinct sections. Checkbox items can stand on their own, while radio items belong inside a radio group. Each submenu pairs its own trigger with its own content. A shortcut hint goes inside the item it describes.

Icons and linksCopy Anchor Link

Pair familiar icons with visible labels. Use link items when the destination is a page.

SubmenusCopy Anchor Link

Use a submenu for a related set of secondary actions. Keep frequently used actions in the first menu.

ShortcutsCopy Anchor Link

Use DropdownMenuShortcut to show a key combination beside its action. The hints in this example are illustrative. Wire up the key combinations in your app and show the appropriate keys for the user's platform.

Checkbox itemsCopy Anchor Link

Use checkbox items when each option can change independently. These choices update the preview menu state.

Radio itemsCopy Anchor Link

Use a radio group when the options are mutually exclusive.

Destructive actionsCopy Anchor Link

Use the destructive variant for actions that remove data. Ask for confirmation when the action is hard to undo.

Keyboard and accessibilityCopy Anchor Link

Give the trigger a visible label or an accessible name. Open it with Enter or Space, move through items with the arrow keys, and press Enter to activate the focused item. Escape closes the current menu and returns focus to its trigger. Keep submenu labels specific so people can tell what they’ll find inside.

Based on shadcn Dropdown Menu and Base UI Menu.