Theme
Top bar
The bar across the top of a page: breadcrumbs ending in the page's title, view controls, and the page's action. It stays put while the page scrolls under it.
Examples
Props
TopBar
The bar across the top of a page in the app shell: where the page is, how it is shown and what can be done there. It stays put while the page scrolls under it. On phones it leads with the button that opens the navigation drawer, so every page starts with one.
| Prop | Type | Default | Description |
|---|---|---|---|
breadcrumbs? | readonly Crumb[] | — | From the app's root to this page, whose title is the last crumb. |
linkAs? | ElementType | — | The link component for the breadcrumbs: a framework's client-side link. |
views? | ReactNode | — | Controls for how the page shows its content: filter, sort, view. Quiet small buttons. |
actions? | ReactNode | — | What can be done on the page, at the end: one primary action at most. |
Keyboard
| Key | Does |
|---|---|
| Tab | Moves through the menu button (on phones), the breadcrumbs and the controls |
Accessibility
- The breadcrumbs are a navigation landmark; the last crumb is the current page and not a link.
- Inside an AppShell, on phones, it leads with the button that opens the navigation drawer, which reports aria-expanded.
- It wraps onto a second line rather than scrolling sideways at 200% zoom.