Breadcrumbs

molecules

Hierarchical path indicator with separator. Last item is current page (aria-current='page').

ARIA Role: navigation

Demo

Props

PropTypeRequiredDefaultDescription
itemsBreadcrumbItem[]Yes—1-5 items

TypeScript Interface

interface BreadcrumbsProps {
  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 has aria-current='page'(WAI-ARIA Breadcrumb Pattern)

Usage

Import

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

Basic

<Breadcrumbs />

With Variants

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