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

npx shadcn@latest add @intentui/breadcrumbs

Composed components

Manual installation

npm i react-aria-components @intentui/icons

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:

<Breadcrumbs.Item 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 Breadcrumbs.Item component.

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

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