Page headerpattern
Breadcrumb, title, context and the page's actions.
Patterns- Built from
- Button · Badge · Text
- Guidance
- draft · v0.1.0
Examples
Copy the code into a product and change the content – the layout and tokens carry over.
Into Games
In review8 screens · 12 open comments · due Friday
Guidance
When to use
- At the top of every page inside the app shell.
Rules
- The breadcrumb shows where the page sits; the last item is the current page, not a link.
- One
h1: the page's name. A status badge can sit beside it. - One line of context under the title – counts, dates, owner.
- Actions on the right on wide screens, under the title on narrow ones. The primary action is last and the only default button.