BreadcrumbBar

molecules

Page-level breadcrumb — same as core Breadcrumbs but with storefront visual treatment (larger spacing).

ARIA Role: navigation

Demo

Props

PropTypeRequiredDefaultDescription
itemsBreadcrumbItem[]Yes—1-5 items

TypeScript Interface

interface BreadcrumbBarProps {
  items: { label: string; href?: string }[];
  ariaLabel?: string;
}

Assertions (NASA Rule 5)

  • [type]items bounded 1-5 (NASA Rule 2)(NASA Rule 2)
  • [aria]<nav aria-label='Breadcrumb'>; last item aria-current='page'(WAI-ARIA Breadcrumb Pattern)

Usage

Import

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

Basic

<Breadcrumbbar />

With Variants

<Breadcrumbbar variant="primary" size="md" />