Breadcrumb

<ComponentPreview styleName="base-nova" name="breadcrumb-demo" previewClassName="p-2" />

Installation

npx shadcn@latest add breadcrumb

<Step>Copy and paste the following code into your project.</Step>

<ComponentSource name="breadcrumb" title="components/ui/breadcrumb.tsx" styleName="base-nova" />

<Step>Update the import paths to match your project setup.</Step>

Usage

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

<Breadcrumb>
  <BreadcrumbList>
    <BreadcrumbItem>
      <BreadcrumbLink render={<a href="/" />}>Home</BreadcrumbLink>
    </BreadcrumbItem>
    <BreadcrumbSeparator />
    <BreadcrumbItem>
      <BreadcrumbLink render={<a 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.

Custom separator

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

Dropdown

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

Collapsed

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

<ComponentPreview styleName="base-nova" name="breadcrumb-ellipsis" previewClassName="p-2" />

Link component

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

RTL

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

<ComponentPreview styleName="base-nova" name="breadcrumb-rtl" direction="rtl" previewClassName="p-2" />

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.