Dropdown
Usage
A menu of actions hung off a trigger. Use it to collapse a row of secondary actions into one control — the overflow menu on a table row, the account menu in a header. The reference catalogues fifteen dropdown variants covering direction and alignment; we expose `align` and let the two placements that matter cover the rest.import { Dropdown } from '@summonware/ui';Best practices
DoUse `align="end"` when the trigger sits near the right edge, so the menu opens inward.
DoSeparate destructive items with `separatorBefore` and mark them `tone: "danger"`.
Don'tPut the primary action inside a dropdown. If it matters, it should be a visible button.
Don'tUse a dropdown for choosing a value in a form. That is a Select.
Anatomy
Trigger *Any node. Usually a Button or an icon button.
Items *Actions, each with a label and either `onSelect` or `href`.
SeparatorRule above an item, via `separatorBefore`.
Examples
Common configurations, variations and states.Row actions
A destructive item separated from the rest — the standard overflow menu for a list or table row.
End aligned
Right-aligned for a trigger near the edge of its container, so the menu opens inward instead of off-screen.
Reference variants
3 of 15 labels from the reference are demonstrated above.Basic Dropdown ButtonMenu alignmentAlignment optionsSplit Dropdown ButtonBasic Outline Dropdown ButtonSplit Outline Dropdown ButtonDark dropdownsDroprightDropleftDropupResponsive alignmentTextFormsOffset & ReferenceAuto close behavior