BreadCrumb Page Header

The BreadCrumbPageHeader component pairs page title content with breadcrumb navigation and actions.

Usage & Examples

Project Header

Northwind migration

Release planning and status

project-header.tsx

<BreadCrumbPageHeader
    breadcrumbs={[
      { label: "Projects", href: "/projects" },
      { label: "Northwind", href: "/projects/northwind" },
    ]}
    title="Northwind migration"
    subtitle="Release planning and status"
    actions={<Button size="small">Share</Button>}
  />

Visual variants

Themes

primary

Northwind migration

Release planning and status

secondary

Northwind migration

Release planning and status

tertiary

Northwind migration

Release planning and status

quaternary

Northwind migration

Release planning and status

States

success

Northwind migration

Release planning and status

warning

Northwind migration

Release planning and status

error

Northwind migration

Release planning and status

info

Northwind migration

Release planning and status

Variants

solid

Northwind migration

Release planning and status

outline

Northwind migration

Release planning and status

glass

Northwind migration

Release planning and status

Rounding

none

Northwind migration

Release planning and status

medium

Northwind migration

Release planning and status

large

Northwind migration

Release planning and status

Shadows

none

Northwind migration

Release planning and status

light

Northwind migration

Release planning and status

strong

Northwind migration

Release planning and status

visual-variants.tsx

// Themes
<BreadCrumbPageHeader theme="primary"
    breadcrumbs={[
      { label: "Projects", href: "/projects" },
      { label: "Northwind", href: "/projects/northwind" },
    ]}
    title="Northwind migration"
    subtitle="Release planning and status"
    actions={<Button size="small">Share</Button>}
  />
<BreadCrumbPageHeader theme="secondary"
    breadcrumbs={[
      { label: "Projects", href: "/projects" },
      { label: "Northwind", href: "/projects/northwind" },
    ]}
    title="Northwind migration"
    subtitle="Release planning and status"
    actions={<Button size="small">Share</Button>}
  />
<BreadCrumbPageHeader theme="tertiary"
    breadcrumbs={[
      { label: "Projects", href: "/projects" },
      { label: "Northwind", href: "/projects/northwind" },
    ]}
    title="Northwind migration"
    subtitle="Release planning and status"
    actions={<Button size="small">Share</Button>}
  />
<BreadCrumbPageHeader theme="quaternary"
    breadcrumbs={[
      { label: "Projects", href: "/projects" },
      { label: "Northwind", href: "/projects/northwind" },
    ]}
    title="Northwind migration"
    subtitle="Release planning and status"
    actions={<Button size="small">Share</Button>}
  />

// States
<BreadCrumbPageHeader state="success"
    breadcrumbs={[
      { label: "Projects", href: "/projects" },
      { label: "Northwind", href: "/projects/northwind" },
    ]}
    title="Northwind migration"
    subtitle="Release planning and status"
    actions={<Button size="small">Share</Button>}
  />
<BreadCrumbPageHeader state="warning"
    breadcrumbs={[
      { label: "Projects", href: "/projects" },
      { label: "Northwind", href: "/projects/northwind" },
    ]}
    title="Northwind migration"
    subtitle="Release planning and status"
    actions={<Button size="small">Share</Button>}
  />
<BreadCrumbPageHeader state="error"
    breadcrumbs={[
      { label: "Projects", href: "/projects" },
      { label: "Northwind", href: "/projects/northwind" },
    ]}
    title="Northwind migration"
    subtitle="Release planning and status"
    actions={<Button size="small">Share</Button>}
  />
<BreadCrumbPageHeader state="info"
    breadcrumbs={[
      { label: "Projects", href: "/projects" },
      { label: "Northwind", href: "/projects/northwind" },
    ]}
    title="Northwind migration"
    subtitle="Release planning and status"
    actions={<Button size="small">Share</Button>}
  />

// Variants
<BreadCrumbPageHeader variant="solid"
    breadcrumbs={[
      { label: "Projects", href: "/projects" },
      { label: "Northwind", href: "/projects/northwind" },
    ]}
    title="Northwind migration"
    subtitle="Release planning and status"
    actions={<Button size="small">Share</Button>}
  />
<BreadCrumbPageHeader variant="outline"
    breadcrumbs={[
      { label: "Projects", href: "/projects" },
      { label: "Northwind", href: "/projects/northwind" },
    ]}
    title="Northwind migration"
    subtitle="Release planning and status"
    actions={<Button size="small">Share</Button>}
  />
<BreadCrumbPageHeader variant="glass"
    breadcrumbs={[
      { label: "Projects", href: "/projects" },
      { label: "Northwind", href: "/projects/northwind" },
    ]}
    title="Northwind migration"
    subtitle="Release planning and status"
    actions={<Button size="small">Share</Button>}
  />

// Rounding
<BreadCrumbPageHeader rounding="none"
    breadcrumbs={[
      { label: "Projects", href: "/projects" },
      { label: "Northwind", href: "/projects/northwind" },
    ]}
    title="Northwind migration"
    subtitle="Release planning and status"
    actions={<Button size="small">Share</Button>}
  />
<BreadCrumbPageHeader rounding="medium"
    breadcrumbs={[
      { label: "Projects", href: "/projects" },
      { label: "Northwind", href: "/projects/northwind" },
    ]}
    title="Northwind migration"
    subtitle="Release planning and status"
    actions={<Button size="small">Share</Button>}
  />
<BreadCrumbPageHeader rounding="large"
    breadcrumbs={[
      { label: "Projects", href: "/projects" },
      { label: "Northwind", href: "/projects/northwind" },
    ]}
    title="Northwind migration"
    subtitle="Release planning and status"
    actions={<Button size="small">Share</Button>}
  />

// Shadows
<BreadCrumbPageHeader shadow="none"
    breadcrumbs={[
      { label: "Projects", href: "/projects" },
      { label: "Northwind", href: "/projects/northwind" },
    ]}
    title="Northwind migration"
    subtitle="Release planning and status"
    actions={<Button size="small">Share</Button>}
  />
<BreadCrumbPageHeader shadow="light"
    breadcrumbs={[
      { label: "Projects", href: "/projects" },
      { label: "Northwind", href: "/projects/northwind" },
    ]}
    title="Northwind migration"
    subtitle="Release planning and status"
    actions={<Button size="small">Share</Button>}
  />
<BreadCrumbPageHeader shadow="strong"
    breadcrumbs={[
      { label: "Projects", href: "/projects" },
      { label: "Northwind", href: "/projects/northwind" },
    ]}
    title="Northwind migration"
    subtitle="Release planning and status"
    actions={<Button size="small">Share</Button>}
  />

Interaction states

Disabled

Northwind migration

Release planning and status

Northwind migration

Release planning and status

interaction-states.tsx

// Disabled
<BreadCrumbPageHeader disabled
    breadcrumbs={[
      { label: "Projects", href: "/projects" },
      { label: "Northwind", href: "/projects/northwind" },
    ]}
    title="Northwind migration"
    subtitle="Release planning and status"
    actions={<Button size="small">Share</Button>}
  />
// Loading
<BreadCrumbPageHeader loading
    breadcrumbs={[
      { label: "Projects", href: "/projects" },
      { label: "Northwind", href: "/projects/northwind" },
    ]}
    title="Northwind migration"
    subtitle="Release planning and status"
    actions={<Button size="small">Share</Button>}
  />

Props API

BreadCrumb Page Header props API
				Default	Description
`actions`	`ReactNode`	No	props	`—`	Primary action area rendered at the end of the header.
`breadcrumbs`	`Breadcrumb[]`	No	props	`[]`	Breadcrumb items rendered before the page header title.
`children`	`ReactNode`	No	props	`—`	Additional content rendered below the title row.
`className`	`string`	No	styling	`—`	Additional class name for the root.
`contentClassName`	`string`	No	props	`—`	Additional class name for the content area.
`data-testid`	`string`	No	testing	`—`	Backward-compatible alias for test ID attributes.
`disabled`	`boolean`	No	props	`false`	Whether the component is visually disabled.
`loading`	`boolean`	No	props	`false`	Whether the component should display a loading state.
`rounding`	`RoundableRoundingType`	No	styling	`configured default rounding (fallback: "medium")`	Rounding style for the component.
`shadow`	`ShadowType`	No	styling	`—`	Shadow style for the component.
`srOnlyClassName`	`string`	No	props	`—`	Additional class name for screen-reader-only content.
`srOnlyText`	`ReactNode`	No	props	`—`	Optional content rendered for assistive technologies only.