Dropdown Menu

A list of secondary actions and view options gathered behind one trigger, so a toolbar can stay short without hiding anything the user needs.

import from ~/components/ui/dropdown-menu

grouped menu

A label names the group, a separator chunks the list, and the destructive action sits last and alone, marked by its variant.

Density: compact · Drafts: hidden

DropdownMenuCheckboxItem

For view options that stay toggled between openings. Each item owns its checked state, and the menu stays open while you flip them.

align

Align the panel to the edge of the trigger it belongs to. An account menu on the right of a header aligns end so it does not run off the page.

Use it for secondary actions on an object. The primary action stays visible as a button.

Chunk a long menu with a label and separators, and keep the destructive item last.

Mark a delete with variant="destructive". The variant is what states the intent, and it colours the label, the icon and the focus state together.

Give the trigger a real name. "Endeavor" and a chevron beats a bare set of dots.

Escape closes the menu and focus returns to the trigger. Arrow keys move between items.

Don't

Do not hide the one action the page exists for behind a menu.

Do not open a menu on hover. It opens on click, and that is the whole contract.

Do not put a form inside a menu. A menu is a list of choices; use a Popover or a Dialog.

Do not color an item by hand to make it destructive. The variant exists, and a text-destructive class at the call site only fakes half of it.