# PageHeader

- Page: https://jiguang132.com/resources/arco-design/docs/page-header
- Resource: Arco Design (https://jiguang132.com/resources/arco-design.md)
- All guides: https://jiguang132.com/resources/arco-design/docs.md

A header with common actions and design elements built in.

## Install

```bash
npm install @arco-design/web-react@2.66.18
```

Import `@arco-design/web-react/dist/css/arco.css` at the entry and set the locale with `ConfigProvider`. React 19 projects must also import `@arco-design/web-react/es/_util/react-19-adapter` first, or imperative APIs such as Message and Modal cannot render.

## Examples

- **Basic**: Basic page header, suitable for use in scenarios that require a simple description. The default is no background color.
- **Breadcrumb**: Basic page header, suitable for use in scenarios that require a simple description. The default is no background color.
- **Background**: The default is no background color, if necessary, you can set a different background color through `style` or class name.
- **Conplex**: Complete capabilities provided by components

Examples come from the official Arco Design repository (MIT) at the commit published as npm 2.66.18. Some use online images or upload endpoints; network requests are disabled in previews.

## API

### PageHeader

|Property|Description|Type|DefaultValue|
|---|---|---|---|
|extra|Customize the extra content. The extra element will be rendered to the end of the title line|ReactNode |`-`|
|footer|The footer element|ReactNode |`-`|
|subTitle|The subtitle element|ReactNode |`-`|
|title|The title element|ReactNode |`-`|
|backIcon|Customize back icon, if false The back icon will not be displayed|ReactNode \| boolean |`-`|
|breadcrumb|The props of [Breadcrumb](/react/components/breadcrumb) component|[BreadcrumbProps](breadcrumb#breadcrumb) |`-`|
|className|Additional css class|string \| string[] |`-`|
|style|Additional style|CSSProperties |`-`|
|onBack|Callback when click the back icon|(e: MouseEvent) => void |`-`|

---

Index of all JGuang resources: https://jiguang132.com/llms.txt