# Breadcrumb Trail

> Hierarchy with label truncation, collapsed levels, and a compact mobile fallback.

- Category: Navigation
- Kind: component
- Page: https://uaiblocks.dev/components/breadcrumb-trail
- Registry item: https://uaiblocks.dev/r/breadcrumb-trail.json
- Source: https://github.com/victor-teles/uai/blob/main/src/registry/uai/components/breadcrumb-trail.tsx

## Install

```bash
bunx shadcn@latest add https://uaiblocks.dev/r/breadcrumb-trail.json
```

## Usage

```tsx
"use client";

import {
  BreadcrumbTrail,
  BreadcrumbTrailCollapsed,
  BreadcrumbTrailItem,
  type BreadcrumbTrailVariant,
} from "@/components/ui/uai/breadcrumb-trail";

export function BreadcrumbTrailPreview({
  variant = "chevron",
}: {
  variant?: BreadcrumbTrailVariant;
}) {
  return (
    <div style={{ display: "grid", gap: 20 }}>
      <BreadcrumbTrail variant={variant}>
        <BreadcrumbTrailItem href="#workspace">Northwind</BreadcrumbTrailItem>
        <BreadcrumbTrailCollapsed label="Show 2 more levels">
          <BreadcrumbTrailItem href="#projects">Projects</BreadcrumbTrailItem>
          <BreadcrumbTrailItem href="#launches">2026 launches</BreadcrumbTrailItem>
        </BreadcrumbTrailCollapsed>
        <BreadcrumbTrailItem href="#q3" parent>
          Q3 mobile release
        </BreadcrumbTrailItem>
        <BreadcrumbTrailItem current>Accessibility review checklist</BreadcrumbTrailItem>
      </BreadcrumbTrail>
      <BreadcrumbTrail variant={variant} compact aria-label="Breadcrumb, compact">
        <BreadcrumbTrailItem href="#workspace">Northwind</BreadcrumbTrailItem>
        <BreadcrumbTrailItem href="#q3" parent>
          Q3 mobile release
        </BreadcrumbTrailItem>
        <BreadcrumbTrailItem current>Accessibility review checklist</BreadcrumbTrailItem>
      </BreadcrumbTrail>
    </div>
  );
}
```

## Anatomy

- `BreadcrumbTrail`
  - `BreadcrumbTrailItem`
  - `BreadcrumbTrailCollapsed`

## Accessibility

- Renders a labelled nav landmark with an ordered list. The current page uses aria-current="page".
- Separators are decorative and hidden from assistive technology. Truncated labels keep their full text in the title.
- The ellipsis is a named button; revealing hidden levels moves focus to the first revealed link.
- The compact fallback keeps only the parent as a back link, with the full "Back to" name for screen readers.