Breadcrumb

Installation

pnpm dlx saastro add breadcrumb

cd apps/ui
REGISTRY_URL=http://localhost:3456/r node ../../packages/saastro/dist/index.js add breadcrumb --yes

pnpm add tailwind-variants

Usage

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

<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

<Breadcrumb>
  <BreadcrumbList>
    <BreadcrumbItem>
      <BreadcrumbLink href="/">Home</BreadcrumbLink>
    </BreadcrumbItem>
    <BreadcrumbSeparator />
    <BreadcrumbItem>
      <BreadcrumbPage>Current Page</BreadcrumbPage>
    </BreadcrumbItem>
  </BreadcrumbList>
</Breadcrumb>

With Ellipsis

Use BreadcrumbEllipsis to show a collapsed state when the path is too long.

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

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

Custom Separator

Pass a custom separator as a child to BreadcrumbSeparator.

<Breadcrumb>
  <BreadcrumbList>
    <BreadcrumbItem>
      <BreadcrumbLink href="/">Home</BreadcrumbLink>
    </BreadcrumbItem>
    <BreadcrumbSeparator>/</BreadcrumbSeparator>
    <BreadcrumbItem>
      <BreadcrumbPage>Current Page</BreadcrumbPage>
    </BreadcrumbItem>
  </BreadcrumbList>
</Breadcrumb>

Components

Breadcrumb

The root container with aria-label="breadcrumb".

BreadcrumbList

The ordered list (<ol>) containing the breadcrumb items.

BreadcrumbItem

A list item (<li>) wrapping each breadcrumb element.

BreadcrumbLink

A link (<a>) for navigable breadcrumb items.

BreadcrumbPage

A span for the current page (non-clickable) with aria-current="page".

BreadcrumbSeparator

A visual separator between items. Defaults to a chevron icon.

BreadcrumbEllipsis

A collapsed indicator for long paths.

Props

BreadcrumbLink

All Components

Accessibility

• Uses semantic <nav> element with aria-label="breadcrumb"
• Current page is marked with aria-current="page"
• Separators are marked with aria-hidden="true" and role="presentation"
• Uses ordered list (<ol>) for proper semantic structure