BreadCrumb Page Header

Name: Boreal UI
Author: Davin Chiupka

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.
`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.