Breadcrumbs

The path to the current page, one link per level.

Default

<Breadcrumb>
  <BreadcrumbList>
    <BreadcrumbItem>
      <BreadcrumbLink href="/docs">Docs</BreadcrumbLink>
    </BreadcrumbItem>
    <BreadcrumbSeparator />
    <BreadcrumbItem>
      <BreadcrumbLink href="/docs/design">Design</BreadcrumbLink>
    </BreadcrumbItem>
    <BreadcrumbSeparator />
    <BreadcrumbItem>
      <BreadcrumbPage>Breadcrumbs</BreadcrumbPage>
    </BreadcrumbItem>
  </BreadcrumbList>
</Breadcrumb>

Collapsed

Custom separator & disabled

Custom separator: pass children to BreadcrumbSeparator (here a slash). Disabled: mark the link aria-disabled and drop pointer events.

<BreadcrumbSeparator>/</BreadcrumbSeparator>

{/* disabled crumb */}
<BreadcrumbLink href="#" aria-disabled="true"
  class="pointer-events-none opacity-50">Archive</BreadcrumbLink>

Dropdown & link component

Dropdown: the ellipsis is a trigger — compose it with a menu to expand collapsed crumbs. Link component: BreadcrumbLink takes render={<a/>} to swap in a framework link (Astro, Next…).

{/* Dropdown: ellipsis triggers a menu of collapsed crumbs */}
<BreadcrumbItem>
  <button class="flex items-center gap-1">
    <BreadcrumbEllipsis />
  </button>
</BreadcrumbItem>

{/* Link component: render prop swaps in a framework Link */}
<BreadcrumbLink render={<a href="/docs" />}>Docs</BreadcrumbLink>

Markdown for agents: /design/breadcrumbs.md · spec: /design.md