# PageHeader

The PageHeader component provides information and actions for the current screen. Designers and developers using a PageHeader can use their judgement to decide whether the PageHeader scrolls with the page content, or is stuck at the top.

## Page header title area

The page's title or breadcrumb navigation is placed first (top) area of the page header. 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. Visit the "Breadcrumb" component documentation for more information about this navigation pattern.

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

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

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

### Examples

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

## Page header with actions

Some pages have one or more actions that are relevant to the whole page.

For visibility, these are placed at the top of the page next to the title or breadcrumbs.

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

If there is more than one action, the most important action is closest to the right edge of the screen.

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

If there are more than three actions, the two most important actions are placed to the left of an overflow menu.

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

### Examples

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

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

![pageHeader-example-withOverflowActions](https://raw.githubusercontent.com/dcos-labs/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.

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

### Examples

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

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

## Page header with body content

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

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

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

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

### Examples

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

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