ant-design/components/page-header/index.en-US.md

---
category: Components
type: Navigation
title: PageHeader
cols: 1
subtitle:
---

The header can be used to declare the page topic, display important information about the page that the user is interested in, and carry the action items related to the current page (including page-level operations, inter-page navigation, etc.)

## When To Use

It can also be used as inter-page navigation when it is needed to make the user quickly understand what the current page is and to facilitate the user to use the page function.

## API

| Param | Description | Type | Default value | Version |
| --- | --- | --- | --- | --- |
| title | custom title text | ReactNode | - | 3.14.0 |
| subTitle | custom subTitle text | ReactNode | - | 3.14.0 |
| avatar | Avatar next to the title bar | [avatar props](/components/avatar/) | - | 3.22.0 |
| backIcon | custom back icon, if false the back icon will not be displayed | ReactNode | `<Icon type="arrow-left" />` | 3.14.0 |
| tags | Tag list next to title | [Tag](https://ant.design/components/tag-cn/)[] \| [Tag](https://ant.design/components/tag-cn/) | - | 3.14.0 |
| extra | Operating area, at the end of the line of the title line | ReactNode | - | 3.14.0 |
| breadcrumb | breadcrumb config | [breadcrumb](https://ant.design/components/breadcrumb-cn/) | - | 3.14.0 |
| footer | PageHeader's footer, generally used to render TabBar | ReactNode | - | 3.14.0 |
| onBack | back icon click event | `()=>void` | `()=>history.back()` | 3.14.0 |

> breadcrumbs will automatically disappear when configuring back icon.
New Component PageHeader (#13637) * add api dock * add a simple demo * add content demos * fix style warning * Replace content with children * add all demo * add demo test * add backNode props * Adjust the divider style * fix icon do no show * fix test ci * fix md code style * remove fragment use * add test script * Missing newline character at end of file * optimize the demo display * text becomes longer * text becomes longer * fix css code style * fix test snapshot * fix css code style * fix codereivew waring * fix codereivew waring * update snapshots * use ant-page-header-have-footer * use englist * fix typo * updated snapshot * line-height set to 100% * remove subtitle * Specification less * fix less style error * Sort by alphabet * Rebuild code * use english * number use Statistic * snapshot updated * rm onBack in breadcrumb * remove unuse return * add a click wave * remove unuse css * add icon hover * newline character * new description * warm descriptive text * add dot * remove async * feat: use Typography.Paragraph * test: snapshots updated * style: fix style lint * import typography style 2019-03-02 15:51:08 +08:00			`---`
			`category: Components`
			`type: Navigation`
			`title: PageHeader`
			`cols: 1`
			`subtitle:`
			`---`

			`The header can be used to declare the page topic, display important information about the page that the user is interested in, and carry the action items related to the current page (including page-level operations, inter-page navigation, etc.)`

			`## When To Use`

			`It can also be used as inter-page navigation when it is needed to make the user quickly understand what the current page is and to facilitate the user to use the page function.`

			`## API`

docs: show version Number features were added (#17373) * docs: add api first appearance * docs: fix auto-complete doc * docs: replace Version Added with Version * docs: date picker common method * docs: date picker common method * docs: tree * docs: remove meaningless 3.0.0 2019-07-11 14:14:33 +08:00			`\| Param \| Description \| Type \| Default value \| Version \|`
			`\| --- \| --- \| --- \| --- \| --- \|`
			`\| title \| custom title text \| ReactNode \| - \| 3.14.0 \|`
			`\| subTitle \| custom subTitle text \| ReactNode \| - \| 3.14.0 \|`
feat: 🔥 new pageheader style (#18128) * new pageheader style * support avatar * update demo * snapshots updated * fix lint * change style * add new style * fix style * update demo * update demo * fix test * snapshots updated * update doc * remove extraContent * Bread crumbs and back icon can only have one * back icon will automatically disappear when configuring breadcrumbs * update snapshot * Improve the priority of backicon * change doc * change doc * change doc * update snapshot 2019-08-25 15:38:51 +08:00			`\| avatar \| Avatar next to the title bar \| [avatar props](/components/avatar/) \| - \| 3.22.0 \|`
docs: show version Number features were added (#17373) * docs: add api first appearance * docs: fix auto-complete doc * docs: replace Version Added with Version * docs: date picker common method * docs: date picker common method * docs: tree * docs: remove meaningless 3.0.0 2019-07-11 14:14:33 +08:00			\| backIcon \| custom back icon, if false the back icon will not be displayed \| ReactNode \| `<Icon type="arrow-left" />` \| 3.14.0 \|
			`\| tags \| Tag list next to title \| [Tag](https://ant.design/components/tag-cn/)[] \\| [Tag](https://ant.design/components/tag-cn/) \| - \| 3.14.0 \|`
			`\| extra \| Operating area, at the end of the line of the title line \| ReactNode \| - \| 3.14.0 \|`
			`\| breadcrumb \| breadcrumb config \| [breadcrumb](https://ant.design/components/breadcrumb-cn/) \| - \| 3.14.0 \|`
			`\| footer \| PageHeader's footer, generally used to render TabBar \| ReactNode \| - \| 3.14.0 \|`
			\| onBack \| back icon click event \| `()=>void` \| `()=>history.back()` \| 3.14.0 \|
feat: 🔥 new pageheader style (#18128) * new pageheader style * support avatar * update demo * snapshots updated * fix lint * change style * add new style * fix style * update demo * update demo * fix test * snapshots updated * update doc * remove extraContent * Bread crumbs and back icon can only have one * back icon will automatically disappear when configuring breadcrumbs * update snapshot * Improve the priority of backicon * change doc * change doc * change doc * update snapshot 2019-08-25 15:38:51 +08:00
			`> breadcrumbs will automatically disappear when configuring back icon.`