PageHeader
A compact page heading with persistent breadcrumb, action, and tabs slots.@gemologic/sheen-patterns · applicationPlayground
This example has no scalar controls. Its validated source remains interactive below.
Orders
<PageHeader title="Orders" actions={<Button>Export orders</Button>} />Variant matrix
Page actions
Orders
Anatomy
- Package
@gemologic/sheen-patterns- Source
packages/patterns/src/PageHeader.tsx- Tokens
--sheen-space-inline-sm--sheen-space-block-xs--sheen-color-border
Accessibility
Role: group, headingKeyboard: Tab, Shift+TabDo
- Choose the heading level to match the document outline.
- Supply Breadcrumb and Tabs components in their named slots.
Do not
- Do not use this component to set document.title.
- Do not replace the header subtree during background refresh.
Generated props
| Name | Type | Default | Description |
|---|---|---|---|
title * | string | — | Required nonempty visible heading and accessible group name. |
headingLevel | 1 | 2 | 3 | 4 | 5 | 6 | undefined | — | Semantic heading level, independent of the compact visual size. Defaults to 1. |
breadcrumb | JSX.Element | — | Optional breadcrumb row above the title/action row. |
actions | JSX.Element | — | Persistent action controls beside the heading, wrapping when space is constrained. |
tabs | JSX.Element | — | Optional tabs row below the heading; tabs retain ownership of keyboard navigation. |