Page header

Ported

The top of a page: breadcrumbs, the title and description, the page's actions, then tabs. Native attributes and ref go to the header.

Kumo source

import { PlusIcon } from "@phosphor-icons/react";
import { Button } from "@etched/monet/button";
import { PageHeader } from "@etched/monet/page-header";

export function Preview() {
  return (
    <PageHeader
      title="Compiler Engineer"
      description="Toronto · Hiring manager: Sam Lee · 2 openings"
      actions={
        <Button variant="primary" icon={<PlusIcon />}>
          Add candidate
        </Button>
      }
    />
  );
}

Installation

import { PageHeader } from "@etched/monet/page-header";

Examples

Title and description

import { PageHeader } from "@etched/monet/page-header";

export function TitleAndDescription() {
  return <PageHeader title="Referrals" description="Everyone your team has referred, with where each one is in the process." />;
}

Breadcrumbs and actions

The breadcrumbs go above the title; the actions go at the end of the title row, with one primary button.

import { PlusIcon } from "@phosphor-icons/react";
import { Breadcrumbs, BreadcrumbsCurrent, BreadcrumbsLink } from "@etched/monet/breadcrumbs";
import { Button } from "@etched/monet/button";
import { PageHeader } from "@etched/monet/page-header";

export function BreadcrumbsAndActions() {
  return (
    <PageHeader
      breadcrumbs={
        <Breadcrumbs>
          <BreadcrumbsLink href="#page-header">Tracer</BreadcrumbsLink>
          <BreadcrumbsCurrent>Compiler Engineer</BreadcrumbsCurrent>
        </Breadcrumbs>
      }
      title="Compiler Engineer"
      description="Toronto · Hiring manager: Sam Lee · 2 openings"
      actions={
        <>
          <Button>Archive role</Button>
          <Button variant="primary" icon={<PlusIcon />}>
            Add candidate
          </Button>
        </>
      }
    />
  );
}

Tabs

A TabsNav when each section is its own URL, or Tabs when the views switch in place.

import { Tabs, TabsNav } from "@etched/monet/tabs";
import { PageHeader } from "@etched/monet/page-header";

export function WithTabs() {
  return (
    <div className="rows">
      <PageHeader
        title="Settings"
        tabs={
          <TabsNav
            aria-label="Settings sections"
            variant="underline"
            links={[
              { href: "#page-header", label: "Users", current: true },
              { href: "#page-header-notifications", label: "Notifications" },
              { href: "#page-header-data", label: "Data quality" },
            ]}
          />
        }
      />
      <PageHeader
        title="Compiler Engineer"
        tabs={
          <Tabs
            aria-label="Role views"
            tabs={[
              { value: "pipeline", label: "Pipeline" },
              { value: "summary", label: "Summary" },
            ]}
          />
        }
      />
    </div>
  );
}

Narrow

In less than 40 rem the title takes the smaller size, and actions that do not fit go under the title.

import { Button } from "@etched/monet/button";
import { PageHeader } from "@etched/monet/page-header";

export function Narrow() {
  return (
    <div style={{ maxInlineSize: "24rem" }}>
      <PageHeader
        title="Staff Compiler Engineer, Toronto"
        description="Hiring manager: Sam Lee · 2 openings"
        actions={
          <>
            <Button>Archive role</Button>
            <Button variant="primary">Add candidate</Button>
          </>
        }
      />
    </div>
  );
}

Accessibility

A header with the title in an h1. The reading order is breadcrumbs, title, description, actions, then tabs.
On a narrow page, the actions move under the title; the reading order stays the same.
Use one PageHeader per page, as its title is the page's only h1. Pass a Breadcrumbs, which brings its own "Breadcrumb" navigation landmark.

API reference

Prop	Type	Default	Description
title *	ReactNode	–	The page's name, in the page's one `h1`.
description	ReactNode	–	A line or two under the title, at most 72 characters wide.
breadcrumbs	ReactNode	–	A `Breadcrumbs` above the title.
actions	ReactNode	–	Buttons at the end of the title row. On a narrow page they go under the title.
tabs	ReactNode	–	A `Tabs` or `TabsNav` under the title, for the page's sections or views.