Navigation

Page header

The top of a screen: a mono eyebrow or breadcrumb, the page title, an optional status badge and description, and the primary actions.

Usage

Included in the GliaKit boilerplate. Import it where you need it:

tsx

import { PageHeader } from "@/components/app/page-header";

At the top of every app screen, so the title and main actions sit in the same place on each page.
Use the default type (eyebrow, title, action) for top-level sections like Projects or Billing.
Use the detail type (breadcrumb, badge, description) for a single record, so people can see where they are and get back up a level.

Inside cards, dialogs or sheets: it renders an h1, which should appear once per page. Use the card or dialog title instead.
For marketing page heroes, which need larger type and more space.

For a single record: a breadcrumb replaces the eyebrow, with a status badge, a description and two actions.

Every prop but title is optional. Leave out the action on read-only pages.

A common screen top: the header, then line tabs for the page's sections.

Stacks on small screens and lays out in a row from sm up, with actions aligned to the bottom right. Does not spread other HTML attributes.

Prop	Type	Default	Description
title	string	-	Page title, rendered as an h1. Required.
eyebrow	string	-	Small uppercase mono label above the title. Ignored when breadcrumb is set.
breadcrumb	React.ReactNode	-	Usually a <Breadcrumb />. Shown above the title in place of the eyebrow.
badge	React.ReactNode	-	Status element, such as a <Badge />, shown next to the title.
description	string	-	One line of supporting text under the title.
action	React.ReactNode	-	Buttons on the right. Pass a fragment for several; they are spaced with a gap.
className	string	-	Extra classes for the outer container.

The title renders as an h1, giving each page a single top-level heading for screen reader navigation.
The breadcrumb slot keeps its own nav landmark and aria-current on the last item when you pass a Breadcrumb.
Actions keep their native button semantics; icon-only actions need an aria-label.