caliper uidocs
DemoSign inGet Pro

Breadcrumb

Free

The path to the current page, with each parent linked.

Installs components/ui/breadcrumb.tsxDepends on @radix-ui/react-slot, lucide-reactMotion none in component source
pnpm dlx shadcn@latest add https://caliperui.site/r/breadcrumb.json

When to use #

Use it for

  • Hierarchies more than two levels deep.
  • Pages reached from several routes.

Skip it when

  • Flat sites; the page title is enough.

Installation #

terminal
pnpm dlx shadcn@latest add https://caliperui.site/r/breadcrumb.json

Adds its 2 files to components/ui/, each with its own stylesheet, and installs their packages. No account needed. The first part also adds Caliper UI’s tokens; import them once as in Installation.

Usage #

This is the code behind the preview above. It is built from Breadcrumb, BreadcrumbList, BreadcrumbItem, BreadcrumbLink, BreadcrumbPage and BreadcrumbSeparator.

example.tsx
import { Settings } from "lucide-react"
import { Breadcrumb, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator } from "@/components/ui/breadcrumb"

export function PagePath() {
  return (
    <Breadcrumb>
      <BreadcrumbList>
        <BreadcrumbItem><BreadcrumbLink href="#">Projects</BreadcrumbLink></BreadcrumbItem>
        <BreadcrumbSeparator />
        <BreadcrumbItem><BreadcrumbLink href="#">Atlas</BreadcrumbLink></BreadcrumbItem>
        <BreadcrumbSeparator />
        <BreadcrumbItem><BreadcrumbPage>Settings</BreadcrumbPage></BreadcrumbItem>
      </BreadcrumbList>
    </Breadcrumb>
  );
}

API reference #

Breadcrumb

component

No props of its own; it accepts the native props of its root element.

BreadcrumbList

component

No props of its own; it accepts the native props of its root element.

BreadcrumbItem

component

No props of its own; it accepts the native props of its root element.

BreadcrumbPage

component

No props of its own; it accepts the native props of its root element.

BreadcrumbSeparator

component

No props of its own; it accepts the native props of its root element.

Accessibility #

It exposes presentation semantics, with aria-label, aria-current and aria-hidden kept in step with state.

No custom key handling; Tab and the native activation keys do the work.

Motion #

It declares no animation in its component source. Any transition comes from its stylesheet, which uses the duration tokens that collapse to instant under prefers-reduced-motion.