Navigation
The structure that tells people what exists and where they are, which is an information architecture problem before it is a layout one.
Definition
Navigation exposes a product's structure and the user's position within it. Its quality is determined mostly by the labels and the grouping, both of which come from research rather than from layout decisions.
Craft convention. True because the industry converged on it. Breaking it costs familiarity, not correctness.
On this page
Patterns and where they fit
| Pattern | Good for | Cost |
|---|---|---|
| Horizontal top nav | Five to seven top-level areas | Does not scale past about seven items. |
| Sidebar nav | Deeper hierarchies, application shells | Consumes horizontal space. |
| Bottom tab bar | Three to five primary areas on mobile | Hard cap on item count. |
| Mega menu | Large catalogues | Requires careful keyboard and touch handling. |
| Hub and spoke | Task-oriented mobile apps | Return trips to the hub between tasks. |
| Search-first | Very large content sets | Fails users who do not know the vocabulary. |
What actually makes navigation work
- Labels drawn from users' vocabulary, validated with tree testing rather than debated internally.
- A visible current location, marked with more than colour.
- Predictable behaviour: the logo returns home, back does what it should, links look like links.
- Breadcrumbs for hierarchies more than two levels deep.
- Full keyboard operability with a skip link to the main content.
- Persistent access to search for anyone who cannot find the label.
In practice
Hidden navigation on mobile
Responsive designCollapsing navigation into a hamburger reduces engagement with the items behind it. On mobile that is often an acceptable trade for screen space; on desktop it rarely is.
Continue from here
Each link says what the connection is, so you can tell a principle from an alternative from a thing people mix this up with.
Applies when you are designing
Principles behind this
The reasoning this solution is an application of.
- Fitts's LawLaw
- Hick's LawLaw
- Jakob's LawLaw
- Serial Position EffectLaw
First and last positions in a nav list are recalled better than the middle.
- Steering LawLaw
Often used with
These usually appear in the same screen or the same decision.
- BreadcrumbComponent
- Drawer and SheetComponent
- DropdownComponent
- LinkComponent
- MenuComponent
- TabsComponent
- Mobile Interaction PatternsPattern
- SearchPattern
Alternative approach
A different answer to the same problem, with a different cost.
- Command PalettePattern
A palette serves people who know what they want. Navigation serves people who do not yet.
Commonly confused with
Close enough to be mixed up, different enough to matter.
- Information ArchitectureResearch method
Architecture is the structure. Navigation is one view onto it, and a good menu cannot rescue a bad structure.
Short definition
The one-paragraph version, for when that is all you need.
Related concept
Connected closely enough to change how you apply this.
- Card SortingResearch method
- First-Click TestingResearch method
- Tree TestingResearch method