Menu
A list of options to help users navigate or perform actions.
When to use
- A list of actions or destinations shown in a surface, such as inside a popup or a dropdown.
- More choices than fit as buttons, where a menu keeps them out of the way until asked for.
- Related items that group naturally under headings.
When not to use
- One or two actions. Those belong as buttons, where they can be seen.
- Choosing a value in a form. That is a select.
- Primary navigation, which should be visible rather than hidden behind a trigger.
- A long unordered list. A menu is not a substitute for search.
Guidance
Do
Group items under a heading that says what the group does, so the items themselves can stay short.
Don't
Do not repeat the same words in every item. The shared part belongs in a section heading where it is read once.
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 |
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 an action item with a verb. Move, Archive, Assign.
- A destination item is a noun, because it is a place.
- Put the shared words in the section heading rather than in every item.
- Mark an item that opens a dialog with an ellipsis, so the reader knows it is not the end of the action.