Dropdown menu
A dropdown menu displays a list of actions or options to a user.
When to use
- Several actions on one thing, more than will fit as buttons.
- A set of choices behind a single control, such as the actions on a row.
- Anywhere the actions are secondary and should stay out of the way until asked for.
When not to use
- One or two actions, which belong as visible buttons.
- Choosing a value in a form. That is a select.
- Primary navigation, which should be visible.
- A long list, which needs search rather than scrolling inside a menu.
Guidance
Do
Group items under headings when there are more than a few, so the reader can find the group before the item.
Don't
Do not interleave unrelated items. Assigning and moving are two jobs, and mixed together neither can be scanned.
Intensity
What each of this component's grounds spends, measured against the ladder in both themes.
| Appearance | Ground | Light | Dark |
|---|---|---|---|
| menu | selected | 0.042Ambient | 0.062Substrate |
| popup | surface-overlay | 0.000Substrate | 0.070Ambient |
Substrate, Ambient and Marked are measured. Directed depends on what else is in the region, and Demanded is declared and rationed, so neither is a property this component carries by itself. See intensity.
Content
What to write, and what to leave out.
- Start action items with a verb.
- Group related items and name the group, rather than repeating the shared word in each item.
- Put the common actions first, not in the order they were built.