PageHeader
page-headerCombines back navigation, breadcrumbs, title, tags, actions, and footer tabs.
Usage
Minimalist (only title + action)
The most common list header: title on the left, main action button on the right.
User Management
tsx
<PageHeader
title="User Management"
extra={<Button variant="solid" size="sm">New user</Button>}
/>Breadcrumbs + subtitles + tags
breadcrumb is rendered above the title, and subTitle and tags are pasted to the right of the title.
Product List
Manage on-sale and off-the-shelf products128 for sale
tsx
<PageHeader
breadcrumb={<Breadcrumb items={[{ label: "Home", href: "/" }, { label: "Product List" }]} />}
title="Product List"
subTitle="Manage on-sale and off-shelf products"
tags={<Chip tone="brand" variant="soft" size="sm">128 For sale</Chip>}
/>Details page (return + Tabs footer + divider)
Pass in onBack to render the return arrow; footer always puts Tabs; bordered adds a divider line at the bottom.
Order #20260603-8821
6 items in totalOngoingPaid
tsx
<PageHeader
onBack={() => router.back()}
breadcrumb={<Breadcrumb items={items} />}
title="Order #20260603-8821"
subTitle="6 items in total"
tags={<Chip tone="brand" variant="soft" size="sm">In progress</Chip>}
extra={<><Button variant="ghost" size="sm">Export</Button><Button variant="solid" size="sm">Edit</Button></>}
footer={
<Tabs defaultValue="detail">
<TabsList>
<TabsTab value="detail">Details</TabsTab>
<TabsTab value="items">Product</TabsTab>
<TabsTab value="logistics">Logistics</TabsTab>
</TabsList>
</Tabs>
}
bordered
/>When to use
Use PageHeader to establish a consistent top section for detail and admin pages: back action, breadcrumb, primary title, status tags, right-aligned actions, and optional footer tabs. Its slots can directly compose HulianUI Breadcrumb, Chip, and Tabs. Use Breadcrumb alone when only hierarchy is needed.
Import
ts
import { PageHeader } from "@hulianui/ui"Props
| Name | Type | Default | Description |
|---|---|---|---|
| backLabel | string | "\u8fd4\u56de" | Accessible label for the back button. The built-in Chinese copy means “Back.” |
| bordered | boolean | false | Whether to render a bottom divider using <Separator/>. |
Also inheritsHTMLAttributes<HTMLElement>excepttitle, whose type is replaced withReactNode.
Events
| Event | Type | Description |
|---|---|---|
| onBack | () => void | When provided, renders a back-arrow button before the title and calls this handler on activation. A callback requires the consumer to be a client component. |
Slots
| Slot | Type | Description |
|---|---|---|
| title* | ReactNode | Primary title. |
| subTitle | ReactNode | Muted secondary title displayed inline after the primary title. |
| breadcrumb | ReactNode | Breadcrumb region above the title row, typically a HulianUI <Breadcrumb/>. |
| tags | ReactNode | Status indicators beside the title, such as <Chip/> or <Badge/>. |
| extra | ReactNode | Actions on the right; wraps below the title on narrow screens. |
| footer | ReactNode | Footer region, commonly <Tabs/>. |
Example
tsx
// Minimal title and action
<PageHeader title="Users" extra={<Button variant="solid" size="sm">New user</Button>} />
// Complete header
<PageHeader
onBack={() => router.back()}
breadcrumb={<Breadcrumb items={[{ label: "Home", href: "/" }, { label: "Order details" }]} />}
title="Order #20260603-8821"
subTitle="6 items"
tags={<Chip tone="brand" variant="soft" size="sm">In progress</Chip>}
extra={<Button variant="solid" size="sm">Edit</Button>}
footer={<Tabs defaultValue="detail"><TabsList><TabsTab value="detail">Details</TabsTab></TabsList></Tabs>}
bordered
/>Usage guidelines
titleis aReactNode, which conflicts withHTMLAttributes.title?: string; the native attribute is omitted from the type. Do not expect a stringtitleto pass through to the DOM.- The default back label follows
ConfigProvider, whilebackLabeloverrides it. PageHeader is therefore a client component; server components can still import and render it.
Related
Tabs · Breadcrumb · Pagination · Anchor · Affix · BackTop
Playground
Order #20260603-8821
6 items in totalOngoingPaid
<PageHeader
onBack={() => router.back()}
breadcrumb={<Breadcrumb items={items} />}
title="Order #20260603-8821"
subTitle="6 items in total"
tags={<Chip tone="brand" variant="soft">In progress</Chip>}
extra={<Button>Edit</Button>}
footer={<Tabs>…</Tabs>}
bordered
/>