Breadcrumb

Installation

npx shadcn@latest add breadcrumb

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>

Examples

Custom separator

Use a custom component as children for <BreadcrumbSeparator /> to create a custom separator.

import { Slash } from "lucide-react"
<Breadcrumb>
<BreadcrumbList>
  <BreadcrumbItem>
    <BreadcrumbLink href="/">Home</BreadcrumbLink>
  </BreadcrumbItem>
  <BreadcrumbSeparator>
    <Slash />
  </BreadcrumbSeparator>
  <BreadcrumbItem>
    <BreadcrumbLink href="/components">Components</BreadcrumbLink>
  </BreadcrumbItem>
</BreadcrumbList>
</Breadcrumb>

You can compose <BreadcrumbItem /> with a <DropdownMenu /> to create a dropdown in the breadcrumb.

import {
DropdownMenu,
DropdownMenuContent,
DropdownMenuItem,
DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu"
<BreadcrumbItem>
<DropdownMenu>
  <DropdownMenuTrigger className="flex items-center gap-1">
    Components
    <ChevronDownIcon />
  </DropdownMenuTrigger>
  <DropdownMenuContent align="start">
    <DropdownMenuItem>Documentation</DropdownMenuItem>
    <DropdownMenuItem>Themes</DropdownMenuItem>
    <DropdownMenuItem>GitHub</DropdownMenuItem>
  </DropdownMenuContent>
</DropdownMenu>
</BreadcrumbItem>

Collapsed

We provide a <BreadcrumbEllipsis /> component to show a collapsed state when the breadcrumb is too long.

import { BreadcrumbEllipsis } from "@/components/ui/breadcrumb"
<Breadcrumb>
<BreadcrumbList>
  {/* ... */}
  <BreadcrumbItem>
    <BreadcrumbEllipsis />
  </BreadcrumbItem>
  {/* ... */}
</BreadcrumbList>
</Breadcrumb>

Link component

To use a custom link component from your routing library, you can use the asChild prop on <BreadcrumbLink />.

import { Link } from "next/link"
<Breadcrumb>
<BreadcrumbList>
  <BreadcrumbItem>
    <BreadcrumbLink asChild>
      <Link href="/">Home</Link>
    </BreadcrumbLink>
  </BreadcrumbItem>
  {/* ... */}
</BreadcrumbList>
</Breadcrumb>

Responsive

Here's an example of a responsive breadcrumb that composes <BreadcrumbItem /> with <BreadcrumbEllipsis />, <DropdownMenu />, and <Drawer />.

It displays a dropdown on desktop and a drawer on mobile.