Page header
The top of a page: a breadcrumb, the title, a description and the page's actions.
Web only — React, from @krizaka/ui/page-header. Stable: its API only changes in a major version.
When to use
- At the top of every page of an app: settings, dashboards, lists.
- With
actionsfor what applies to the whole page: export, create, withdraw.
When not to use
- For the hero of a marketing page: compose it with the brand backdrop.Use instead: Section backdrop
- For the title of a dialog.Use instead: Dialog
Installation
Install
npm install @krizaka/ui@beta @krizaka/tailwind@beta @krizaka/tokens@beta tailwindcssStyles
@import "tailwindcss";
@import "@krizaka/tailwind";
@import "@krizaka/ui/tailwind.css";Import
import { PageHeader } from "@krizaka/ui/page-header";Examples
Default
A title and a description.
Payouts
Your earnings are paid every Monday to the account on file.
import { PageHeader } from "@krizaka/ui/page-header";
export default function PageHeaderDefault() {
return <PageHeader title="Payouts" description="Your earnings are paid every Monday to the account on file." />;
}With actions
The page's actions on the right.
Payouts
Your earnings are paid every Monday to the account on file.
import { Button } from "@krizaka/ui/button";
import { PageHeader } from "@krizaka/ui/page-header";
export default function PageHeaderWithActions() {
return (
<PageHeader
title="Payouts"
description="Your earnings are paid every Monday to the account on file."
actions={
<>
<Button variant="outline">Export</Button>
<Button variant="primary">Withdraw</Button>
</>
}
/>
);
}With a breadcrumb
The product's own breadcrumb above the title.
Payouts
Your earnings are paid every Monday to the account on file.
import { Button } from "@krizaka/ui/button";
import { PageHeader } from "@krizaka/ui/page-header";
// The breadcrumb is a slot: the product's own `<nav aria-label>`.
export default function PageHeaderWithBreadcrumb() {
return (
<PageHeader
title="Payouts"
description="Your earnings are paid every Monday to the account on file."
actions={<Button variant="primary">Withdraw</Button>}
breadcrumb={
<nav aria-label="Breadcrumb">
<ol className="flex items-center gap-1.5">
<li>
<a href="#studio" className="hover:text-fg">
Studio
</a>
</li>
<li aria-hidden>/</li>
<li aria-current="page">Payouts</li>
</ol>
</nav>
}
/>
);
}Props
| Prop | Type | Default | Description |
|---|---|---|---|
titlerequired | ReactNode | — | The title of the page (an h1, or as="h2"). |
actions | ReactNode | — | The page's actions: Buttons, a DropdownMenu. |
as | "h1" | "h2" | h1 | The heading level of the title: h1 for a page, h2 for a section that looks like one. |
breadcrumb | ReactNode | — | A breadcrumb (the product's own <nav aria-label>), shown above the title. |
description | ReactNode | — | A sentence under the title. |
Accessibility
- The title is an
h1by default: the page's main heading. - In the breadcrumb, mark the current page with
aria-current="page".
Best practices
- One page header per page, and its title is the page's only
h1(as="h2"for a section that looks like one). - One primary action at most in
actions. - The breadcrumb is a slot: pass your own
<nav aria-label="Breadcrumb">with router links.
Related components
Generated from the code of @krizaka/ui 2.0.0-beta.6: its meta.ts, its examples and its types.Edit this documentation on GitHub