On this page
Overview
Show code, PrimaryNavigation.tsx
Variants
Hierarchy
The trail shows the levels above the page, each a link; the page itself is the last level and no link.
Show code, Hierarchy.tsx
Views of one thing
Tabs switch the views of one project in place. Its settings are another page, so they are a link in the header's actions.
Show code, ViewsOfOneThing.tsx
List and detail
As narrow as a phone, the detail shows in place of the list, with a back button that names where it goes.
Show code, ListAndDetail.tsx
Anatomy
Primary navigation
Quick open
Trail
Views
Show code, NavigationAnatomy.tsx
Behaviour
Changing the page
After the router shows the new page, the window's title names it, such as "Projects – Northwind". Every place has an address of its own, opened by the application's router.
Rules
The primary navigation marks the current page, a trail leads back up from deep pages, and a search opens anything by name.
Use it when
- Several places people move between
- Showing where people are and the way back up
Built from
Scaffold, TopBar, NavigationDrawer, Breadcrumbs, Page, Tabs, Pager, Button, Tooltip, CommandPalette, Panes, Surface, Link, List, DescriptionList, Badge
Which to use
Each kind of navigation answers its own need, and a page can use several.
- Destinations
The places of the application: one list, which the Scaffold shows as a bar, a rail or a drawer.
- Breadcrumbs
A page two or more levels down, on one line in its PageHeader.
- Tabs
Views of the object a page is about, under its header.
- Pager
Pages read in order, at the end of the content.
- Command palette
Opening anything by name, as CommandPalette shows.
- List and detail
A list whose items open beside it, in Panes.
Show code, TabsForViews.tsx
Show code, TabsForPlaces.tsx
One primary navigation
One primary navigation, in the same order on every page, and never hidden behind a menu on a wide window.
Pages below a place
On a page below a place, such as one project, keep the place current and let the trail say the rest.
Content
Name each place with a short noun, the word of its page's title.
- Name the navigation after its role, "Main", rather than its look.
- Name a link after its destination: "Project settings", not "More".
Accessibility
Focus and keyboard
After a page opens, from a destination, a trail level or a search result, focus moves to its body or heading, so a screen reader reads it from the start. Tabs are one tab stop whose arrow keys move between them.