Shadcn Breadcrumb

A breadcrumb is the path from home to the page you are on. Ancestors are links; the last item is BreadcrumbPage. Use it on docs, store categories, and nested resources where the URL alone is not enough to scan.

Usage

import {
  Breadcrumb,
  BreadcrumbItem,
  BreadcrumbLink,
  BreadcrumbList,
  BreadcrumbPage,
  BreadcrumbSeparator,
} from "@/components/ui/breadcrumb"

<Breadcrumb>
  <BreadcrumbList>
    <BreadcrumbItem>
      <BreadcrumbLink href="/">Home</BreadcrumbLink>
    </BreadcrumbItem>
    <BreadcrumbSeparator />
    <BreadcrumbItem>
      <BreadcrumbLink href="/components">Components</BreadcrumbLink>
    </BreadcrumbItem>
    <BreadcrumbSeparator />
    <BreadcrumbItem>
      <BreadcrumbPage>Breadcrumb</BreadcrumbPage>
    </BreadcrumbItem>
  </BreadcrumbList>
</Breadcrumb>

The last item is BreadcrumbPage. render={<Link href="…" />} on BreadcrumbLink for your router Link.

Composition

Basic

Home, a parent, the current page.

Custom separator

Pass children to BreadcrumbSeparator — a slash, a DotIcon, anything.

Dropdown

Compose BreadcrumbItem with a DropdownMenu for siblings or hidden ancestors.

Collapsed

BreadcrumbEllipsis stands in for the middle when the trail is too long.

Link component

render={<Link href="…" />} on BreadcrumbLink so Next.js Link is the actual <a>.

RTL

Wrap with DirectionProvider and dir="rtl". Copy in Arabic; DotIcon does not flip.

API

Breadcrumb is a nav with aria-label="breadcrumb". BreadcrumbList is an ol. Items and separators are lis. BreadcrumbPage is a span with aria-current="page".

BreadcrumbLink

BreadcrumbSeparator

Notes

Current page is BreadcrumbPage, not a link.

With other components

Questions

Related