Skip to content
Nexus Application Design nadesign

DropdownMenu

<DropdownMenu> is the action menu — an anchored list of items the user picks from. Items can be plain actions, checkbox toggles, radio selections, or nested sub-menus.

import from "@na/ui/components/dropdown-menu" ▶ Open in Storybook packages/ui/src/components/dropdown-menu.tsx

When to use

  • Row-action ”⋯” menus on list / table rows.
  • Per-entity menus (Edit / Duplicate / Delete).
  • Filter / sort menus on list pages.

Don’t use DropdownMenu for: navigation between pages (use real <a> links), command palettes (CommandPalette — planned), or pickers from a long static list (Select / Combobox).

Basic

<DropdownMenu>
  <DropdownMenuTrigger asChild>
    <Button variant="outline" size="sm">Actions</Button>
  </DropdownMenuTrigger>
  <DropdownMenuContent>
    <DropdownMenuLabel>Agent</DropdownMenuLabel>
    <DropdownMenuItem>Edit <DropdownMenuShortcut>⌘E</DropdownMenuShortcut></DropdownMenuItem>
    <DropdownMenuSub>
      <DropdownMenuSubTrigger>Move to…</DropdownMenuSubTrigger>
      <DropdownMenuSubContent>
        <DropdownMenuItem>Inbox</DropdownMenuItem>
      </DropdownMenuSubContent>
    </DropdownMenuSub>
    <DropdownMenuSeparator />
    <DropdownMenuItem className="text-destructive">Delete</DropdownMenuItem>
  </DropdownMenuContent>
</DropdownMenu>

With checkboxes

<DropdownMenuCheckboxItem checked={show.unread} onCheckedChange={…}>
  Unread
</DropdownMenuCheckboxItem>

With radios

<DropdownMenuRadioGroup value={sort} onValueChange={setSort}>
  <DropdownMenuRadioItem value="recent">Most recent</DropdownMenuRadioItem>
  <DropdownMenuRadioItem value="name">Name</DropdownMenuRadioItem>
</DropdownMenuRadioGroup>

Anatomy

  • DropdownMenu (root)
  • DropdownMenuTrigger
  • DropdownMenuContent
    • DropdownMenuLabel — non-clickable section header
    • DropdownMenuItem — action
    • DropdownMenuShortcut — right-aligned keyboard hint
    • DropdownMenuCheckboxItem — toggleable
    • DropdownMenuRadioGroup + DropdownMenuRadioItem — single-select group
    • DropdownMenuSub + DropdownMenuSubTrigger + DropdownMenuSubContent — nested menu
    • DropdownMenuSeparator — between groups

Design guidelines

✓ Do

  • Group items by purpose with a Separator. Two clicks shouldn't find unrelated actions.
  • Pair every shortcut hint (⌘E) with a real keybinding. Hints without bindings are noise.
  • Use DropdownMenuLabel for section headers — it doesn't look clickable, which is correct.

✗ Don't

  • Use DropdownMenu as a Select. They look similar but the keyboard contract is different.
  • Nest sub-menus more than one level deep. Mouse navigation breaks down quickly.
  • Place the destructive option as the first item. Last + visually destructive is correct.

Accessibility

  • Composes Radix DropdownMenu — role="menu", items role="menuitem", sub-menus accessible via arrow keys.
  • Type-ahead works (start typing to focus matching item).
  • Esc closes; arrow keys navigate; Enter activates.

▶ Open DropdownMenu stories in Storybook