Breadcrumb Trail

Install

Install manually View source on GitHub

Anatomy

BreadcrumbTrail
BreadcrumbTrailItem
BreadcrumbTrailCollapsed

Accessibility4 checks

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.

Navigation and layout

Code example

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>  );}

Manual installation

breadcrumb-trail.tsx

Loading component source…