Dropdown Menu

Powered by

Base UIShadcn UIAnimate UILucideMotion

Installation

When to use

Use this decision tree to determine when to use the Dropdown Menu component:

Usage

<DropdownMenu>
  <DropdownMenuTrigger>Open Dropdown Menu</DropdownMenuTrigger>
  <DropdownMenuContent>
    <DropdownMenuItem>Item 1</DropdownMenuItem>
    <DropdownMenuItem>Item 2</DropdownMenuItem>
    <DropdownMenuItem>Item 3</DropdownMenuItem>
  </DropdownMenuContent>
</DropdownMenu>

Examples

Checkboxes

Radio Group

Submenu

Labeled sections

Keyboard shortcuts

Link items

Open a Dialog from an item

Polymorphic link trigger

Avatar user menu

Animated viewport

Open on hover

Props

Animate UI Props

DropdownMenu

DropdownMenuSubTrigger

DropdownMenuContent

DropdownMenuItem

DropdownMenuLabel

Keyboard interactions

Accessibility

• DropdownMenuTrigger exposes aria-haspopup="menu" and aria-expanded; the menu itself is role="menu" with role="menuitem" / menuitemcheckbox / menuitemradio on its children.
• Focus is fully roving inside the menu — no tabIndex={0} needed on items.
• Destructive items should set variant="destructive" (visual) and, if the action is irreversible, open an AlertDialog for confirmation rather than firing immediately.
• The trigger must be a button (or another interactive element via asChild); static <div> triggers lose keyboard activation.

Controlled vs uncontrolled

Uncontrolled — typical case:

<DropdownMenu>
  <DropdownMenuTrigger asChild><Button onClick={() => undefined}>Actions</Button></DropdownMenuTrigger>
  <DropdownMenuContent>
    <DropdownMenuItem onClick={onEdit}>Edit</DropdownMenuItem>
    <DropdownMenuItem onClick={onDelete}>Delete</DropdownMenuItem>
  </DropdownMenuContent>
</DropdownMenu>

Controlled — drive open from parent state (e.g. to open programmatically from a keyboard shortcut):

const [open, setOpen] = useState(false);

<DropdownMenu open={open} onOpenChange={setOpen}>
  <DropdownMenuTrigger asChild><Button onClick={() => undefined}>Actions</Button></DropdownMenuTrigger>
  <DropdownMenuContent>{/* ... */}</DropdownMenuContent>
</DropdownMenu>

Credits

• We use Base UI for the dropdown menu component.
• We take our inspiration from Shadcn UI for the dropdown menu style.
• We use Animate UI from imskyleen for all the animations.