2019-03-02 15:51:08 +08:00
---
category: Components
type: Navigation
title: PageHeader
cols: 1
subtitle:
2020-06-05 13:50:09 +08:00
cover: https://gw.alipayobjects.com/zos/alicdn/6bKE0Cq0R/PageHeader.svg
2019-03-02 15:51:08 +08:00
---
2019-10-28 09:09:22 +08:00
A header with common actions and design elements built in.
2019-03-02 15:51:08 +08:00
## When To Use
2019-10-28 09:09:22 +08:00
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.
2019-03-02 15:51:08 +08:00
## API
2019-07-11 14:14:33 +08:00
| Param | Description | Type | Default value | Version |
| --- | --- | --- | --- | --- |
2019-11-22 10:33:34 +08:00
| title | Custom title text | ReactNode | - | |
| subTitle | Custom subtitle text | ReactNode | - | |
| ghost | PageHeader type, will change background color | boolean | true | |
2020-06-30 13:26:37 +08:00
| avatar | Avatar next to the title bar | [AvatarProps ](/components/avatar/ ) | - | |
| backIcon | Custom back icon, if false the back icon will not be displayed | ReactNode \| boolean | < ArrowLeft /> | |
2020-04-17 17:56:42 +08:00
| tags | Tag list next to title | [Tag ](/components/tag/ )[] \| [Tag ](/components/tag/ ) | - | |
2019-11-22 10:33:34 +08:00
| extra | Operating area, at the end of the line of the title line | ReactNode | - | |
2020-06-30 13:26:37 +08:00
| breadcrumb | Breadcrumb configuration | [Breadcrumb ](/components/breadcrumb/ ) | - | |
2019-11-22 10:33:34 +08:00
| footer | PageHeader's footer, generally used to render TabBar | ReactNode | - | |
2020-08-10 14:54:49 +08:00
| onBack | Back icon click event | () => void | - | |
2019-12-23 18:36:49 +08:00
< style >
[data-theme="dark"] .site-page-header {
border: 1px solid #303030 ;
}
[data-theme="dark"] .site-page-header-ghost-wrapper {
background-color: rgba(255,255,255,0.08);
}
< / style >
