Page header

The block at the top of a page: breadcrumbs, title, description, actions and tabs. There is no page header component; build it from four components and two spacing tokens.

Stable

Overview

Usage

Accessibility

Projects

Aurora

A shared workspace for the design team.

Duplicate

Overview

Files

Activity

<header style="display: flex; flex-direction: column; gap: var(--space-16); inline-size: 100%">
  <tk-breadcrumb>
    <tk-breadcrumb-item href="/projects">Projects</tk-breadcrumb-item>
    <tk-breadcrumb-item>Aurora</tk-breadcrumb-item>
  </tk-breadcrumb>
  <div style="display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-16)">
    <div style="display: flex; flex-direction: column; gap: var(--space-4)">
      <tk-text as="h2" variant="title-lg">Aurora</tk-text>
      <tk-text color="secondary">A shared workspace for the design team.</tk-text>
    </div>
    <tk-button-group spaced label="Project actions">
      <tk-button>Duplicate</tk-button>
      <tk-button variant="primary">Share</tk-button>
    </tk-button-group>
  </div>
  <tk-tab-bar label="Project views" value="overview">
    <tk-tab value="overview">Overview</tk-tab>
    <tk-tab value="files">Files</tk-tab>
    <tk-tab value="activity">Activity</tk-tab>
  </tk-tab-bar>
</header>

The parts

Part	Use	Required
Breadcrumb	where the page sits	no, drop it on a top-level page
Text	the title, and a description in `color="secondary"`	the title is
Button group with `spaced`	the page's actions	no
Tab bar	views of the same page	no

The same layout as classes:

.page-header { display: flex; flex-direction: column; gap: var(--space-16); }
.page-header__title-row { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-16); }
.page-header__text { display: flex; flex-direction: column; gap: var(--space-4); }

Separating it from the page

If the header ends in a tab bar, add nothing. The tab bar already draws a hairline under its tabs.
Otherwise, give the header a bottom border: border-block-end: 1px solid var(--border-subtle). Don't use a Divider for this; Divider separates pieces of content.

Do / Don't

✅ Do	❌ Don't
Choose `h1`, `h2` or `h3` from the page's outline	Make every page header an `h1`
Use `spaced` on the action group	Join page actions into one block
Wrap tabs or filters in a `<div>`	Put a `<footer>` inside the `<header>`
Leave the `<header>` unlabeled	Add `aria-label` to it
Let the tab bar's hairline end the header	Draw a second line above the tab bar

Breadcrumb: the trail and its overflow.
Text: as sets the heading level, variant sets the size.
Button group: the action cluster.
Tab bar: switching views.
Spacing: the --space-* scale.

Accessibility

Pick the heading level from the page's outline. Use as="h1" at the top of a page and as="h2" or lower inside a titled region. Never skip a level, such as h2 then h4. The example uses h2 because it sits inside this page.
Don't label the <header>. Inside <main> it is not a landmark, so aria-label on it does nothing. A plain <div> works just as well.
Never put a <footer> inside the <header>. HTML doesn't allow it. Wrap a strip of tabs or filters in a <div>.
Don't put "navigation" in the breadcrumb's label. Screen readers already announce the role. If the page also has a navigation menu, give the two different labels.

The parts

Separating it from the page

Do / Don't

Related

Accessibility