# PageHeader

The PageHeader component provides information and actions for the current screen. Customize it to either scroll with the page content or remain fixed at the top.

## Page header title area

The top area of the PageHeader component displays the page's title or breadcrumb navigation. Breadcrumb navigation should be used when the user would benefit from knowing their location in the page hierarchy or having quick access to different levels of the page hierarchy. View the `Breadcrumb` component documentation for more information about this navigation pattern.

The title or breadcrumb navigation may or may not display an icon associated with the current page.

### Example

![pageHeader-noIcon](https://raw.githubusercontent.com/d2iq/ui-kit/main/packages/pageheader/readmeImg/pageHeader-noIcon.png)

![pageHeader](https://raw.githubusercontent.com/d2iq/ui-kit/main/packages/pageheader/readmeImg/pageHeader.png)

## Page header with actions

For pages that have one or more actions relevant to the whole page, these actions are displayed at the top of the page next to the title or breadcrumbs.

If there is more than one action, the most important action is placed closest to the right edge of the screen. If there are more than three actions, the two most important actions are placed to the left of an overflow menu.

### Examples

![pageHeader-example-oneAction](https://raw.githubusercontent.com/d2iq/ui-kit/main/packages/pageheader/readmeImg/pageHeader-example-oneAction.png)

![pageHeader-example-twoActions](https://raw.githubusercontent.com/d2iq/ui-kit/main/packages/pageheader/readmeImg/pageHeader-example-twoActions.png)

![pageHeader-example-withOverflowActions](https://raw.githubusercontent.com/d2iq/ui-kit/main/packages/pageheader/readmeImg/pageHeader-example-withOverflowActions.png)

## Page header with tabs

Pages that have multiple sections of content use tabs to organize content. Page header tabs are always placed last (bottom) area of the page header.

### Examples

![pageHeader-tabbedContent](https://raw.githubusercontent.com/d2iq/ui-kit/main/packages/pageheader/readmeImg/pageHeader-tabbedContent.png)

![pageHeader-example-withTabs](https://raw.githubusercontent.com/d2iq/ui-kit/main/packages/pageheader/readmeImg/pageHeader-example-withTabs.png)

![pageHeader-example-withTabs+action](https://raw.githubusercontent.com/d2iq/ui-kit/main/packages/pageheader/readmeImg/pageHeader-example-withTabs+action.png)

## Page header with body content

Some PageHeader components contain information that is relevant to the primary page content. For example: promotional banners, or a summary of complex primary page content.

Contextual information should be displayed after the title/breadcrumb area but before the tabs.

### Examples

![pageHeader-withSubheader](https://raw.githubusercontent.com/d2iq/ui-kit/main/packages/pageheader/readmeImg/pageHeader-withBody.png)

![pageHeader-withSubheader+tabs](https://raw.githubusercontent.com/d2iq/ui-kit/main/packages/pageheader/readmeImg/pageHeader-withBody+tabs.png)

![pageHeader-example-subheaderSummary](https://raw.githubusercontent.com/d2iq/ui-kit/main/packages/pageheader/readmeImg/pageHeader-example-subheaderSummary.png)

![pageHeader-example-subheaderPromobanner](https://raw.githubusercontent.com/d2iq/ui-kit/main/packages/pageheader/readmeImg/pageHeader-example-subheaderPromobanner.png)