Component reference
PageHeader
A page introduction with context and actions.
Preview
Live previewOptional six-digit hex. Clear to restore the preset. Check contrast with your brand color.
Changes apply to this preview only.
Getting started
Install Pimolu UI
Add the design tokens, the web styles bundle and the React package to a new project. The same tokens power the native renderer.
Width adapts to the available space
"use client";
import { PageHeader as DocsPageHeader, Button } from "@pimolu/react";
export function DemoExample() {
return (
<div className="min-w-0 rounded-lg border border-border p-6">
<DocsPageHeader
titleAs="h2"
eyebrow="Getting started"
title="Install Pimolu UI"
description={(
"Add the design tokens, the web styles bundle and the React " +
"package to a new project. The same tokens power the native " +
"renderer."
)}
breadcrumbs={[
{ label: "Pimolu UI", href: "/docs" },
{
label: "Getting started",
href: "/components/page-header",
},
{ label: "Installation" },
]}
meta={<>
<span>pnpm · npm · yarn</span>
<span>React 18 and 19</span>
</>}
actions={<Button size="sm">Read the guide</Button>}
/>
</div>
);
}More examples
Different configurations and compositions using the real Pimolu API. Each preview runs independently and follows the site appearance.
Documentation header
Breadcrumbs use the shared Breadcrumbs primitives; the last entry is the current page and carries aria-current. Actions wrap under the title on narrow screens.
Centered marketing header
align="center" centers the content, the breadcrumbs and the actions; it suits a landing page better than a reference page.
Compact introduction
Eyebrow, title and description are enough for a guide or a changelog page; every optional slot can be omitted.
Usage
Keep one main page title and use description/actions to clarify the current task.
API reference
Generated from the public TypeScript declarations. Native HTML attributes are inherited where the component extends them; this reference includes Pimolu props and selected common native attributes.
PimoluPageHeaderBreadcrumb
Type source| Name | Type | Default | Description |
|---|---|---|---|
labelRequired | ReactNode | — | Visible label of the crumb. |
href | string | undefined | — | Destination of the crumb. The last crumb always represents the current page and is rendered as text with aria-current="page". |
labelRequiredReactNodeNo default extracted.
Visible label of the crumb.
hrefstring | undefinedNo default extracted.
Destination of the crumb. The last crumb always represents the current page and is rendered as text with aria-current="page".
PimoluPageHeaderProps
Type source| Name | Type | Default | Description |
|---|---|---|---|
titleRequired | ReactNode | — | The page title. Rendered as h1 by default. |
titleAs | PimoluPageHeaderTitleElement | undefined | "h1" | Heading level used for the title. Defaults to "h1". |
description | ReactNode | — | Lead paragraph displayed under the title. |
eyebrow | ReactNode | — | Small label above the title, for a section or a category. |
actions | ReactNode | — | Buttons or links aligned with the title block. |
breadcrumbs | PimoluPageHeaderBreadcrumbs | — | Breadcrumb trail. Pass a list of crumbs to render the shared Breadcrumbs primitives, or a ready-made node. In list mode the last entry is the current page. |
meta | ReactNode | — | Secondary information under the description, such as a date or tags. |
align | PimoluPageHeaderAlign | undefined | "start" | Horizontal alignment of the block. Defaults to "start". |
className | string | undefined | — | Public Pimolu prop; see the source declaration for details. |
onChange | ChangeEventHandler<HTMLElement, Element> | undefined | — | Standard React/HTML attribute. |
defaultValue | string | number | readonly string[] | undefined | — | Standard React/HTML attribute. |
style | CSSProperties | undefined | — | Standard React/HTML attribute. |
aria-label | string | undefined | — | Defines a string value that labels the current element. |
children | ReactNode | — | Standard React/HTML attribute. |
onClick | MouseEventHandler<HTMLElement> | undefined | — | Standard React/HTML attribute. |
titleRequiredReactNodeNo default extracted.
The page title. Rendered as h1 by default.
titleAsPimoluPageHeaderTitleElement | undefinedDefault: "h1"
Heading level used for the title. Defaults to "h1".
descriptionReactNodeNo default extracted.
Lead paragraph displayed under the title.
eyebrowReactNodeNo default extracted.
Small label above the title, for a section or a category.
actionsReactNodeNo default extracted.
Buttons or links aligned with the title block.
breadcrumbsPimoluPageHeaderBreadcrumbsNo default extracted.
Breadcrumb trail. Pass a list of crumbs to render the shared Breadcrumbs primitives, or a ready-made node. In list mode the last entry is the current page.
metaReactNodeNo default extracted.
Secondary information under the description, such as a date or tags.
alignPimoluPageHeaderAlign | undefinedDefault: "start"
Horizontal alignment of the block. Defaults to "start".
classNamestring | undefinedNo default extracted.
Public Pimolu prop; see the source declaration for details.
onChangeChangeEventHandler<HTMLElement, Element> | undefinedNo default extracted.
Standard React/HTML attribute.
defaultValuestring | number | readonly string[] | undefinedNo default extracted.
Standard React/HTML attribute.
styleCSSProperties | undefinedNo default extracted.
Standard React/HTML attribute.
aria-labelstring | undefinedNo default extracted.
Defines a string value that labels the current element.
childrenReactNodeNo default extracted.
Standard React/HTML attribute.
onClickMouseEventHandler<HTMLElement> | undefinedNo default extracted.
Standard React/HTML attribute.
Accessibility
- Preserve heading hierarchy and ensure breadcrumb/action labels remain understandable on mobile.