Breadcrumb

import Link from "next/link"
import {
  Breadcrumb,

Installation

pnpmnpmyarnbun
pnpm dlx shadcn@latest add breadcrumb
Copy

Usage

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

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

Basic

A basic breadcrumb with a home link and a components link.

import {
  Breadcrumb,
  BreadcrumbItem,

Custom separator

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

import Link from "next/link"
import {
  Breadcrumb,

Dropdown

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

import Link from "next/link"
import {
  Breadcrumb,

Collapsed

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

import Link from "next/link"
import {
  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"
import {
  Breadcrumb,

RTL

To enable RTL support in shadcn/ui, see the RTL configuration guide.

"use client"

import * as React from "react"

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. You can pass custom children to override the default separator icon.

BreadcrumbEllipsis

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