Breadcrumb

Installation#

# One-time setup (tokens + lib helpers)
npx koalaui-cli@latest init

# Add this component (its dependencies come along)
npx koalaui-cli@latest add breadcrumb

Usage#

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

export function Example() {
  return (
    <Breadcrumb>
      <BreadcrumbList>
        <BreadcrumbItem>
          <BreadcrumbLink href="/">Home</BreadcrumbLink>
        </BreadcrumbItem>
        <BreadcrumbSeparator />
        <BreadcrumbItem>
          <BreadcrumbPage>Dashboard</BreadcrumbPage>
        </BreadcrumbItem>
      </BreadcrumbList>
    </Breadcrumb>
  )
}

Anatomy#

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

<Breadcrumb>
  <BreadcrumbList>
    <BreadcrumbItem>
      <BreadcrumbLink />
    </BreadcrumbItem>
    <BreadcrumbSeparator />
    <BreadcrumbItem>
      <BreadcrumbEllipsis />
    </BreadcrumbItem>
    <BreadcrumbSeparator />
    <BreadcrumbItem>
      <BreadcrumbPage />
    </BreadcrumbItem>
  </BreadcrumbList>
</Breadcrumb>

Custom separator#

Pass any content to BreadcrumbSeparator to replace the default caret - a text slash, a custom icon, or any node.

Collapsed#

Use BreadcrumbEllipsis inside a BreadcrumbItem to indicate hidden ancestors - a static indicator. To let users open the collapsed segments, swap it for the dropdown below.

Dropdown#

Make the collapsed segment interactive: drop a DropdownMenu into the BreadcrumbItem so the ellipsis opens a menu of the hidden ancestors - full keyboard navigation and focus management come from the underlying Radix primitive. The dots sit in a container that reveals its surface on hover and while open, so the collapsed crumb reads as a tappable control, with a 40px tap target.

Sibling navigation#

Turn the current crumb into the trigger: its label plus a caret that rotates on open, dropping a menu of sibling pages so users can jump sideways without going back up.

Grouped menu#

Compose the menu’s parts inside a breadcrumb - a DropdownMenuLabel, a DropdownMenuSeparator, and items that lead with an icon (auto-sized to size-4).

With icon#

Lead a crumb with an icon - keep it inline with the label and sized to the text (size-4) so the row stays on one baseline.

As child#

Use asChild on BreadcrumbLink to merge its styles onto a different element - e.g. a Next.js Link - via Radix Slot, with no extra wrapper.

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

export function Example() {
  return (
    <Breadcrumb>
      <BreadcrumbList>
        <BreadcrumbItem>
          <BreadcrumbLink asChild>
            <Link href="/">Home</Link>
          </BreadcrumbLink>
        </BreadcrumbItem>
        <BreadcrumbSeparator />
        <BreadcrumbItem>
          <BreadcrumbPage>Dashboard</BreadcrumbPage>
        </BreadcrumbItem>
      </BreadcrumbList>
    </Breadcrumb>
  )
}

API reference#

FAQ#