Skip to content
Aback UI

Overlays

Dropdown Menu

A keyboard-navigable action menu with checkbox and radio items.

StableUsed in Aback Launch, Aback GroupRegistry JSON (opens in a new tab)

Installation

Copy the source with the CLI to own and edit it, or import it from the npm package.

npx aback-ui@latest add dropdown-menu

Writes components/ui/dropdown-menu.tsx. First time in this project? Run npx aback-ui@latest init first, as the installation guide shows.

Usage

Import the parts you need from the installed file. The Code tab above has a complete, working example.

tsx
import {
  DropdownMenu,
  DropdownMenuTrigger,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuCheckboxItem,
  DropdownMenuRadioItem,
  DropdownMenuLabel,
  DropdownMenuSeparator,
  DropdownMenuShortcut,
  DropdownMenuGroup,
  DropdownMenuPortal,
  DropdownMenuSub,
  DropdownMenuSubContent,
  DropdownMenuSubTrigger,
  DropdownMenuRadioGroup,
} from "@/components/ui/dropdown-menu";

API reference

Props and composition points for Dropdown Menu. Native element props pass through.

PropTypeDefaultDescription
open / defaultOpen / onOpenChangeboolean / boolean / (open: boolean) => voidNoneControlled or uncontrolled visibility.
DropdownMenuContent align"start" | "center" | "end""center"Alignment relative to the trigger.
DropdownMenuItem variant"default" | "destructive""default"Destructive items are separated and styled as danger.
DropdownMenuCheckboxItem / RadioItemcomponentNoneStateful items with an indicator and managed selection.

Dependencies: radix-ui, @tabler/icons-react, plus the shared @/lib/utils helper.

Accessibility

Semantics, keyboard behavior, and the decisions that keep the component operable.

  • Uses menu semantics, not a listbox or navigation. Use it for actions, not for page links.
  • Arrow keys move between items, Home and End jump, typeahead selects by label, Escape closes and returns focus.
  • Keep a destructive action behind a separator and a clear verb. Never make it the default item.
  • The trigger must have an accessible name; icon-only triggers need an aria-label.

Keyboard

KeyAction
EnterorSpaceorArrowDownOpen the menu and focus the first item.
ArrowUporArrowDownMove focus between items.
HomeorEndJump to the first or last item.
EscapeClose the menu and return focus to the trigger.

Used in production

The Aback products whose interfaces shaped this component.

Related