Components / Dropdown Menu

Dropdown Menu

A list of actions behind one trigger: row actions on a table, the overflow menu on a card, account switching. Menus hold actions; picking a value for a form field is a Select or Combobox.

import { DropdownMenu, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger } from '@layers/ui/dropdown-menu'

Rendered stock

House rules

• DropdownMenuLabel is Base UI Menu.GroupLabel: it must sit inside a DropdownMenuGroup or DropdownMenuRadioGroup, or the menu throws at runtime. A label above a radio group wraps both in one DropdownMenuGroup.
• Triggers attach via render={<Button />}; there is no asChild in the Base UI wrappers.
• The menu auto-sizes to its widest item with an 8rem floor. Width-to-trigger is the Select convention, not the DropdownMenu one; menus that need a fixed width set it per usage.
• Destructive items use variant="destructive", sit last, and are set off with a DropdownMenuSeparator.
• Item labels are short verbs: Rename, Duplicate, Delete. No icon+text buttons as triggers; text-only or icon-only with an aria-label.
• The menu anchors to its trigger's side: a left-side trigger opens align="start", a right-side one align="end" — never hanging off the control toward the empty side.