A dropdown presents a compact list for choosing one option or executing related actions. This page covers
selection pickers (native select) and action menus (custom menu panels).
When to use
Choosing one value from a predefined set (type, category, sort order).
Grouping secondary actions under a trigger (Export, Share, More).
Space-constrained toolbars where a full button row would not fit.
When not to use
Two to five equally important options — use visible Buttons or radio groups.
Multi-select of many items — consider a list with checkboxes.
Navigation to a new page — use Hyperlinks or navbar items.
Variants
Variant
Usage
Selection dropdown
Single value from a fixed list; use native <select> in forms when possible
Action menu
Commands or navigation; group with dividers, sentence case labels
Multi-level menu
Deep hierarchies; prefer flattening or search for more than two levels
Example — selection
Example — action menu
Light mode
Dark mode
Accessibility
Menus open on click (or Enter/Space on trigger); close on Escape or outside click.
Arrow keys move between items; typeahead jumps to matching labels.
Associate labels with selection controls; use role="menu" / menuitem for action menus.
Do not rely on hover alone to open menus — it fails touch and keyboard users.