Breadcrumbs

Basic

Breadcrumbs display a trail of links that guide users to the current page or resource in an app, helping them understand their location and navigation path.

Installation

Install the component via the CLI in one command.

npx shadcn@latest add @intentui/breadcrumbs

Composed components

Manual installation

Use this approach if you prefer to install and wire up the component yourself instead of using the CLI.

npm install react-aria-components @heroicons/react

Anatomy

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

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

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

You can also combine breadcrumbs with menus to create a more complex navigation structure.

Collections

You can also 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.

if you think you want to render an element inside that current breadcrumb, you can do it like this:

<BreadcrumbsItem className="data-current:text-primary">
  {({ isCurrent }: { isCurrent: boolean }) => (
    <span className="flex items-center gap-x-2">
      Navbar
      {isCurrent && <ChevronDownIcon />}
    </span>
  )}
</BreadcrumbsItem>