PageHeader

The top of a page: an optional trail, the page’s one <h1> with its status beside it, a line on what the page covers and the actions available here.

import { PageHeader } from '@zitdevs/ui';

Examples

1. People/
2. Engineering/
3. Ada Lovelace

Ada Lovelace

Active

Engineering · joined March 2024

View historyEdit

<PageHeader
  title="Ada Lovelace"
  description="Engineering · joined March 2024"
  breadcrumbs={[
    { label: 'People', href: '/people' },
    { label: 'Engineering', href: '/people?team=engineering' },
    { label: 'Ada Lovelace' },
  ]}
  status={<StatusTag label="Active" />}
  actions={
    <>
      <Button label="View history" variant="secondary" />
      <Button label="Edit" />
    </>
  }
/>

A list page needs only a title:

People

Everyone in the organization.

<PageHeader title="People" description="Everyone in the organization." />

Props

Prop	Type	Default	Notes
title	string	required	The page’s name, as its one <h1>.
breadcrumbs	readonly BreadcrumbItem[]	—	Root first; the last is the page. See Breadcrumbs.
description	string	—	What the page covers, under the title.
status	ReactNode	—	State of the thing the page is about, beside the title: a StatusTag.
actions	ReactNode	—	What the reader can do here, at the end of the header.
headingId	string	—	The <h1>’s id, for a region that names itself with aria-labelledby.
breadcrumbsLabels	Partial<BreadcrumbsLabels>	English	The trail’s own words. es.breadcrumbs from labels/es.
linkAs	LinkComponent	'a'	Renders the trail’s links, such as Next’s Link.
ref	Ref<HTMLElement>	—	The <header>.
className	string	—	Placement.
anything else	<header> attributes	—	Except title, which is the heading here.

Exported types: PageHeaderProps.

Accessibility

• One <h1> per page: it names the page, and the sections below start at <h2>.
• The trail is a <nav> named “Breadcrumb” and ends in the current page, marked aria-current.
• The title comes first in the reading order after the trail; the status follows it and the actions come last, so a keyboard meets them in the same order.
• The status is a word, never a colour alone: pass a StatusTag.

Without JavaScript

It needs none, and renders as a Server Component.

Theming

ink for the title and muted for the line; the trail and the actions take their own components’ roles.