Overview

The PageHeader component displays page-level information including the title, optional subtitle, breadcrumb navigation, and action buttons. It changes based on the current page or route.

Props

Variants

Basic

Simple header with just a title.

<PageHeader title="Patients" />

With Subtitle

Add a description or secondary information.

<PageHeader
  title="Patient Details"
  subtitle="View and manage patient information"
/>

With Breadcrumb

Show navigation context with a breadcrumb trail.

<PageHeader
  title="Maya Alvarez"
  subtitle="Patient ID: P-12345"
  breadcrumb={
    <nav>
      <a href="/patients">Patients</a>
      <span>/</span>
      <span>Maya Alvarez</span>
    </nav>
  }
/>

With Actions

Add action buttons for page-level operations.

<PageHeader
  title="Patients"
  subtitle="12,345 total patients"
  actions={
    <>
      <Button variant="secondary">Export</Button>
      <Button variant="primary">Add Patient</Button>
    </>
  }
/>

Usage

Common Patterns

List Page

<PageHeader
  title="Patients"
  subtitle="12,345 total patients"
  actions={<Button variant="primary">Add Patient</Button>}
/>

Detail Page

<PageHeader
  title="Maya Alvarez"
  subtitle="Last visit: January 15, 2025"
  breadcrumb={<Breadcrumb items={['Patients', 'Maya Alvarez']} />}
  actions={
    <>
      <Badge label="Active" color="success" />
      <Button variant="secondary">Edit</Button>
      <Button variant="primary">Schedule Visit</Button>
    </>
  }
/>

Settings Page

<PageHeader
  title="Account Settings"
  subtitle="Manage your account preferences"
/>

PageHeader vs AppHeader

These components serve different purposes:

Accessibility

• Heading Hierarchy: Uses <h1> for the title. Ensure only one h1 per page.
• Breadcrumb Navigation: Use <nav> with aria-label="Breadcrumb" for the breadcrumb.
• Action Buttons: Ensure all actions have clear labels.