Breadcrumbs

Installation

Add the component with the CLI.

npx shadcn@latest add @intentui/breadcrumbs

Composed components

Manual installation

Install the dependencies, then copy the component source into your project.

npm install react-aria-components @heroicons/react cn

Anatomy

import { Breadcrumbs, BreadcrumbsItem } from "@/components/ui/breadcrumbs"

<Breadcrumbs>
  <BreadcrumbsItem href="#">Home</BreadcrumbsItem>
  <BreadcrumbsItem href="#">Design System</BreadcrumbsItem>
  <BreadcrumbsItem>Collections</BreadcrumbsItem>
</Breadcrumbs>

Examples

Separator

The separator appears when the breadcrumb changes. By default, it uses a chevron. You can disable it with separator="false" or switch to a slash with separator="slash".

If you need a unique separator for each item (not recommended), set the separator prop directly:

<BreadcrumbsItem href="#" separator="slash"/>

Menu

Combine breadcrumbs with menus to navigate between branches of a hierarchy.

Collections

Use breadcrumbs to navigate between collections.

Current

The current breadcrumb indicates the active page in the breadcrumb navigation. It is automatically added as the last item and its color is updated accordingly. But you can also control the color of the current breadcrumb by passing a className prop to the BreadcrumbsItem component.

To render custom content inside the current breadcrumb:

<BreadcrumbsItem className="current:text-primary"/>

Component API

Breadcrumbs

BreadcrumbsItem