| section | Extensions | |
|---|---|---|
| subsection | Component groups | |
| id | Page header | |
| source | react | |
| propComponents |
|
|
| sourceLink | https://github.com/patternfly/react-component-groups/blob/main/packages/module/patternfly-docs/content/extensions/component-groups/examples/PageHeader/PageHeader.md |
import PageHeader from "@patternfly/react-component-groups/dist/dynamic/PageHeader" import { EllipsisVIcon } from '@patternfly/react-icons'; import pageHeaderIcon from '../../assets/icons/page-header-icon.svg' import { Fragment, FunctionComponent, MouseEvent, Ref, useState } from 'react';
The page header component displays a page header section with a title, subtitle and other optional content.
In order to display a basic page header, pass the title and subtitle.
You can display breadcrumbs above the title using the breadcrumbs property.
Use the icon property to display your custom page icon separated with a divider.
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.
In case you want to display actions in your header, you can use the actionsMenu property.