Breadcrumb

A navigation pattern that shows the user's current location within a site hierarchy.

React Vue Svelte Astro

Demo

Basic Breadcrumb

A simple breadcrumb trail showing the path to the current page.

Long Path

A deeper navigation path with multiple levels of hierarchy.

Open demo only →

Accessibility Features

WAI-ARIA Roles

Role	Target Element	Description
`navigation`	`<nav>` element	Provides a navigation landmark for assistive technology (implicit role of `<nav>`)

WAI-ARIA Properties

`aria-label`

Labels the navigation landmark for screen readers

Values: Breadcrumb (or localized)
Required: Yes

`aria-current`

Identifies the current page within the breadcrumb trail

Values: page
Required: Yes (on last item)

WAI-ARIA States

`aria-current`

Target Element: Last item in the breadcrumb (current page)
Values: page
Required: Yes
Change Trigger: Indicates the current page location within the breadcrumb navigation.

Keyboard Support

Key	Action
`Tab`	Move focus between breadcrumb links
`Enter`	Activate the focused link

Breadcrumb uses native <a> element behavior for keyboard interaction. No additional keyboard handlers are required.

References

WAI-ARIA Breadcrumb Pattern (opens in new tab)

Source Code

Breadcrumb.astro

---
/**
 * Breadcrumb component following WAI-ARIA APG pattern
 * @see https://www.w3.org/WAI/ARIA/apg/patterns/breadcrumb/
 */

export interface BreadcrumbItem {
  label: string;
  href?: string;
}

export interface Props {
  items: BreadcrumbItem[];
  ariaLabel?: string;
  class?: string;
}

const { items, ariaLabel = 'Breadcrumb', class: className } = Astro.props;
---

{
  items.length > 0 && (
    <nav aria-label={ariaLabel} class:list={['apg-breadcrumb', className]}>
      <ol class="apg-breadcrumb-list">
        {items.map((item, index) => {
          const isLast = index === items.length - 1;
          return (
            <li class="apg-breadcrumb-item">
              {item.href && !isLast ? (
                <a href={item.href} class="apg-breadcrumb-link">
                  {item.label}
                </a>
              ) : (
                <span aria-current={isLast ? 'page' : undefined} class="apg-breadcrumb-current">
                  {item.label}
                </span>
              )}
            </li>
          );
        })}
      </ol>
    </nav>
  )
}

Usage

Example

---
import Breadcrumb from './Breadcrumb.astro';

const items = [
  { label: 'Home', href: '/' },
  { label: 'Products', href: '/products' },
  { label: 'Current Product' }
];
---

<Breadcrumb items={items} />

API

Prop	Type	Default	Description
`items`	BreadcrumbItem[]	required	Array of breadcrumb items
`ariaLabel`	string	"Breadcrumb"	Accessible label for the navigation
`class`	string	-	Additional CSS class

Testing

Tests verify APG compliance across ARIA attributes, semantic structure, and accessibility requirements. The Breadcrumb component uses a two-layer testing strategy.

Testing Strategy

Unit Tests (Testing Library)

Verify the component's rendered output using framework-specific testing libraries. These tests ensure correct HTML structure and ARIA attributes.

HTML structure (nav, ol, li elements)
ARIA attributes (aria-label, aria-current)
Link rendering and href values
Accessibility via jest-axe

E2E Tests (Playwright)

Verify component behavior in a real browser environment across all frameworks. These tests cover interactions and cross-framework consistency.

Keyboard navigation (Tab, Enter)
ARIA structure in live browser
axe-core accessibility scanning
Cross-framework consistency checks

Test Categories

High Priority: APG ARIA Attributes

Test	Description
`nav element`	Uses semantic `<nav>` element
`aria-label`	Navigation has accessible label (default: "Breadcrumb")
`aria-current="page"`	Last item has aria-current="page"
`ol/li structure`	Uses ordered list for proper semantic structure

High Priority: Keyboard Interaction

Test	Description
`Tab navigation`	Tab moves focus between breadcrumb links
`Enter activation`	Enter key activates focused link
`Current page not focusable`	Last item (span) is not in tab order

Medium Priority: Accessibility

Test	Description
`axe violations`	No WCAG 2.1 AA violations (via jest-axe)
`Custom aria-label`	Can override default label via ariaLabel prop
`Separator hidden`	Visual separators are hidden from assistive technology

Low Priority: Component Behavior

Test	Description
`Renders all items`	All provided items are rendered in order
`Links have href`	Non-current items render as links with correct href
`className merge`	Custom classes are merged with component classes

Low Priority: Cross-framework Consistency

Test	Description
`All frameworks have nav`	React, Vue, Svelte, Astro all render breadcrumb navigation
`Same item count`	All frameworks render the same number of breadcrumb items
`Current page marked`	All frameworks mark the last item with aria-current="page"

Testing Tools

Vitest (opens in new tab) - Test runner for unit tests
Testing Library (opens in new tab) - Framework-specific testing utilities (React, Vue, Svelte)
Playwright (opens in new tab) - Browser automation for E2E tests
axe-core/playwright (opens in new tab) - Automated accessibility testing in E2E

See testing-strategy.md (opens in new tab) for full documentation.

Resources

WAI-ARIA APG: Breadcrumb Pattern (opens in new tab)
MDN: Breadcrumb Navigation (opens in new tab)
AI Implementation Guide (llm.md) (opens in new tab) - ARIA specs, keyboard support, test checklist