Patterns1 of 4
Navigation
How a site is organized, what "home" and "back" mean, and how both work on a phone. This guide follows the same rules as every app.
How a site is organized
Three levels, each in one place, the same on every page:
| Level | Where | In this guide |
|---|---|---|
| Areas | The top bar, after the app's name. The same list on every page; the current area underlined. | Overview, Foundations, Components, Patterns, Content, Decisions |
| Pages | A list down the left, from 960 px; above the page on anything narrower. The current page marked with a rule. | Navigation, Contexts, Slideshow, Print and the books |
| Sections | "On this page", down the right, from 1280 px. The section in view marked as you scroll. | How a site is organized, What home and back mean, On a phone |
Previous and next at the foot of each page walk every page in order, across areas, each naming where it goes. A small app with one area drops the first level; a single page keeps only its sections.
A level is never borrowed for another job: the top bar never lists a page's sections, and the left list never lists another area's pages.
On a phone
- The mark stands for the name; the areas take a row of their own under it.
- The area's pages sit above the page as a row of links; "On this page" is left out, since the page is one column.
- Previous and next carry the reader through; "‹ Guides" goes up a level where an app needs it.
- Targets are at least 44 px; nothing works only on hover; a sideways swipe moves a slide.