Breadcrumbs

Implemented

Hierarchical path indicator with separator. Last item is current page (aria-current='page'). variant='bar' absorbs the former BreadcrumbBar molecule (Wave 3 Tier-1 / L2-M3).

Categorymolecules

Sourcepatterns/molecules/breadcrumbs.html

AI HintHierarchical trail for wayfinding. variant='bar' is the storefront page-level treatment (absorbs the former BreadcrumbBar).

Ordered page trail for hierarchical navigation.

molecules

Renders an ordered breadcrumb trail inside a nav landmark. The last item is the current page (aria-current="page") and is never linked.

Usage

Pass an ordered items array; every item with an href renders as a link except the last, which marks the current page.

import { Breadcrumbs } from '@epasslive/design-system'

<Breadcrumbs
  items={[
    { label: 'Home', href: '/' },
    { label: 'Concerts', href: '/concerts' },
    { label: 'OSM Outdoor 2026' },
  ]}
/>

Props

Prop

Type

Default

Description

items*

BreadcrumbItem[]

—

Ordered trail items — label plus optional href/id.

ariaLabel

string

"Breadcrumb"

Accessible name for the nav landmark.

separator

React.ReactNode

—

Custom separator between items (defaults to "/").

variant

"default" | "bar"

"default"

Compact trail vs storefront page-level bar.

className

string

—

Additional CSS classes.

id

string

—

Stable id for the nav element.

Props

Preview

Breadcrumbs

Prop

Type

Required

Default

Description

items

BreadcrumbItem[]

Required

—

1-5 items (optional stable id per item)

variant

'default' | 'bar'

Optional

'default'

'bar' = storefront page-level treatment (py-4, gap spacing, semibold current item)

ariaLabel

string

Optional

'Breadcrumb'

Accessible name for the nav landmark. English default — pass a localized label.

separator

React.ReactNode

Optional

'/' (aria-hidden)

Separator node between crumbs. Defaults to an aria-hidden '/'.

className

string

Optional

—

Additional CSS classes on the nav container.

id

string

Optional

generated useId

Stable root id (also used to key items when item ids are omitted).

Quick use:<Breadcrumbs />

Accessibility

ARIA rolenavigation

Usage

Import

tsxSnippet

import { Breadcrumbs } from "@epasslive/design-system"

Example 1

tsxSnippet

<Breadcrumbs items={[{ label: 'Home', href: '/' }, { label: 'Events' }]} ariaLabel='Breadcrumb' />

Example 2

tsxSnippet

<Breadcrumbs items={sectionTrail} variant='bar' />

Anti-patterns

— Do not hardcode data in molecules

— Avoid complex business logic in molecules