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

Item types

Checkboxes

Radio group

Link items

Keyboard shortcuts

Composition

Submenus

Labeled sections

Triggers

Polymorphic link trigger

Avatar user menu

Opening dialogs from menu items

A menu item that opens a Dialog, AlertDialog, or Sheet is a common pattern but a nuanced composition. The recommended shape: render the dialog as a sibling of DropdownMenu and share open state via consumer state. Avoid rendering the dialog as a descendant of DropdownMenuContent — the menu's portal unmounts on close and tears the dialog down before it reaches a stable open state.

The demo below contrasts three variants on the same page:

1. Broken — dialog as a descendant. Click does nothing.
2. Workaround — <DropdownMenuContent keepMounted> keeps the menu's subtree alive across close cycles. Works, but every menu's content stays in the DOM for the lifetime of its parent — avoid on tables with many rows.
3. Recommended — dialog as sibling, opened from the menu item's onSelect via setOpen(true). No DOM multiplication, no asChild plumbing, generalizes to Sheet, Drawer, Popover, and any other portaled component.

Animation

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.