Pull-down Buttons

A pull-down button pairs a trigger with DropdownMenu to reveal a list of actions on click. Use it to collapse several related actions behind one control. The menu supports labels, separators, grouped items, keyboard shortcuts, checkbox and radio items, destructive items, and nested submenus.

Live demo

The interactive story below runs from the deployed Storybook. Click the trigger to open the menu.

Usage

Source: dropdown-menu.tsx

import {
  DropdownMenu,
  DropdownMenuTrigger,
  DropdownMenuContent,
  DropdownMenuLabel,
  DropdownMenuItem,
  DropdownMenuSeparator,
  DropdownMenuShortcut,
  Button,
} from "@beacon/design-system";

<DropdownMenu>
  <DropdownMenuTrigger asChild>
    <Button variant="outline">Open Menu</Button>
  </DropdownMenuTrigger>
  <DropdownMenuContent className="w-56">
    <DropdownMenuLabel>My Account</DropdownMenuLabel>
    <DropdownMenuSeparator />
    <DropdownMenuItem>
      Profile
      <DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>
    </DropdownMenuItem>
    <DropdownMenuItem>Billing</DropdownMenuItem>
    <DropdownMenuSeparator />
    <DropdownMenuItem variant="destructive">Log out</DropdownMenuItem>
  </DropdownMenuContent>
</DropdownMenu>

Parts

Part	Role
`DropdownMenu`	Root state container.
`DropdownMenuTrigger`	The button that opens the menu (use `asChild` to wrap a `Button`).
`DropdownMenuContent`	The floating menu surface.
`DropdownMenuLabel`	Non-interactive section heading.
`DropdownMenuItem`	A selectable action. Pass `variant="destructive"` for dangerous actions.
`DropdownMenuCheckboxItem` / `DropdownMenuRadioItem`	Toggleable and single-select items.
`DropdownMenuSeparator`	Divider between groups.
`DropdownMenuShortcut`	Right-aligned keyboard hint.
`DropdownMenuSub*`	Nested submenu (`Sub`, `SubTrigger`, `SubContent`).

When to use

A single control that exposes several related actions (row actions, account menus, “more” overflow).
Action lists triggered by an explicit button click, not a right-click.

Do not use it for right-click / long-press surfaces; use a context menu instead. For an application-level menu bar (File, Edit, View), use the menu bar.