Components / navigation

Page Header

The top of a page: an optional breadcrumb, the page title (the one h1) with an optional status Badge, a short description, a meta line and the page actions.

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

The snippet an agent gets

From get_component_snippet, with the required props filled in from the spec. Every snippet is type-checked against the library before it is shipped.

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

<PageHeader title="Website redesign" />

• Example values were filled in for the required prop title: replace them with your own.
• No interactive states. Without layout it is inline and stacks below 640px of available width (container query).
• Compose with: badge, breadcrumb, button.
• Storybook: Navigation/Page Header.

Props

States. No interactive states. Without layout it is inline and stacks below 640px of available width (container query).

Native attributes such as className, id and data-* are forwarded to the root element.

Use it when

• The top of every app page: list pages, detail pages, settings
• The top of a large drawer or section (with headingLevel={2})

Do not use it when

• The app's top bar (use Navbar)
• A card or modal title (use the Card and Modal title props)
• Marketing hero sections

Rules for agents

• One PageHeader per page, with the page's only h1
• Put at most one Primary Button in actions; the rest Secondary or Outline, or a DropdownMenu for more
• Pass a Breadcrumb in breadcrumb when the page is deeper than one level
• Use badge for the status of the thing the page is about (a Badge with a status tone)
• Keep description to one or two sentences and meta to one line

Avoid

• Hand-laying-out a title, badge, description and buttons with divs and CSS
• Two h1 headings on a page
• Several Primary Buttons in the actions
• Putting tabs or filters inside the header (place Tabs right below it)
• A fixed height on the header

Writing the content

• Title: the name of the thing or the page: "Website redesign", "Members"
• Meta: facts separated by a middle dot: "Owner Ada Lovelace · Updated 2 hours ago"

Keyboard

• No keys of its own; Tab reaches the breadcrumb links and the actions in order

Accessibility

• The title is the page's h1 (headingLevel 1); use 2 inside a drawer or a section
• Inside <main> the <header> is not a banner landmark, so it adds no landmark noise
• The status Badge is read right after the title

Colour tokens it reads

Related

• Breadcrumb
• Badge
• Button
• Navbar
• Tabs

navigation 2 Figma variants Try it in the live demo