Skip to main content

​
Overview

Breadcrumb provides semantic path navigation with explicit slot components.
  • Use it for hierarchy and orientation (Home / Docs / API).
  • Do not use it as a stepper or a tab replacement.
The root is a real <nav aria-label="breadcrumb">, and the current page is represented with aria-current="page".

​
Installation

npm i @kuzenbo/core

​
Import

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

​
Basic Example

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

export function DocsBreadcrumb() {
  return (
    <Breadcrumb>
      <BreadcrumbList>
        <BreadcrumbItem>
          <BreadcrumbLink href="/">Home</BreadcrumbLink>
        </BreadcrumbItem>
        <BreadcrumbSeparator />
        <BreadcrumbItem>
          <BreadcrumbLink href="/docs">Docs</BreadcrumbLink>
        </BreadcrumbItem>
        <BreadcrumbSeparator />
        <BreadcrumbItem>
          <BreadcrumbPage>Breadcrumb</BreadcrumbPage>
        </BreadcrumbItem>
      </BreadcrumbList>
    </Breadcrumb>
  );
}

​
Advanced Example

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

export function OverflowBreadcrumb() {
  return (
    <Breadcrumb>
      <BreadcrumbList>
        <BreadcrumbItem>
          <BreadcrumbLink href="/">Home</BreadcrumbLink>
        </BreadcrumbItem>
        <BreadcrumbSeparator />
        <BreadcrumbItem>
          <BreadcrumbEllipsis />
        </BreadcrumbItem>
        <BreadcrumbSeparator />
        <BreadcrumbItem>
          <BreadcrumbLink href="/docs/components">Components</BreadcrumbLink>
        </BreadcrumbItem>
        <BreadcrumbSeparator />
        <BreadcrumbItem>
          <BreadcrumbPage>Breadcrumb</BreadcrumbPage>
        </BreadcrumbItem>
      </BreadcrumbList>
    </Breadcrumb>
  );
}

​
Size Scale

Breadcrumb supports xs | sm | md | lg | xl sizing on the root and all subprimitives. 
import {
  Breadcrumb,
  BreadcrumbItem,
  BreadcrumbLink,
  BreadcrumbList,
  BreadcrumbPage,
  BreadcrumbSeparator,
} from "@kuzenbo/core/ui/breadcrumb";

export function SizedBreadcrumb() {
  return (
    <Breadcrumb size="lg">
      <BreadcrumbList>
        <BreadcrumbItem>
          <BreadcrumbLink href="/">Home</BreadcrumbLink>
        </BreadcrumbItem>
        <BreadcrumbSeparator />
        <BreadcrumbItem>
          <BreadcrumbLink href="/docs" size="sm">
            Docs
          </BreadcrumbLink>
        </BreadcrumbItem>
        <BreadcrumbSeparator size="sm" />
        <BreadcrumbItem>
          <BreadcrumbPage>Breadcrumb</BreadcrumbPage>
        </BreadcrumbItem>
      </BreadcrumbList>
    </Breadcrumb>
  );
}

​
API Reference

Root navigation container with aria-label.
​
size
UISize
default:"md"
Size of the breadcrumb: xs | sm | md | lg | xl.
Ordered list wrapper (<ol>).
​
size
UISize
default:"md"
Size override for the list.
Individual list item container.
​
size
UISize
default:"md"
Size override for the item.
Interactive ancestor link. Supports Base UI render composition for custom link components.
​
size
UISize
default:"md"
Size override for the link.
​
render
ReactElement
Custom render function for polymorphic composition (e.g., Next.js Link).
Current location marker with aria-current="page".
​
size
UISize
default:"md"
Size override for the page.
Visual separator between items. Defaults to arrow icon.
​
size
UISize
default:"md"
Size override for the separator.
Compact overflow marker for deep paths.
​
size
UISize
default:"md"
Size override for the ellipsis.

​
Accessibility

  • Keep breadcrumb order aligned with real navigation hierarchy.
  • Exactly one item should be BreadcrumbPage for the current location.
  • If you use BreadcrumbEllipsis, provide another path-discovery mechanism (menu, sitemap, parent page links).

​
SSR and RSC Notes

  • Breadcrumb markup is server-friendly and works in RSC.
  • When paths are dynamic, compute breadcrumb segments on the server and render links directly.
  • Use a client boundary only when breadcrumbs depend on client-only state.

​
Styling and Tokens

  • Default styles already use semantic tokens (text-muted-foreground, text-foreground).
  • Keep separators subtle; avoid saturated custom colors that compete with page headings.
  • Use spacing and typography primitives for hierarchy before adding extra decoration.

​
Troubleshooting

  • Breadcrumb is not announced as navigation: keep Breadcrumb as the root so aria-label="breadcrumb" remains present.
  • Current page still looks clickable: use BreadcrumbPage instead of BreadcrumbLink for the final item.
  • Overflow paths become unreadable: collapse middle segments with BreadcrumbEllipsis.

Build docs developers (and LLMs) love

Get started for freeTalk to us