Breadcrumb

Hierarchical page navigation

NavigationStable

Preview

Interactive preview of the Breadcrumb component with different variants.

Installation

Install the package via npm:

bash
npm install apex-design-system

Import

tsx
import { Breadcrumb, BreadcrumbItem, BreadcrumbLink } from 'apex-design-system';

Basic Usage

tsx
<Breadcrumb>
  <BreadcrumbItem>
    <BreadcrumbLink href="/">Home</BreadcrumbLink>
  </BreadcrumbItem>
  <BreadcrumbItem>
    <BreadcrumbLink href="/docs">Docs</BreadcrumbLink>
  </BreadcrumbItem>
  <BreadcrumbItem>
    <BreadcrumbLink>Current Page</BreadcrumbLink>
  </BreadcrumbItem>
</Breadcrumb>

Accessibility

This component follows WAI-ARIA best practices and is WCAG 2.1 AA compliant. It includes proper keyboard navigation, focus management, and screen reader support.

View in StorybookView source