Breadcrumb

Breadcrumb navigation primitive — a pure, presentational compound. Domain- agnostic and prop-driven: no data, no routing, no JSON-LD. Composition lives in the caller (or @evolve-storefront/layout), which maps its own trail onto these parts and binds its own localized <Link> via BreadcrumbLink asChild.

import { Breadcrumb } from "@evolve-storefront/ui/breadcrumbs";

Preview

DefaultOpen in Storybook ↗

Usage

<Breadcrumb aria-label={t("breadcrumb")}>
  <BreadcrumbList>
    <BreadcrumbItem>
      <BreadcrumbLink asChild><Link href="/">{t("home")}</Link></BreadcrumbLink>
    </BreadcrumbItem>
    <BreadcrumbSeparator />
    <BreadcrumbItem>
      <BreadcrumbPage>{product.name}</BreadcrumbPage>
    </BreadcrumbItem>
  </BreadcrumbList>
</Breadcrumb>;

Props

No props of its own.

Change the layout

Pass children to Breadcrumb to arrange its parts yourself. Every part is exported from @evolve-storefront/ui/breadcrumbs.

<Breadcrumb aria-label={t("breadcrumb")}>
  <BreadcrumbList>
    <BreadcrumbItem>
      <BreadcrumbLink asChild><Link href="/">{t("home")}</Link></BreadcrumbLink>
    </BreadcrumbItem>
    <BreadcrumbSeparator />
    <BreadcrumbItem>
      <BreadcrumbPage>{product.name}</BreadcrumbPage>
    </BreadcrumbItem>
  </BreadcrumbList>
</Breadcrumb>;

BreadcrumbEllipsisCollapsed-trail affordance.

Prop	Type	Description
label?	string

Any other props go to the root element, like on a plain HTML element.

BreadcrumbItemOne step in the trail.

No props of its own.

BreadcrumbLinkThe link to an ancestor page.

Prop	Type	Description
asChild?	boolean

Any other props go to the root element, like on a plain HTML element.

BreadcrumbListThe ordered list of items inside Breadcrumb.

No props of its own.

BreadcrumbPageThe current page — unlinked, marked aria-current="page".

No props of its own.

BreadcrumbSeparatorThe glyph between two items, hidden from assistive technology.

No props of its own.

Examples

Single Item

// A top-level page: the trail is the current page alone, with no separator.
<Breadcrumb aria-label={t("breadcrumb")}>
  <BreadcrumbList>
    <BreadcrumbItem><BreadcrumbPage>{t("account")}</BreadcrumbPage></BreadcrumbItem>
  </BreadcrumbList>
</Breadcrumb>;

Open in Storybook ↗

Collapsed

// The middle of a deep trail collapses into one ellipsis item.
<BreadcrumbList>
  <BreadcrumbItem>…</BreadcrumbItem>
  <BreadcrumbSeparator />
  <BreadcrumbItem><BreadcrumbEllipsis label={t("more")} /></BreadcrumbItem>
  <BreadcrumbSeparator />
  …
</BreadcrumbList>;

Open in Storybook ↗