Components / navigation

navigation · @awesome-ds/react

Breadcrumb

Hierarchical location trail.

Rules: rule.a11y.wcag-aa

State matrix

currentrequired

Anatomy

  • labelled navigation
  • ordered trail
  • current page

Keyboard contract

Links use native Tab and Enter behavior; the current page is not needlessly linked.

Screen-reader contract

Navigation has a caller-localizable name and aria-current marks the current page.

Content rules

  • Use page titles, not URLs.
  • Collapse only intermediate ancestors.

Public API

PropTyperequiredDescription
itemsBreadcrumbItem[]requiredHierarchy trail
ariaLabelstring—Localized navigation name

Adaptation contracts

RTL
Follow document direction for directional keys and visuals while preserving semantic order.
High contrast
Current, selected, expanded, and focus states remain distinct without fill alone.
Reduced motion
Move selection and disclosure state without animated travel.

Verification IDs

Breadcrumb/current-page, Breadcrumb/localized-label

Live

Live

Copyable example

import { Breadcrumb } from "@awesome-ds/react";

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