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, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger } from '@layers/ui/dropdown-menu'

Rendered stock

House rules

• 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.