On this page
Overview
Show code, AppFrame.tsx
Variants
Details beside the page
Side content that is not navigation goes in a supporting pane of Panes, in the body.
Show code, WithDetails.tsx
An installed app's window
An installed app that draws its own title bar runs it across the whole window, above the navigation.
- A Menubar goes at its start, where the app has one.
- Only the body scrolls below it, so the window's controls never cover a scrollbar.
Show code, InstalledWindow.tsx
Anatomy
Top bar
Search
Account menu
Navigation
Page header
Page
Show code, AppFrameAnatomy.tsx
The app frame is one Scaffold at the application's root, around the router's outlet.
- A TopBar holds the name, search and the account menu.
- The navigation sits beside the body.
- The page is in the body.
- The search opens a CommandPalette, not shown.
Behaviour
Adapting to width
The navigation takes the form the frame's width calls for: a bar on a phone, a rail on a tablet and a drawer on wider windows.
- With many destinations, or none with icons, a phone shows no bar.
- A menu button in the top bar then opens the same NavigationDrawer in a Sheet.
Show code, MenuOnPhones.tsx
Rules
Every destination has one place, the navigation, so people never look for it in two.
Use it when
- A handful of destinations, each with a page
- An installed app that draws its own title bar
Show code, DestinationsInNavigation.tsx
Show code, DestinationsInTopBar.tsx
Content
Name each destination with one or two nouns, the words of its page's title.
- In an installed app, title the bar as the window's title would read, the document's or the application's name.
- Order the menubar's menus as the platform does: File, Edit, View.
Accessibility
Focus and keyboard
After a destination opens its page, move focus to the body or the page's heading.