Page Header

The top of a page: breadcrumbs, a title with badges, a description, actions on the right and tabs underneath. Every part is optional except the title.

Blockv0.1.0experimentalWCAG 2.2 AAView spec

A ready-made piece, built from the library's own parts.

A block puts several components together into something you would otherwise assemble by hand. It never fetches data: you give it the data, or answer its callbacks. It is copied into your project like any component, with the parts it uses, so you can change anything.

Basic

Full screen

Invoice 2041

Paid

Issued 3 March to Brightwater Supplies. Paid by bank transfer.

With breadcrumbs and tabs

Full screen

Brightwater Supplies

Customer since 2022.

Overview

Invoices

Notes

Loading

Full screen

Loading

Installation

CLI

Manual

npm

pnpm

yarn

bun

npx rdloom add page-header

Copies the source into src/components/rdloom. Edit it freely: rdloom upgrade merges later versions into your changes.

Use another registry client

npx shadcn@latest add https://rdloom.vimalbhatt.com/r/page-header.json

Works, but without upgrade tracking.

Usage

import { Badge, Button, PageHeader } from "@rdloom/react";

<div className="flex min-h-[12rem] w-full items-center justify-center">
  <div className="w-full max-w-4xl">
    <PageHeader
      title="Invoice 2041"
      meta={<Badge variant="success">Paid</Badge>}
      description="Issued 3 March to Brightwater Supplies. Paid by bank transfer."
      actions={
        <>
          <Button variant="secondary">Download</Button>
          <Button>Send reminder</Button>
        </>
      }
      border
    />
  </div>
</div>

API Reference

Defined by the spec. Components also accept the props of the React Aria component they wrap.

Prop	Type	Default
`title`required The page's title, shown as an h1 by default.	`node`	none
`headingLevel` Heading level of the title, 1 to 6. Keep 1 unless the header sits inside another page.	`number`	`1`
`description` One or two sentences under the title.	`node`	none
`breadcrumbs` A Breadcrumbs component, shown above the title.	`node`	none
`meta` Badges or a status shown next to the title.	`node`	none
`actions` Buttons for the right of the title. They wrap under the title on a narrow screen.	`node`	none
`tabs` A Tabs list (or any navigation) shown under the title.	`node`	none
`isLoading` Show the title and description as skeletons and mark the header busy.	`boolean`	`false`
`size` compact for pages with little room, such as a side panel or a dense admin screen.	`"default" \| "compact"`	`"default"`
`border` Draw a line under the header.	`boolean`	`false`
`classNames` Extra class names for single parts, so you can restyle one part without editing the file. Keys: root, breadcrumbs, title, meta, description, actions, tabs.	`Partial<Record<"root" \| "breadcrumbs" \| "title" \| "meta" \| "description" \| "actions" \| "tabs", string>>`	none

Accessibility

Role none, WCAG 2.2 AA. Tested with axe and keyboard tests; screen reader checks are in the audit checklist.

Keyboard

Tab: moves through the breadcrumbs, the actions, then the tabs

Screen readers announce

"Customers, heading level 1"
While loading: "Loading, heading level 1"

What your code must do

The title is a real heading (h1 unless you change headingLevel), so there is one clear heading to jump to
Breadcrumbs keep their own navigation landmark; the header adds none
While loading the header is marked busy and the title keeps a hidden "Loading" text, never a made-up title
On a narrow screen the actions move under the title instead of squeezing it

Block contract

Data: A title, and optional description, breadcrumbs, badges, actions and tabs.
Data states: loading, ready
Permissions: None yet
Events: None
You can replace: classNames for each part; breadcrumbs, meta, actions and tabs slots

Guidelines

Use it when

The top of any page or detail screen
Inside DashboardPage, which uses it for its heading

Avoid it when

Headings for a section inside a page: use SectionHeader

Don't

More than one h1 on a page
Putting the main action in tabs instead of actions

Design tokens

The semantic tokens this component uses. Change them once and every component follows; see Design tokens.

--rd-color-text-default
--rd-color-text-muted
--rd-color-border-default
--rd-color-surface-subtle