Patterns
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.
Why it is here. Used by Orochia.
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 @krizaka/tailwind @krizaka/tokens 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.
With actions
The page's actions on the right.
Payouts
Your earnings are paid every Monday to the account on file.
With a breadcrumb
The product's own breadcrumb above the title.
Payouts
Your earnings are paid every Monday to the account on file.
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 3.8.0: its meta.ts, its examples and its types.Edit this documentation on GitHub