A breadcrumb clarifies site structure for users and crawlers. The component renders semantic <nav aria-label="breadcrumb"> with an ordered list, which is the right markup. For rich results, add BreadcrumbList JSON-LD structured data alongside it — the visual component and the structured data are separate concerns.

Shadcn Breadcrumb

View as Markdown Open in ChatGPT Open in Claude

Free shadcn/ui breadcrumb component for React — an accessible navigation trail: a basic crumb, a collapsed dropdown, an ellipsis truncation, a custom separator, and a home icon.

Installation

1 Configure registry — once per project

{
  "registries": {
    "@designrevision": "https://registry.designrevision.com/r/{name}.json"
  }
}

Add to your existing components.json. Requires shadcn/ui v2.3+.

2 Install the component

Props

No props documented yet.

Copied!

components/ui/breadcrumb.tsx

import * as React from "react"
import { Slot } from "@radix-ui/react-slot"
import { ChevronRight, MoreHorizontal } from "lucide-react"

import { cn } from "@/lib/utils"

function Breadcrumb({ ...props }: React.ComponentProps<"nav">) {
  return <nav aria-label="breadcrumb" data-slot="breadcrumb" {...props} />
}

function BreadcrumbList({ className, ...props }: React.ComponentProps<"ol">) {
  return (
    <ol
      data-slot="breadcrumb-list"
      className={cn(
        "text-muted-foreground flex flex-wrap items-center gap-1.5 text-sm break-words sm:gap-2.5",
        className
      )}
      {...props}
    />
  )
}

function BreadcrumbItem({ className, ...props }: React.ComponentProps<"li">) {
  return (
    <li
      data-slot="breadcrumb-item"
      className={cn("inline-flex items-center gap-1.5", className)}
      {...props}
    />
  )
}

function BreadcrumbLink({
  asChild,
  className,
  ...props
}: React.ComponentProps<"a"> & {
  asChild?: boolean
}) {
  const Comp = asChild ? Slot : "a"

  return (
    <Comp
      data-slot="breadcrumb-link"
      className={cn("hover:text-foreground transition-colors", className)}
      {...props}
    />
  )
}

function BreadcrumbPage({ className, ...props }: React.ComponentProps<"span">) {
  return (
    <span
      data-slot="breadcrumb-page"
      role="link"
      aria-disabled="true"
      aria-current="page"
      className={cn("text-foreground font-normal", className)}
      {...props}
    />
  )
}

function BreadcrumbSeparator({
  children,
  className,
  ...props
}: React.ComponentProps<"li">) {
  return (
    <li
      data-slot="breadcrumb-separator"
      role="presentation"
      aria-hidden="true"
      className={cn("[&>svg]:size-3.5", className)}
      {...props}
    >
      {children ?? <ChevronRight />}
    </li>
  )
}

function BreadcrumbEllipsis({
  className,
  ...props
}: React.ComponentProps<"span">) {
  return (
    <span
      data-slot="breadcrumb-ellipsis"
      role="presentation"
      aria-hidden="true"
      className={cn("flex size-9 items-center justify-center", className)}
      {...props}
    >
      <MoreHorizontal className="size-4" />
      <span className="sr-only">More</span>
    </span>
  )
}

export {
  Breadcrumb,
  BreadcrumbList,
  BreadcrumbItem,
  BreadcrumbLink,
  BreadcrumbPage,
  BreadcrumbSeparator,
  BreadcrumbEllipsis,
}

Examples

Basic

The canonical breadcrumb — links, separators, and a current page.

Props

No props documented yet.

Copied!

components/ui/breadcrumb-demo-01.tsx

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

export default function BreadcrumbDemo01() {
  return (
    <Breadcrumb>
      <BreadcrumbList>
        <BreadcrumbItem>
          <BreadcrumbLink href="#">Home</BreadcrumbLink>
        </BreadcrumbItem>
        <BreadcrumbSeparator />
        <BreadcrumbItem>
          <BreadcrumbLink href="#">Components</BreadcrumbLink>
        </BreadcrumbItem>
        <BreadcrumbSeparator />
        <BreadcrumbItem>
          <BreadcrumbPage>Breadcrumb</BreadcrumbPage>
        </BreadcrumbItem>
      </BreadcrumbList>
    </Breadcrumb>
  )
}

Collapsed dropdown

Middle items collapsed into a dropdown menu behind an ellipsis.

Props

No props documented yet.

Copied!

components/ui/breadcrumb-dropdown-01.tsx

import {
  Breadcrumb,
  BreadcrumbEllipsis,
  BreadcrumbItem,
  BreadcrumbLink,
  BreadcrumbList,
  BreadcrumbPage,
  BreadcrumbSeparator,
} from "@/components/ui/breadcrumb"
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu"

export default function BreadcrumbDropdown01() {
  return (
    <Breadcrumb>
      <BreadcrumbList>
        <BreadcrumbItem>
          <BreadcrumbLink href="#">Home</BreadcrumbLink>
        </BreadcrumbItem>
        <BreadcrumbSeparator />
        <BreadcrumbItem>
          <DropdownMenu>
            <DropdownMenuTrigger className="flex items-center gap-1">
              <BreadcrumbEllipsis />
              <span className="sr-only">Toggle menu</span>
            </DropdownMenuTrigger>
            <DropdownMenuContent align="start">
              <DropdownMenuItem>Documentation</DropdownMenuItem>
              <DropdownMenuItem>Themes</DropdownMenuItem>
              <DropdownMenuItem>GitHub</DropdownMenuItem>
            </DropdownMenuContent>
          </DropdownMenu>
        </BreadcrumbItem>
        <BreadcrumbSeparator />
        <BreadcrumbItem>
          <BreadcrumbLink href="#">Components</BreadcrumbLink>
        </BreadcrumbItem>
        <BreadcrumbSeparator />
        <BreadcrumbItem>
          <BreadcrumbPage>Breadcrumb</BreadcrumbPage>
        </BreadcrumbItem>
      </BreadcrumbList>
    </Breadcrumb>
  )
}

With ellipsis

A truncated trail using a static ellipsis for the collapsed middle.

Props

No props documented yet.

Copied!

components/ui/breadcrumb-ellipsis-01.tsx

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

export default function BreadcrumbEllipsis01() {
  return (
    <Breadcrumb>
      <BreadcrumbList>
        <BreadcrumbItem>
          <BreadcrumbLink href="#">Home</BreadcrumbLink>
        </BreadcrumbItem>
        <BreadcrumbSeparator />
        <BreadcrumbItem>
          <BreadcrumbEllipsis />
        </BreadcrumbItem>
        <BreadcrumbSeparator />
        <BreadcrumbItem>
          <BreadcrumbLink href="#">Components</BreadcrumbLink>
        </BreadcrumbItem>
        <BreadcrumbSeparator />
        <BreadcrumbItem>
          <BreadcrumbPage>Breadcrumb</BreadcrumbPage>
        </BreadcrumbItem>
      </BreadcrumbList>
    </Breadcrumb>
  )
}

Custom separator

A slash separator in place of the default chevron.

Props

No props documented yet.

Copied!

components/ui/breadcrumb-separator-01.tsx

import { Slash } from "lucide-react"

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

export default function BreadcrumbSeparator01() {
  return (
    <Breadcrumb>
      <BreadcrumbList>
        <BreadcrumbItem>
          <BreadcrumbLink href="#">Home</BreadcrumbLink>
        </BreadcrumbItem>
        <BreadcrumbSeparator>
          <Slash />
        </BreadcrumbSeparator>
        <BreadcrumbItem>
          <BreadcrumbLink href="#">Components</BreadcrumbLink>
        </BreadcrumbItem>
        <BreadcrumbSeparator>
          <Slash />
        </BreadcrumbSeparator>
        <BreadcrumbItem>
          <BreadcrumbPage>Breadcrumb</BreadcrumbPage>
        </BreadcrumbItem>
      </BreadcrumbList>
    </Breadcrumb>
  )
}

With icon

A home icon on the first crumb.

Props

No props documented yet.

Copied!

components/ui/breadcrumb-icon-01.tsx

import { House } from "lucide-react"

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

export default function BreadcrumbIcon01() {
  return (
    <Breadcrumb>
      <BreadcrumbList>
        <BreadcrumbItem>
          <BreadcrumbLink href="#" className="flex items-center gap-1.5">
            <House className="size-3.5" />
            Home
          </BreadcrumbLink>
        </BreadcrumbItem>
        <BreadcrumbSeparator />
        <BreadcrumbItem>
          <BreadcrumbLink href="#">Settings</BreadcrumbLink>
        </BreadcrumbItem>
        <BreadcrumbSeparator />
        <BreadcrumbItem>
          <BreadcrumbPage>Profile</BreadcrumbPage>
        </BreadcrumbItem>
      </BreadcrumbList>
    </Breadcrumb>
  )
}

The Shadcn Breadcrumb is an accessible navigation trail for React — it shows where the current page sits in the hierarchy and lets users step back up. It is composed of small parts you assemble by hand, so you build the exact trail you need. The examples below cover a basic crumb, a collapsed dropdown, an ellipsis truncation, a custom separator, and a home icon.

The parts

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

Breadcrumb is a <nav> landmark, BreadcrumbList the ordered list, and each BreadcrumbItem holds either a BreadcrumbLink or — for the current page — a BreadcrumbPage.

Marking the current page

The last crumb should be a BreadcrumbPage, not a link. It renders as plain text and carries aria-current, so screen readers announce it as the page you're on. Everything before it is a BreadcrumbLink.

Custom separator

BreadcrumbSeparator shows a chevron by default; pass a child to override it:

<BreadcrumbSeparator>
  <Slash />
</BreadcrumbSeparator>

The separator is decorative (aria-hidden), so changing the glyph never affects the announced trail.

Collapsing a long trail

For deep hierarchies, collapse the middle with BreadcrumbEllipsis. Keep it static, or make it interactive by wrapping a DropdownMenu around it so the hidden crumbs are still reachable:

<BreadcrumbItem>
  <DropdownMenu>
    <DropdownMenuTrigger>
      <BreadcrumbEllipsis />
    </DropdownMenuTrigger>
    <DropdownMenuContent>{/* hidden crumbs */}</DropdownMenuContent>
  </DropdownMenu>
</BreadcrumbItem>

Framework links

BreadcrumbLink renders an <a>, but asChild slots in your router link without losing the styling:

<BreadcrumbLink asChild>
  <Link href="/components">Components</Link>
</BreadcrumbLink>

Accessibility

The component renders <nav aria-label="breadcrumb"> around an ordered list, separators are hidden from assistive tech, and the current page is marked with aria-current. For search rich results, add BreadcrumbList JSON-LD structured data alongside the visual component.

Frequently asked questions

It is an accessible navigation trail that shows where the current page sits in the site hierarchy. It is composed of small parts — Breadcrumb (a nav landmark), BreadcrumbList, BreadcrumbItem, BreadcrumbLink, BreadcrumbPage (the current page), and BreadcrumbSeparator — so you assemble the exact trail you need rather than passing a data array.

Use BreadcrumbPage for the last crumb instead of BreadcrumbLink. It renders as plain text (not a link) and carries role="link" with aria-current and aria-disabled, so assistive tech announces it as the page you are on. Every crumb before it should be a BreadcrumbLink.

BreadcrumbSeparator renders a chevron by default, but any child overrides it: . The separator is decorative — it has aria-hidden and role="presentation" — so swapping the glyph never affects the announced trail.

Use BreadcrumbEllipsis for the hidden middle. For a static truncation, drop it between the first and last crumbs. To make it interactive, wrap a DropdownMenu (or popover) around it so the collapsed items are still reachable — the Collapsed dropdown example shows this.

BreadcrumbLink renders an by default; pass asChild to slot in your router link: Components. Because it uses Radix Slot, the link styling and accessibility carry over to your framework component.

A breadcrumb clarifies site structure for users and crawlers. The component renders semantic