Dropdown Menu

Action menu — groups, sub-menu, destructive

The canonical dropdown shape: a DropdownMenuLabel heads the group, DropdownMenuSub nests related actions (Share → Copy/Email/Export), and the destructive item is placed last under a Separator. Use variant="destructive" on the item — it tints the label, icon, and hover/highlight background in one shot. Add DropdownMenuShortcut for keyboard hints (visual only — wire the keys with a global handler).

Checkbox + Radio items — stateful menus

Dropdowns can host persistent state, not just one-shot actions. DropdownMenuCheckboxItem is multi-select (visibility toggles), DropdownMenuRadioItem inside a DropdownMenuRadioGroup is single-select (sort order). Both render a 32px indicator column on the left and stay open across clicks so users can toggle several options without re-opening the menu.

Inset alignment — mixing indicator + icon-less rows

When a menu mixes CheckboxItem/ RadioItem (which reserve a 32px indicator column) with plain items that have no leading icon, the labels visually misalign. Pass inset on the plain items (and matching Labels) to push their text into the same column as the checked/radio content.