PageHeader
A header with common actions and design elements built in.
Install
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
styleor 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 component | BreadcrumbProps | - |
| className | Additional css class | string | string[] | - |
| style | Additional style | CSSProperties | - |
| onBack | Callback when click the back icon | (e: MouseEvent) => void | - |