Navigation system
The navigation system for apps.
When to use
- The main navigation of an app with enough places to need grouping.
- Navigation that should stay visible while the reader works, rather than be opened each time.
When not to use
- Moving between views of one page. That is tabs.
- A handful of destinations, which fit in a top bar.
- Actions. Navigation goes places, and a control that does something belongs on the page.
Guidance
Do
Group destinations under headings that say what the group is for, and mark where the reader is.
Don't
Do not mix an action into navigation, and do not leave the current place unmarked. The reader loses track of where they are.
Intensity
What each of this component's grounds spends, measured against the ladder in both themes.
| Appearance | Ground | Light | Dark |
|---|---|---|---|
| side-nav | selected | 0.042Ambient | 0.062Substrate |
| side-nav | surface | 0.000Substrate | 0.000Substrate |
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.
- Nouns for destinations, because each one is a place.
- Short enough not to wrap at the panel width.
- Group headings name the area, not the items under them.