Avala Design
← Components/patterns

Breadcrumb

Carbon-spec breadcrumb navigation. Renders a list of links with chevron separators, with the current page rendered as plain text (aria-current).

patternsstablea11y: untested3/3 coverageEdit on GitHub ↗

Live playground

Edit the JSX below — preview updates instantly. Switch brand × tone in the toolbar to see the same component re-themed in place.

LiveOpen all variants in Storybook ↗
Edit JSX — preview updates livereact-live
import { Breadcrumb, BreadcrumbItem, BreadcrumbLink, BreadcrumbList } from "@avala/design";

<Breadcrumb>
  <BreadcrumbItem />
  <BreadcrumbLink />
  <BreadcrumbList />
</Breadcrumb>

All variants

The Storybook stories file rendered as an iframe — every variant, every size, every state, baselined for visual regression.

patterns-breadcrumb--defaultOpen in Storybook →

When to use

  • Hierarchical navigation trail at the top of a page (Datasets / Sequence #42 / Frame 0010).
  • Anywhere the user benefits from seeing where they are in a content tree and being able to jump back up.

When not to use

  • Flat top-level navigation between sibling pages → use `NavigationMenu`.
  • A back-button affordance on its own → use a plain `Button` kind="ghost" with a leading chevron.
  • Step-by-step progress through a workflow → use `ProgressIndicator`.