Dropdown Menu

Use a dropdown menu for actions that belong to one control, such as work-order actions or account settings. Keep the trigger label clear and keep destructive actions separated from routine actions.

Density: comfortable; archived hidden

Show codeCopy

Import

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

Composition

DropdownMenu owns open state and keyboard navigation. Put the control inside DropdownMenuTrigger asChild to preserve its button semantics. Use DropdownMenuGroup, DropdownMenuLabel, and DropdownMenuSeparator to give long menus a readable structure. DropdownMenuCheckboxItem and DropdownMenuRadioGroup are controlled inputs; pass their current value and change handler when the menu state matters to the rest of the page.

DropdownMenuSub and DropdownMenuSubTrigger provide nested actions. Keep nesting shallow so keyboard users can understand where focus moved.

Accessibility

Use a real button or a component that renders one as the trigger, and provide an accessible name for icon-only triggers. Radix handles focus movement, Escape dismissal, and Arrow key navigation. Use variant="destructive" only for an action that can remove or irreversibly change data.

Best practices

• Put the most common action first and use DropdownMenuShortcut for discoverable keyboard commands.
• Use menu items for actions, not navigation that deserves a persistent link.
• Disable unavailable actions with disabled so users understand the option exists.
• Keep labels short and use a separator before destructive actions.