Page header
A page header is the top section of a page.
Install
One package and one stylesheet. The stylesheet holds the tokens every component uses.
pnpm add @wolf-rayet/reactimport '@wolf-rayet/react/css/wolf-rayet.css';
import { PageHeader } from '@wolf-rayet/react';Props
A required prop is marked with an asterisk.
| Prop | Type | Default | Description |
|---|---|---|---|
| children * | ReactNode | None | The page title. Every page header needs one. |
| breadcrumbs | ReactNode | None | The trail above the title, for a page inside a hierarchy. |
| actions | ReactNode | None | Actions for the whole page. Use one primary and keep the total small. |
| bottomBar | ReactNode | None | A row below the title for filters, tabs or a search field. |
Any other props are passed to the underlying element, so standard attributes and event handlers work as usual.
Accessibility
What the component does for you, and what it needs from you.
- The title is the page heading. Screen readers read it first, and people can jump to it with heading navigation.
- Breadcrumbs sit before the title in reading order, matching where they appear.
- Grouped actions have a group name, so screen readers announce them as a set.