Breadcrumb

import {
  Breadcrumb,
  BreadcrumbItem,
  BreadcrumbLink,
  BreadcrumbList,
  BreadcrumbPage,

Installation

bunnpmpnpmyarn
$ pnpm dlx shadcn@latest add https://shadcn-cssinjs.vercel.app/r/breadcrumb.json
Copy

Usage

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

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

Composition

Use the following composition to build a Breadcrumb:

CopyBreadcrumb
└── BreadcrumbList
    ├── BreadcrumbItem
    │   ├── BreadcrumbLink
    │   └── BreadcrumbPage
    ├── BreadcrumbSeparator
    └── BreadcrumbEllipsis

RTL

To enable right-to-left support, see the RTL guide.

"use client";

import { useTranslation } from "@/components/language-selector";
import type { Translations } from "@/components/language-selector";
import {
  Breadcrumb,

API Reference

Breadcrumb

The Breadcrumb component is the root navigation element that wraps all breadcrumb components.

BreadcrumbList

The BreadcrumbList component displays the ordered list of breadcrumb items.

BreadcrumbItem

The BreadcrumbItem component wraps individual breadcrumb items.

BreadcrumbLink

The BreadcrumbLink component displays a clickable link in the breadcrumb.

BreadcrumbPage

The BreadcrumbPage component displays the current page in the breadcrumb (non-clickable).

BreadcrumbSeparator

The BreadcrumbSeparator component displays a separator between breadcrumb items. Pass custom children to override the default separator icon.

BreadcrumbEllipsis

The BreadcrumbEllipsis component displays an ellipsis indicator for collapsed breadcrumb items.