Breadcrumb

The Breadcrumb component is built on top of Kobalte Breadcrumbs, which provides accessible navigation semantics for the current location.

Installation

pnpm dlx shadcn@latest add @zaidan/breadcrumb

npx shadcn@latest add @zaidan/breadcrumb

yarn dlx shadcn@latest add @zaidan/breadcrumb

bunx --bun shadcn@latest add @zaidan/breadcrumb

Usage

1
import {
2
  Breadcrumb,
3
  BreadcrumbItem,
4
  BreadcrumbLink,
5
  BreadcrumbList,
6
  BreadcrumbPage,
7
  BreadcrumbSeparator,
8
} from "~/components/ui/breadcrumb";

1
<Breadcrumb>
2
  <BreadcrumbList>
3
    <BreadcrumbItem>
4
      <BreadcrumbLink href="/">Home</BreadcrumbLink>
5
    </BreadcrumbItem>
6
    <BreadcrumbSeparator />
7
    <BreadcrumbItem>
8
      <BreadcrumbLink href="/components">Components</BreadcrumbLink>
9
    </BreadcrumbItem>
10
    <BreadcrumbSeparator />
11
    <BreadcrumbItem>
12
      <BreadcrumbPage>Breadcrumb</BreadcrumbPage>
13
    </BreadcrumbItem>
14
  </BreadcrumbList>
15
</Breadcrumb>

Composition

Use the following composition to build a Breadcrumb:

Breadcrumb
└── BreadcrumbList
    ├── BreadcrumbItem
    │   └── BreadcrumbLink
    ├── BreadcrumbSeparator
    ├── BreadcrumbItem
    │   └── BreadcrumbLink
    ├── BreadcrumbSeparator
    └── BreadcrumbItem
        └── BreadcrumbPage

Basic

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

Custom separator

Use custom children in <BreadcrumbSeparator /> to create a custom separator.

Dropdown

Compose <BreadcrumbItem /> with a <DropdownMenu /> to create a dropdown in the breadcrumb.

Collapsed

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

Link component

To use a custom link component from your routing library, pass it with the as prop on <BreadcrumbLink />.

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.

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.

For all primitive props and navigation behavior, see the Kobalte Breadcrumbs API reference.