> ## Documentation Index
> Fetch the complete documentation index at: https://docs.getsabo.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Breadcrumb

> Hierarchical navigation trail with accessible semantics.

<Frame>
  <img src="https://mintcdn.com/aristotechnologiesinc/LH5aXxXQjZcsU-Hh/images/ui/breadcrumb-light.png?fit=max&auto=format&n=LH5aXxXQjZcsU-Hh&q=85&s=2d3d3c72fe23958ca202e3fffa753e43" alt="Breadcrumb component preview (light)" width="400" data-path="images/ui/breadcrumb-light.png" />
</Frame>

* **Location**: `sabo/src/components/ui/breadcrumb.tsx`

## When to use

* Show users where they are within a hierarchy; provide quick back navigation.
* Use for multi-level navigation (e.g., Home > Category > Product).

## Usage

```tsx theme={null}
import { Breadcrumb, BreadcrumbList, BreadcrumbItem, BreadcrumbLink, BreadcrumbSeparator, BreadcrumbPage } from "@/components/ui/breadcrumb";

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

## Key parts

<ParamField path="BreadcrumbLink">
  Renders a clickable link for intermediate items.
</ParamField>

<ParamField path="BreadcrumbPage">
  Renders the current page (non-clickable, `aria-current="page"`).
</ParamField>

<ParamField path="BreadcrumbSeparator">
  Visual separator between items (e.g., `/` or `>`).
</ParamField>

<ParamField path="BreadcrumbEllipsis">
  Collapsed items indicator for long trails; includes a screen‑reader label.
</ParamField>

## Styling tip

Use concise labels and consider collapsing middle segments on small screens.

```tsx theme={null}
<BreadcrumbList className="text-sm">...</BreadcrumbList>
```

## Accessibility

* `BreadcrumbList` is a `<nav>` with `aria-label="breadcrumb"`.
* `BreadcrumbPage` has `aria-current="page"` for the current location.
* Screen readers announce the full trail; keep labels descriptive.