Breadcrumb

A path like Finder's path bar: small icons and names, separated by chevrons.

@cupertinoui/breadcrumbRegistry JSON

import { FileIcon, FolderIcon, HardDriveIcon } from "lucide-react"

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

// Finder's path bar.
export default function BreadcrumbDemo() {
  return (
    <Breadcrumb>
      <BreadcrumbList>
        <BreadcrumbItem>
          <BreadcrumbLink href="#">
            <HardDriveIcon className="text-mac-label-secondary" /> Macintosh HD
          </BreadcrumbLink>
        </BreadcrumbItem>
        <BreadcrumbSeparator />
        <BreadcrumbItem>
          <BreadcrumbEllipsis />
        </BreadcrumbItem>
        <BreadcrumbSeparator />
        <BreadcrumbItem>
          <BreadcrumbLink href="#">
            <FolderIcon className="fill-mac-blue text-mac-blue" /> Documents
          </BreadcrumbLink>
        </BreadcrumbItem>
        <BreadcrumbSeparator />
        <BreadcrumbItem>
          <BreadcrumbPage>
            <FileIcon className="text-mac-label-secondary" /> Roadmap.key
          </BreadcrumbPage>
        </BreadcrumbItem>
      </BreadcrumbList>
    </Breadcrumb>
  )
}

Installation

pnpm dlx shadcn@latest add @cupertinoui/breadcrumb

The first install also adds the macOS theme. See Installation to set up the registry.

Usage

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

<Breadcrumb>
  <BreadcrumbList>
    <BreadcrumbItem><BreadcrumbLink href="/">Macintosh HD</BreadcrumbLink></BreadcrumbItem>
    <BreadcrumbSeparator />
    <BreadcrumbItem><BreadcrumbPage>Documents</BreadcrumbPage></BreadcrumbItem>
  </BreadcrumbList>
</Breadcrumb>

API Reference

Every part forwards the props of the underlying element. The props below are the ones CupertinoUI adds or changes.

BreadcrumbLink

Prop	Type	Description
`render`	`ReactElement`	Render your router's link.
`className`	`string`	Extra classes, merged with the component's own.

Prop	Type	Description
`className`	`string`	Extra classes, merged with the component's own.

Installation

Usage

API Reference

BreadcrumbLink

Breadcrumb / BreadcrumbList / BreadcrumbItem / BreadcrumbPage / BreadcrumbSeparator / BreadcrumbEllipsis