Breadcrumb

Overview

The Breadcrumb component provides hierarchical navigation that shows users their current location within a website or application structure. Built on Base UI primitives, it offers support for links, custom separators, and flexible composition.

Usage

import {
  Breadcrumb,
  BreadcrumbItem,
  BreadcrumbLink,
  BreadcrumbList,
  BreadcrumbPage,
  BreadcrumbSeparator,
} from "@tilt-legal/cubitt-components/primitives";

<Breadcrumb>
  <BreadcrumbList>
    <BreadcrumbItem>
      <BreadcrumbLink href="/">Home</BreadcrumbLink>
    </BreadcrumbItem>
    <BreadcrumbSeparator />
    <BreadcrumbItem>
      <BreadcrumbLink href="/components">Components</BreadcrumbLink>
    </BreadcrumbItem>
    <BreadcrumbSeparator />
    <BreadcrumbItem>
      <BreadcrumbPage>Breadcrumb</BreadcrumbPage>
    </BreadcrumbItem>
  </BreadcrumbList>
</Breadcrumb>

Examples

Basic

A simple breadcrumb with links and the current page.

import {
  Breadcrumb,
  BreadcrumbItem,
  BreadcrumbLink,
  BreadcrumbList,
  BreadcrumbPage,
  BreadcrumbSeparator,
} from "@tilt-legal/cubitt-components/primitives";

export default function Component() {
  return (
    <Breadcrumb>
      <BreadcrumbList>
        <BreadcrumbItem>
          <BreadcrumbLink href="/">Home</BreadcrumbLink>
        </BreadcrumbItem>
        <BreadcrumbSeparator />
        <BreadcrumbItem>
          <BreadcrumbLink render={<Link href="/" />}>Components</BreadcrumbLink>
        </BreadcrumbItem>
        <BreadcrumbSeparator />
        <BreadcrumbItem>
          <BreadcrumbPage>Breadcrumb</BreadcrumbPage>
        </BreadcrumbItem>
      </BreadcrumbList>
    </Breadcrumb>
  );
}

With Icon

Use icons as breadcrumb links, such as a home icon for the root page.

import {
  Breadcrumb,
  BreadcrumbItem,
  BreadcrumbLink,
  BreadcrumbList,
  BreadcrumbPage,
  BreadcrumbSeparator,
} from "@tilt-legal/cubitt-components/primitives";
import {
  BreadcrumbItem,
  BreadcrumbLink,
  BreadcrumbList,
  BreadcrumbPage,
  BreadcrumbSeparator,
} from "@tilt-legal/cubitt-components/primitives";
import {
  House } from "@tilt-legal/cubitt-icons/ui/outline";

export default function Component() {
  return (
    <Breadcrumb>
      <BreadcrumbList>
        <BreadcrumbItem>
          <BreadcrumbLink href="/">
            <House className="size-4" />
          </BreadcrumbLink>
        </BreadcrumbItem>
        <BreadcrumbSeparator />
        <BreadcrumbItem>
          <BreadcrumbLink href="/">Components</BreadcrumbLink>
        </BreadcrumbItem>
        <BreadcrumbSeparator />
        <BreadcrumbItem>
          <BreadcrumbPage>Breadcrumb</BreadcrumbPage>
        </BreadcrumbItem>
      </BreadcrumbList>
    </Breadcrumb>
  );
}

Custom Separator

Customize the separator between breadcrumb items.

import { Breadcrumb } from "@tilt-legal/cubitt-components/primitives";
import { House } from "@tilt-legal/cubitt-icons/ui/outline";

export default function Component() {
  return (
    <Breadcrumb>
      <BreadcrumbList>
        <BreadcrumbItem>
          <BreadcrumbLink href="/">
            <House className="size-4" />
          </BreadcrumbLink>
        </BreadcrumbItem>
        <BreadcrumbSeparator>
          <div className="mx-1 rounded-full size-1 bg-zinc-400 dark:bg-zinc-600" />
        </BreadcrumbSeparator>
        <BreadcrumbItem>
          <BreadcrumbLink href="/">Components</BreadcrumbLink>
        </BreadcrumbItem>
        <BreadcrumbSeparator>
          <div className="mx-1 rounded-full size-1 bg-zinc-400 dark:bg-zinc-600" />
        </BreadcrumbSeparator>
        <BreadcrumbItem>
          <BreadcrumbPage>Breadcrumb</BreadcrumbPage>
        </BreadcrumbItem>
      </BreadcrumbList>
    </Breadcrumb>
  );
}

API Reference

The root breadcrumb component. Renders a nav element with aria-label="breadcrumb".

Prop	Type	Default	Description
`className`	`string`	-	Additional CSS classes to apply

Extends all standard HTML nav element props.

BreadcrumbList

Container for breadcrumb items. Renders an ol element.

Prop	Type	Default	Description
`className`	`string`	-	Additional CSS classes to apply

Extends all standard HTML ol element props.

BreadcrumbItem

Individual breadcrumb item container. Renders a li element.

Prop	Type	Default	Description
`className`	`string`	-	Additional CSS classes to apply

Extends all standard HTML li element props.

BreadcrumbLink

Breadcrumb link component. Renders an a element by default.

Prop	Type	Default	Description
`render`	`ReactElement`	-	Custom element to render as the link
`href`	`string`	-	Link destination
`className`	`string`	-	Additional CSS classes to apply

Extends all standard HTML a element props.

BreadcrumbPage

Represents the current page in the breadcrumb. Renders a span element with aria-current="page".

Prop	Type	Default	Description
`className`	`string`	-	Additional CSS classes to apply

Extends all standard HTML span element props.

BreadcrumbSeparator

Visual separator between breadcrumb items. Renders a li element with role="presentation".

Prop	Type	Default	Description
`children`	`React.ReactNode`	ChevronRight	Custom separator content
`className`	`string`	-	Additional CSS classes to apply

Extends all standard HTML li element props. By default, renders a ChevronRight icon that rotates in RTL layouts.

Breadcrumb

On this page