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>}
/>

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.
`glass`	`boolean`	No	props	`configured default glass setting (fallback: false)`	Whether to render glass styling.
`loading`	`boolean`	No	props	`false`	Whether the component should display a loading state.
`outline`	`boolean`	No	styling	`configured default outline setting (fallback: false)`	Whether to render outlined styling.
`rounding`	`RoundingType`	No	styling	`configured default rounding (fallback: "medium")`	Rounding style for the component.
`shadow`	`ShadowType`	No	styling	`configured default shadow (fallback: "light")`	Shadow style for the component.