Back to Design System

Dropdown Menu

Contextual action sheet that anchors to a trigger. Radix Dropdown Menu handles focus loops, keyboard navigation, and typeahead for long lists.

Overview

Use for

  • Overflow actions on cards or tables.
  • Filter menus with checkbox or radio selections.
  • Nesting additional options in submenus.

Avoid for

  • Primary navigation—use the sidebar, top nav, or tabs.
  • Bulk destructive actions (prefer dialogs for confirmation).
  • Large forms; dropdown menus should remain lightweight.

Examples

Card actions

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

export function ActionsMenu() {
  return (
    <DropdownMenu>
      <DropdownMenuTrigger asChild>
        <Button variant="outline">Actions</Button>
      </DropdownMenuTrigger>
      <DropdownMenuContent className="w-56">
        <DropdownMenuLabel>Account</DropdownMenuLabel>
        <DropdownMenuSeparator />
        <DropdownMenuItem>
          Profile
          <DropdownMenuShortcut>⌘P</DropdownMenuShortcut>
        </DropdownMenuItem>
        <DropdownMenuItem>
          Billing
          <DropdownMenuShortcut>⌘B</DropdownMenuShortcut>
        </DropdownMenuItem>
        <DropdownMenuSeparator />
        <DropdownMenuItem>Log out</DropdownMenuItem>
      </DropdownMenuContent>
    </DropdownMenu>
  )
}

Checkbox filter menu

import {
  DropdownMenu,
  DropdownMenuTrigger,
  DropdownMenuContent,
  DropdownMenuLabel,
  DropdownMenuCheckboxItem,
  DropdownMenuSeparator,
} from "@/components/ui/dropdown-menu"

export function ViewMenu() {
  return (
    <DropdownMenu>
      <DropdownMenuTrigger asChild>
        <Button variant="ghost">View</Button>
      </DropdownMenuTrigger>
      <DropdownMenuContent className="w-52">
        <DropdownMenuLabel>Columns</DropdownMenuLabel>
        <DropdownMenuSeparator />
        <DropdownMenuCheckboxItem checked>Dimensions</DropdownMenuCheckboxItem>
        <DropdownMenuCheckboxItem checked>Metrics</DropdownMenuCheckboxItem>
        <DropdownMenuCheckboxItem>Annotations</DropdownMenuCheckboxItem>
      </DropdownMenuContent>
    </DropdownMenu>
  )
}

Submenus & radio groups

Props

PropTypeDefaultDescription
modalbooleanfalseRadix prop—non-modal menus allow interaction with background elements.
side'top' | 'bottom' | 'left' | 'right''bottom'Preferred side for the menu positioning.
sideOffsetnumber4Gap between trigger and content.

Accessibility

Keyboard

  • Enter or Space opens the menu.
  • Arrow keys move between items; typeahead jumps to matching labels.
  • Esc closes and returns focus to trigger.

Best practices

  • Keep labels short and affordances obvious — include icons sparingly.
  • Group destructive actions at bottom and separate with a separator.
  • For layout-altering toggles, reflect state via `checked` checkbox items.