All components (204)

Page header

Navigation · PageHeader

What it is and when to use it

The header of a screen: where I came from (breadcrumbs), where I am (title and status), what it is about (description) and what I can do here (actions).

When to use it

At the top of the content of every management screen: the page of an order, the customer list.
crumbs for the breadcrumbs, description below the title and actions on the right.
state for a Tag next to the title ("Pending shipment"); media for an avatar or an icon in front.
footer for what is attached to the header: a search box, some tabs, some filters.
headingLevel={2} and separate={false} when it goes inside something else (a panel, a dialog) that already has its h1.

When not to

For the application bar, the same on all screens: TopBar.
For the title of a block inside the screen: the title of Card or DataList.

Keyboard: it has no keyboard behavior of its own; the breadcrumbs and any actions it carries are tabbed through, in that order.

Accessibility: it goes in a header and the title is a real heading, h1 by default: it is the first thing sought by anyone navigating by headings, so there can only be one per page. The breadcrumbs go in their own nav, with the current page marked.

Fine-tuning: CSS variables --amset-heading-*: -description, -gap, -row-gap, -text-min, -title. The size moves the font size of the title and the description, and the gaps.

What it looks like

<PageHeader
  title="Order 4821"
  description="Delivered on October 3"
  actions={<Button variant="outline">Download invoice</Button>}
/>

Props

Import it with import { PageHeader } from '@amset/ui'. Required props are marked.

Prop	Type	What it does
`title`required	`string`	—
`actions`	`ReactNode`	Screen buttons, aligned to the right.
`className`	`string`	Merged with the library classes; it does not replace them.
`crumbs`	`readonly Crumb[]`	Path up to here. It is drawn above the title.
`description`	`ReactNode`	Below the title: what the screen is about, in one line.
`footer`	`ReactNode`	Below everything: tabs, filters, a search bar.
`headingLevel`	`3 \| 2 \| 1`	Heading level. `1` almost always: it is the title of the screen and there can be only one per page.
`media`	`ReactNode`	Above the title, on the left: an avatar, a section icon.
`separate`	`boolean`	—
`size`	`"sm" \| "md" \| "lg"`	The size of the title and the description, and the gaps.
`state`	`ReactNode`	Beside the title: a status tag, an identifier.

It also accepts the attributes of the element it renders: className, style, data-*, aria-* and its events.

In the test bench

Every state and variant, to try one at a time, on its page at ui.amset.tech: