Component

Dropdown Menu

A menu of actions or options that opens from a trigger button, built on the Base UI Menu primitive with full keyboard support.

Installation

Install from the live registry into any shadcn-initialized app (another project). Prefer installing ag-globals first so AG tokens and fonts are present.

npx shadcn@latest add https://design.ag.org/r/dropdown-menu

Usage

Use a Dropdown Menu to group secondary actions behind a single trigger. For a primary set of always-visible tabs or links, use Tabs or the nav components instead.

Composition

button

Playground

Preview

Configure

Trigger label

Text shown on the trigger button.

Code

<DropdownMenu>
  <DropdownMenuTrigger render={<Button variant="outline" size="sm" />}>Open menu</DropdownMenuTrigger>
  <DropdownMenuContent>
    <DropdownMenuLabel>My Account</DropdownMenuLabel>
    <DropdownMenuSeparator />
    <DropdownMenuItem>Profile</DropdownMenuItem>
    <DropdownMenuItem>Settings</DropdownMenuItem>
    <DropdownMenuItem>Team</DropdownMenuItem>
    <DropdownMenuSeparator />
    <DropdownMenuItem>Log out</DropdownMenuItem>
  </DropdownMenuContent>
</DropdownMenu>

Do

Group related actions and separate destructive ones with a separator
Use DropdownMenuLabel to title a section of items
Keep menus shallow, one level of items is easiest to scan

Don't

Don't put primary page actions inside a dropdown, keep them visible
Don't nest dropdowns more than one level deep
Don't use a dropdown menu as a select input, use Select