On this page
Overview
Show code, AppDestinations.tsx
NavigationRail: each destination an icon above a short label, for a tablet.
Show code, TabletDestinations.tsx
NavigationBar: three to five destinations along the bottom of a phone.
Show code, PhoneDestinations.tsx
Variants
Backgrounds
Each form is a plain rectangle along the window's edge. On a surface it takes that surface's color; a Sheet is on the navigation's own, so a drawer looks the same in one.
- Navigation
The navigation's own fill, shared with the top bar. The default.
- Page
The page's color, such as beside a top bar with a fill.
Without icons
A drawer's destinations can go without icons, such as the sections of a guide; the rail and the bar need them.
Show code, GuideSections.tsx
Anatomy
NavigationDrawer
Header
Item
Label
Count
Group
Heading
Footer
Show code, DrawerAnatomy.tsx
NavigationRail
Header
Item
Indicator
Count
Label
Footer
Show code, RailAnatomy.tsx
NavigationBar
Item
Indicator
Count
Label
Show code, BarAnatomy.tsx
Section
Item
Section button
Chevron
Nested destinations
Show code, SectionAnatomy.tsx
Behaviour
One list, three forms
NavigationDrawer, NavigationRail and NavigationBar take the same list of destinations, and Scaffold shows the one that fits its width.
- A group is a heading in the drawer only: the rail and the bar show its destinations one after another.
- Nested sections are the drawer's too: the rail and the bar show the top level, and mark the destination whose section holds the current page.
Show code, OneListThreeForms.tsx
Nested sections
A destination can hold others, such as the pages of a chapter: they sit under it, indented, in a section that opens and closes with its chevron.
- The section that holds the current page is open.
- A section without a page of its own is only a heading.
Show code, NestedSections.tsx
More than five
Past five destinations, the bar's fifth place is More, which opens the rest in a menu and takes the current fill when it holds the current page.
Show code, MoreDestinations.tsx
Resizable
People can resize the drawer by its end edge, with the same grip as between Panes.
- As it narrows, a label that no longer fits ends in an ellipsis and shows in full in a tooltip.
- A group heading cut short shows its full text on hover.
Show code, ResizableDrawer.tsx
Adapting to width
The bar's destinations share its width equally, and their labels stay on one line. A drawer or a rail in the sheet of a narrow window keeps its color, as a sheet is on the navigation's.
Show code, SharedWidth.tsx
Rules
Mark where people are, keep groups together, and keep labels short.
Use it when
- An application's main destinations, on a laptop or a wider window
- Many destinations, in groups under headings, with counts
- The sections of a guide or of the settings, beside their content
- A documentation site's pages, in sections that open and close
- The same destinations on a tablet, each an icon above a short labelNavigationRail
- Three to five destinations on a phone, along the bottom of the windowNavigationBar
The current destination
Mark the one destination people are on, from the address they are at.
Header and footer
The drawer's and the rail's header holds the application's name, search or the main action, and the footer the account, such as an AvatarButton.
Sections
Give a section a page of its own where it has an overview to show.
- Keep a group's destinations next to each other, under one heading.
- Keep to two levels, three at most: a deeper outline belongs on the page itself.
Labels
Keep labels to a word or two, so they fit on one line in the drawer and under their icons in the rail and the bar.
Its own background
Keep a resizable drawer on its own background, so its handle is the edge of a surface.
- Leave a drawer in a sheet of a narrow window at its own width.
Accessibility
| Key | Action |
|---|---|
| Tab, Shift+Tab | Moves to the next or previous destination or section button; each is a tab stop, and an open section's destinations follow its button. |
| Enter | Follows a link, or selects a destination that is a button; opens More; opens or closes a section on its button. |
| Space | Selects a destination that is a button; opens More; opens or closes a section on its button. |
| ↑, ↓ in More's menu | Move between the destinations in the menu. |
| Esc in More's menu | Closes the menu and returns focus to More. |
| ←, → on the resize handle | Narrows or widens a resizable drawer a step; with Shift, more. |
| Home, End on the handle | Resizes it to its smallest or largest width. |