Page Breadcrumbs

Full-width breadcrumb row for page chrome, placed above PageHeader and page content.

import Link from 'next/link'
import {
  BreadcrumbItem,
  BreadcrumbLink,
  BreadcrumbList,
  BreadcrumbPage,
  BreadcrumbSeparator,
  Button,
} from 'ui'
import { PageBreadcrumbs, PageBreadcrumbsActions } from 'ui-patterns/PageBreadcrumbs'
 
export function PageBreadcrumbsDemo() {
  return (
    <div className="w-full">
      <PageBreadcrumbs
        actions={
          <PageBreadcrumbsActions>
            <Button type="primary" size="tiny">
              Create
            </Button>
          </PageBreadcrumbsActions>
        }
      >
        <BreadcrumbList>
          <BreadcrumbItem>
            <BreadcrumbLink asChild>
              <Link href="/project/demo">Project</Link>
            </BreadcrumbLink>
          </BreadcrumbItem>
          <BreadcrumbSeparator />
          <BreadcrumbItem>
            <BreadcrumbPage>Database</BreadcrumbPage>
          </BreadcrumbItem>
        </BreadcrumbList>
      </PageBreadcrumbs>
    </div>
  )
}

Usage

import { PageBreadcrumbs, PageBreadcrumbsActions } from 'ui-patterns/PageBreadcrumbs'

<PageBreadcrumbs
  actions={
    <PageBreadcrumbsActions>
      <Button type="primary" size="tiny">
        Create
      </Button>
    </PageBreadcrumbsActions>
  }
>
  <BreadcrumbList>{/* … */}</BreadcrumbList>
</PageBreadcrumbs>

Sub-components

PageBreadcrumbs — bordered, full-width breadcrumb bar (wraps shadcn Breadcrumb)
PageBreadcrumbsActions — actions on the right of the breadcrumb row (pass via actions prop)

PageBreadcrumbs uses PageContainer with size="full" for width and padding. It does not depend on PageHeader.

Place it as a sibling above PageHeader and page content, not inside PageHeader. For legacy pages that still nest breadcrumbs inside PageHeader, use PageHeaderBreadcrumb instead.

PreviousPage Container

NextPage Nav