Breadcrumb

This preview demonstrates a Breadcrumb component, often used for navigation, showing the path to the current page. It can include features like collapsible sections for longer paths.

Installation

To use the Breadcrumb component in your project, you need to install it. You have two options: using the CLI (Command Line Interface) for a quick setup, or following the Manual steps for more control and understanding.

npx shadcn@latest add breadcrumb

Usage

Once installed, import the necessary parts of the Breadcrumb component.

  Breadcrumb, // The main container for the breadcrumb trail
  BreadcrumbItem, // Represents a single item (link or page) in the trail
  BreadcrumbLink, // A clickable link within a BreadcrumbItem
  BreadcrumbList, // The ordered list container for all items
  BreadcrumbPage, // Represents the current page (usually not a link)
  BreadcrumbSeparator, // The visual separator between items (e.g., '/')
} from "@/components/ui/breadcrumb"; // Adjust path as needed

Here's the basic structure:

• Breadcrumb wraps the entire component.

• BreadcrumbList contains the sequence of items.

• BreadcrumbItem holds each step in the path.

• Inside BreadcrumbItem, use BreadcrumbLink for clickable links to parent pages and BreadcrumbPage for the current, non-clickable page.

• BreadcrumbSeparator is placed between BreadcrumbItem elements.

<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

You can customize the visual separator between breadcrumb items by providing a different component or element (like an icon) as children to <BreadcrumbSeparator />.

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

Dropdown

For longer breadcrumb trails, you can embed a Dropdown Menu within a <BreadcrumbItem /> to group intermediate steps, keeping the trail concise.

import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
import { ChevronDownIcon } from "@radix-ui/react-icons";

<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

The <BreadcrumbEllipsis /> component can be used within a <BreadcrumbItem /> to represent omitted steps in a long path, often used in conjunction with a dropdown or responsive logic.

import { BreadcrumbEllipsis } from "@/components/ui/breadcrumb";

<Breadcrumb>
  <BreadcrumbList>
    <BreadcrumbItem>
      <BreadcrumbLink href="/">Home</BreadcrumbLink>
    </BreadcrumbItem>
    <BreadcrumbSeparator />
    <BreadcrumbItem>
      <BreadcrumbEllipsis />
    </BreadcrumbItem>
    <BreadcrumbSeparator />
    <BreadcrumbItem>
      <BreadcrumbLink href="/components/breadcrumb">Breadcrumb</BreadcrumbLink>
    </BreadcrumbItem>
  </BreadcrumbList>
</Breadcrumb>;

Link component Integration

To integrate with client-side routing libraries (like Next.js Link or React Router Link), use the asChild prop on <BreadcrumbLink />. This passes the rendering logic to your custom link component while retaining the breadcrumb styling.

import { Link } from "next/link";

<Breadcrumb>
  <BreadcrumbList>
    <BreadcrumbItem>
      <BreadcrumbLink asChild>
        <Link href="/">Home</Link>
      </BreadcrumbLink>
    </BreadcrumbItem>
  </BreadcrumbList>
</Breadcrumb>;

Responsive Design

This example combines several techniques (<BreadcrumbEllipsis />, <DropdownMenu />, and potentially a <Drawer /> for mobile) to create a breadcrumb that adapts gracefully to different screen sizes, preventing overflow and maintaining usability.

It typically shows more items on wider screens and collapses intermediate steps into a dropdown (desktop) or drawer (mobile) on smaller screens.