The page header component displays a page header section with a title, subtitle and other optional content.
Examples
Basic page header
In order to display a basic page header, pass the title and subtitle.
My Title
This is a subtitle for your page header
Page header with breadcrumbs
You can display breadcrumbs above the title using the breadcrumbs property.
Page header with icon
Use the icon property to display your custom page icon separated with a divider.
My Title
This is a subtitle for your page header
Page header with label and link
To add specific element captions for user clarity and convenience, you can use the label property together with label or your custom component. The linkProps can be used to define a link displayed under the subtitle.
Page header with actions menu
In case you want to display actions in your header, you can use the actionsMenu property.
Props
PageHeader
| Name | Type | Default | Description |
|---|---|---|---|
| subtitlerequired | string | Subtitle for page header | |
| titlerequired | string | Title for page header | |
| actionMenu | React.ReactNode | Menu that appears to the far right of the title | |
| breadcrumbs | React.ReactNode | null | Breadcrumbs component |
| children | React.ReactNode | null | Child nodes |
| icon | React.ReactNode | Optional icon for page header (appears to the left of the page header's title with a divider) | |
| label | React.ReactNode | Optional label for page header (appears to the right of the page header's title) | |
| linkProps | PageHeaderLinkProps | Optional link below subtitle | |
| ouiaId | string | number | 'PageHeader' | Custom OUIA ID |
