Dropdown menu
A dropdown menu shows a list of actions or options.
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.
- Secondary actions that should stay hidden until someone needs them.
When not to use
- One or two actions. Show them as buttons.
- Choosing a value in a form. Use a select.
- Primary navigation. Keep it visible.
- A long list. People need to search it, not scroll inside a menu.
Guidance
Do
When there are more than a few items, group them under headings. People can find the right group first, then the item.
Don't
Do not mix unrelated items. Assigning and moving are different tasks, and mixing them makes the menu hard to scan.
Intensity
How much attention each of this component's grounds uses, scored 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. Demanded is declared, and its use is limited. So neither of those two depends on the component alone. See intensity.
Content
What to write, and what to leave out.
- Start action items with a verb.
- Group related items and name the group, instead of repeating the same word in every item.
- Put the most common actions first.