Breadcrumb

Hierarchical navigation that shows the current page in context.

Built on Workshop1 compositionUpstream API

Usage

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

Use breadcrumbs when a page sits in a meaningful hierarchy. Every ancestor is a link; the current page is BreadcrumbPage. Collapse distant middle levels with BreadcrumbEllipsis when the trail is long, but retain enough context to understand the location.

Do not use breadcrumbs for a sequence of steps or browser history. Keep labels aligned with page titles and preserve the same hierarchy across sibling pages.

Accessibility

The root is a nav labelled “breadcrumb”, separators are hidden from assistive technology, and the current page carries aria-current="page".