# Shadcn Breadcrumb

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

Source: https://designrevision.com/components/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

```tsx
<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:

```tsx
<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:

```tsx
<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:

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

## Installation

### breadcrumb

**Install:**

```bash
npx shadcn@latest add @designrevision/breadcrumb
```

**Dependencies:** @radix-ui/react-slot, utils

**Usage & accessibility:** A breadcrumb trail (no dependency beyond Slot). Compose <Breadcrumb> → <BreadcrumbList> of <BreadcrumbItem>s, each holding a <BreadcrumbLink> (use asChild to wrap your router's Link) or a <BreadcrumbPage> for the current page; put a <BreadcrumbSeparator> (a chevron by default) between them, and <BreadcrumbEllipsis> to collapse middle items. Carries the right ARIA (nav aria-label, aria-current="page").

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

**Install:**

```bash
npx shadcn@latest add @designrevision/breadcrumb-demo-01
```

**Dependencies:** breadcrumb

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

**Install:**

```bash
npx shadcn@latest add @designrevision/breadcrumb-dropdown-01
```

**Dependencies:** breadcrumb, dropdown-menu

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

**Install:**

```bash
npx shadcn@latest add @designrevision/breadcrumb-ellipsis-01
```

**Dependencies:** breadcrumb

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

**Install:**

```bash
npx shadcn@latest add @designrevision/breadcrumb-separator-01
```

**Dependencies:** lucide-react, breadcrumb

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

**Install:**

```bash
npx shadcn@latest add @designrevision/breadcrumb-icon-01
```

**Dependencies:** lucide-react, breadcrumb

```tsx
// 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>
  )
}
```