Skip to content
Wave 2APG pattern (opens in a new tab)

Breadcrumb

Shows where the current page sits in the site hierarchy.

  • Flat sites with one level.
  • Step progress: use a Stepper (Wave 3).

Install

Terminal
pnpm dlx shadcn@latest add @acme/breadcrumb

Or import from the package: import { Breadcrumb } from '@acme/react'

Examples

Basic

breadcrumb-basic.tsx
import {
  Breadcrumb,
  BreadcrumbItem,
  BreadcrumbLink,
  BreadcrumbList,
  BreadcrumbPage,
  BreadcrumbSeparator,
} from '@/components/ui/breadcrumb'

export default function BreadcrumbBasic() {
  return (
    <Breadcrumb>
      <BreadcrumbList>
        <BreadcrumbItem>
          <BreadcrumbLink href="#home">Home</BreadcrumbLink>
        </BreadcrumbItem>
        <BreadcrumbSeparator />
        <BreadcrumbItem>
          <BreadcrumbLink href="#customers">Customers</BreadcrumbLink>
        </BreadcrumbItem>
        <BreadcrumbSeparator />
        <BreadcrumbItem>
          <BreadcrumbPage>Northwind Traders</BreadcrumbPage>
        </BreadcrumbItem>
      </BreadcrumbList>
    </Breadcrumb>
  )
}

Props

Breadcrumb props
PropTypeDefaultDescription
BreadcrumbLink.renderReactElement—Use a router link: render={<NextLink href="/customers" />}.

Accessibility

Role
navigation > ordered list
Built in
  • The current page is text with aria-current="page", not a link.
  • Separators are hidden from assistive technology.
WCAG 2.2 criteria
2.4.8, 1.3.1

Don’t

  • Make the current page a link.

Tokens

  • color.muted-foreground
  • color.foreground