On this page
Overview
Show code, NavigationForms.tsx
Variants
The navigation for each width
Scaffold shows the navigation that fits its own width: the bar on a phone, the rail on a tablet and the drawer on wider windows.
- The application can choose another form for a width, or none, such as on a phone where the top bar opens the navigation.
- Where it asks for a form it didn't give, the nearest one shows.
A drawer only, and none on a phone.
Show code, ChooseForms.tsx
Narrowing the navigation
A button can narrow the navigation to a strip of icons by asking for the rail in place of the drawer, and the application keeps the choice.
- Don't build a narrow drawer of your own: the Scaffold already has both forms.
Show code, NarrowNavigation.tsx
A title bar across
The top bar can run across the whole width, above the rail or the drawer, as a window's title bar needs.
Show code, TitleBarAcross.tsx
Backgrounds
The navigation and the top bar share one fill, flush with the window's edges and the body, with no line between them.
- Either can sit on the page's background instead, such as a top bar beside a drawer.
Show code, TopBarOnThePage.tsx
Anatomy
Root
Top bar
Navigation
Body
Show code, ScaffoldAnatomy.tsx
Behaviour
Scrolling
The bars stay in view as the page scrolls.
Adapting to width
The Scaffold follows its own width, not the window's.
- Focus in a navigation that hides moves to the one that shows.
Show code, FormsByWidth.tsx
Rules
Scaffold paints nothing itself: what goes in its top bar, its navigation and its body does.
Use it when
- An application's screen, with a top bar, its navigation and the page
- A window without navigation, such as a start page, under its title bar
Accessibility
| Key | Action |
|---|---|
| Tab on a fresh page | Shows Skip to content, then Skip to navigation. |
| Enter on a skip link | Moves focus to the body, or to the navigation form that shows. |
| Page Up, Page Down, Space | Scroll the page, or the body where it scrolls alone, also with focus on the document. |
| Home, End, ↑, ↓ | The same, unless a field or a widget that uses the key has focus. |