PageHeader

Reference

Props

title: string (falls back to last breadcrumb label if omitted)
subtitle: string
actions: ReactNode (action buttons)
breadcrumbs: Breadcrumb[] — { label: string, href?: string }
titleClassName: string

Defaults

None

Example

<PageHeader
  title="Project Settings"
  subtitle="Configure your project preferences"
  breadcrumbs={[
    { label: 'Home', href: '/' },
    { label: 'Projects', href: '/projects' },
    { label: 'Settings' },
  ]}
  actions={<Button>Save</Button>}
/>

Composability

• Server-safe page-top header with title + subtitle + breadcrumbs + actions slot. Renders Breadcrumb internally from the breadcrumbs array.
• Auto-derived title: If title is omitted, the last breadcrumb's label becomes the h1. Saves duplication when the page title matches the breadcrumb leaf.
• Breadcrumb contract: Last item should NOT have an href (it's the current page — renders as BreadcrumbPage, not a link). Items with href render as BreadcrumbLink.
• actions slot: Typically one to three buttons (Save, Cancel, More). For larger action groups, use ButtonGroup or a toolbar.
• Not for tabs / sub-navigation — pair with Tabs rendered below PageHeader for that.

Gotchas

• Server-safe: can be imported directly in Next.js Server Components
• If title is omitted, the last breadcrumb's label is used as the page title
• The last breadcrumb should not have an href (it represents the current page)

Changes

v0.2.0

• Added Identified as server-safe component

v0.1.0

• Added Initial release