Components

Dropdown menu

Radix-powered menu that opens from a trigger. Supports items, checkbox items, radio items, submenus, and shortcuts. The primitive used inside AccountMenu and any other custom dropdown.

Updated Jul 10, 2026 by Leonardo Posada

Variants

<DropdownMenu>
  <DropdownMenuTrigger asChild>
    <Button variant="outline">Actions</Button>
  </DropdownMenuTrigger>
  <DropdownMenuContent align="start">
    <DropdownMenuLabel>Account</DropdownMenuLabel>
    <DropdownMenuItem>Your profile</DropdownMenuItem>
    <DropdownMenuItem>Settings <DropdownMenuShortcut>⌘,</DropdownMenuShortcut></DropdownMenuItem>
    <DropdownMenuSeparator />
    <DropdownMenuItem>Log out</DropdownMenuItem>
  </DropdownMenuContent>
</DropdownMenu>

When to use

  • Anywhere the user needs a compact list of actions triggered by a button.
  • Multi-level menus (with submenus) for grouped actions.

When not to use

  • For a single action — use a Button.
  • For form fields — use Select.

Usage

Do
  • Group related items with DropdownMenuLabel section captions.
  • Use shortcuts sparingly and only for actions the user will repeat.
Don't
  • Don't nest more than one submenu — it becomes unreachable on touch.
  • Don't mix checkbox items and radio items in the same group.