Breadcrumb overview

Headless breadcrumb is a structural slot contract for navigation trails. It does not resolve current pages, collapse long paths, or generate links for you; owners bring those decisions in their own markup.

import {
  TngBreadcrumb,
  TngBreadcrumbList,
  TngBreadcrumbItem,
  TngBreadcrumbLink,
  TngBreadcrumbSeparator,
} from '@tailng-ui/primitives';

Basic composition

Compose a navigation landmark, an ordered list, linked ancestors, and a current-page text node. The primitive gives you stable slot hooks and a decorative separator contract.

<nav tngBreadcrumb aria-label="Docs path">
  <ol tngBreadcrumbList>
    <li tngBreadcrumbItem><a tngBreadcrumbLink href="/">Home</a></li>
    <li tngBreadcrumbSeparator>/</li>
    <li tngBreadcrumbItem><a tngBreadcrumbLink href="/docs">Docs</a></li>
    <li tngBreadcrumbSeparator>/</li>
    <li tngBreadcrumbItem><span aria-current="page">Breadcrumb</span></li>
  </ol>
</nav>

Accessibility baseline

• Ancestor links stay native anchors and use the browser’s normal Tab order.
• Mark the current segment with aria-current="page" on the visible current node.
• tngBreadcrumbSeparator renders with aria-hidden="true".
• Collapsed or disabled states are owner-authored in headless markup; the primitive does not infer them.