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

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

A header with common actions and design elements built in.

## When To Use

PageHeader can be used to highlight the page topic, display important information about the page, and carry the action items related to the current page (including page-level operations, inter-page navigation, etc.) It can also be used as inter-page navigation.

## API

| Param | Description | Type | Default value | Version |
| --- | --- | --- | --- | --- |
| title | Custom title text | ReactNode | - |  |
| subTitle | Custom subtitle text | ReactNode | - |  |
| ghost | PageHeader type, will change background color | boolean | true |  |
| avatar | Avatar next to the title bar | [avatar props](/components/avatar/) | - |  |
| backIcon | Custom back icon, if false the back icon will not be displayed | ReactNode | `<ArrowLeft />` |  |
| tags | Tag list next to title | [Tag](https://ant.design/components/tag-cn/)[] \| [Tag](https://ant.design/components/tag-cn/) | - |  |
| extra | Operating area, at the end of the line of the title line | ReactNode | - |  |
| breadcrumb | Breadcrumb configuration | [breadcrumb](https://ant.design/components/breadcrumb-cn/) | - |  |
| footer | PageHeader's footer, generally used to render TabBar | ReactNode | - |  |
| onBack | Back icon click event | `()=>void` | `()=>history.back()` |  |
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 6 years ago			`---`
			`category: Components`
			`type: Navigation`
			`title: PageHeader`
			`cols: 1`
			`subtitle:`
			`---`

Navigation components doc tweaks (#19447) * Documentation - Affix Component * Documentation - Dropdown component * Documentation - Menu component * Documentation - Pagination component * Documentation - PageHeader component * Documentation - Steps component 5 years ago			`A header with common actions and design elements built in.`
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 6 years ago
			`## When To Use`

Navigation components doc tweaks (#19447) * Documentation - Affix Component * Documentation - Dropdown component * Documentation - Menu component * Documentation - Pagination component * Documentation - PageHeader component * Documentation - Steps component 5 years ago			`PageHeader can be used to highlight the page topic, display important information about the page, and carry the action items related to the current page (including page-level operations, inter-page navigation, etc.) It can also be used as inter-page navigation.`
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 6 years ago
			`## 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 5 years ago			`\| Param \| Description \| Type \| Default value \| Version \|`
			`\| --- \| --- \| --- \| --- \| --- \|`
Removed version cloumn in 4.0 (#19872) 5 years ago			`\| title \| Custom title text \| ReactNode \| - \| \|`
			`\| subTitle \| Custom subtitle text \| ReactNode \| - \| \|`
			`\| ghost \| PageHeader type, will change background color \| boolean \| true \| \|`
			`\| avatar \| Avatar next to the title bar \| [avatar props](/components/avatar/) \| - \| \|`
			\| backIcon \| Custom back icon, if false the back icon will not be displayed \| ReactNode \| `<ArrowLeft />` \| \|
			`\| tags \| Tag list next to title \| [Tag](https://ant.design/components/tag-cn/)[] \\| [Tag](https://ant.design/components/tag-cn/) \| - \| \|`
			`\| extra \| Operating area, at the end of the line of the title line \| ReactNode \| - \| \|`
			`\| breadcrumb \| Breadcrumb configuration \| [breadcrumb](https://ant.design/components/breadcrumb-cn/) \| - \| \|`
			`\| footer \| PageHeader's footer, generally used to render TabBar \| ReactNode \| - \| \|`
			\| onBack \| Back icon click event \| `()=>void` \| `()=>history.back()` \| \|