DropdownMenu

A menu that opens on click, displaying a list of actions or navigation options. Closes on selection or clicking outside. Built on @base-ui/react/menu with full keyboard navigation and ARIA menu role.

Anatomy

<DropdownMenu> is the stateful root. DropdownMenuTrigger is the element that opens it. DropdownMenuContent renders in a portal. Inside, use DropdownMenuItem for actions, DropdownMenuLabel for group headings, DropdownMenuSeparator for visual dividers, and DropdownMenuShortcut for keyboard hints.

DropdownMenuTriggerDropdownMenuLabel + DropdownMenuSeparatorDropdownMenuItem with icon

Examples

With shortcuts

Icon trigger (more actions)

Account menu

Design Guidelines

Do

  • Group related actions with separators. Use DropdownMenuSeparator to cluster actions by category — destructive items should always be in their own group at the bottom.
  • Use icons consistently. Either all items have icons or none do — mixing creates visual imbalance.
  • Style destructive items visibly. Apply text-destructive to delete/remove actions so users notice the risk before clicking.

Don't

  • Don't overload with items. A dropdown with 15+ items is hard to scan. Split into sub-menus or reconsider the information architecture.
  • Don't use for primary actions. If an action is the most important thing a user can do, give it a dedicated Button — don't hide it in a dropdown.
  • Don't nest menus more than one level. Sub-menus add cognitive load. Prefer flat lists or separate pages for deeply nested actions.

Developer Reference

Accessibility

  • DropdownMenuContent has role="menu"; each DropdownMenuItem has role="menuitem".
  • Arrow keys move focus between items. Enter / Space activate the focused item. ESC closes the menu and returns focus to the trigger.
  • The menu renders in a portal so it is always above other content, but remains in the accessible DOM tree.
  • DropdownMenuTrigger accepts a render prop — pass any element (e.g. Button) to use as the trigger without an extra wrapper.
  • align prop on DropdownMenuContent controls horizontal alignment: "start" | "center" | "end".

Usage

import {
  DropdownMenu,
  DropdownMenuTrigger,
  DropdownMenuContent,
  DropdownMenuGroup,
  DropdownMenuItem,
  DropdownMenuLabel,
  DropdownMenuSeparator,
  DropdownMenuShortcut,
} from "@/components/ui/dropdown-menu"
import { Button } from "@/components/ui/button"

<DropdownMenu>
  <DropdownMenuTrigger render={<Button variant="outline" />}>
    Open Menu
  </DropdownMenuTrigger>
  <DropdownMenuContent>
    <DropdownMenuGroup>
      <DropdownMenuLabel>My Account</DropdownMenuLabel>
      <DropdownMenuItem>Profile</DropdownMenuItem>
      <DropdownMenuItem>
        Settings
        <DropdownMenuShortcut>⌘,</DropdownMenuShortcut>
      </DropdownMenuItem>
    </DropdownMenuGroup>
    <DropdownMenuSeparator />
    <DropdownMenuItem className="text-destructive focus:text-destructive">
      Delete
    </DropdownMenuItem>
  </DropdownMenuContent>
</DropdownMenu>

// Right-aligned content
<DropdownMenuContent align="end">...</DropdownMenuContent>