Support the page structure
At the top of internal-tool pages and content pages alike
Templates
Page header
Page-leading headers with title, description, optional breadcrumb, and primary action.
Keep the layout consistent
To anchor a page with title, description, and primary actions
Use it intentionally
On marketing pages — use the hero block instead for stronger visual impact
Default
Page header with title, description, and right-aligned action.
With breadcrumb
Page header with a breadcrumb above the title for hierarchical context.
When to use
- At the top of internal-tool pages and content pages alike
- To anchor a page with title, description, and primary actions
- When users need breadcrumb context to navigate back up the hierarchy
When not to use
- On marketing pages — use the hero block instead for stronger visual impact
- Inside modal dialogs — use the modal's own title slot
Keyboard support
Use the SGDS components inside the page header pattern so keyboard behaviour stays predictable.
Check focus order and action placement in the surrounding page context, especially when the pattern groups multiple interactive elements together.
Tab order
- Move focus into the pattern.
- Navigate through interactive elements in visual order.
- Confirm any revealed or supporting content remains reachable.
- Continue to the next interactive element on the page.
TabShift+TabEnterSpaceHave suggestions or feedback?
Share them with us on Slack → #ask-sgds-v3
Found a bug or issue?
Report it on GitHub Issues → sgds/templates/page-header