Skip to main content
Back to Home

Breadcrumb

An accessible breadcrumb navigation component that helps users understand their location in the site hierarchy. Uses proper ARIA markup and semantic HTML.

Basic Usage

Breadcrumbs show the current page location in the navigation hierarchy.

import { AccessibleBreadcrumb } from '@a13y/react';

const items = [
  { label: 'Home', href: '/' },
  { label: 'Products', href: '/products' },
  { label: 'Electronics', href: '/products/electronics' },
  { label: 'Laptop' }
];

function Example() {
  return <AccessibleBreadcrumb items={items} />;
}

Breadcrumb Props

NameTypeDefaultDescription
items*BreadcrumbItem[]-Array of breadcrumb items with label and optional href
separatorReactNode"/"Custom separator between breadcrumb items
classNamestring-Optional CSS class for the breadcrumb container

BreadcrumbItem Props

NameTypeDefaultDescription
label*string-Text to display for the breadcrumb item
hrefstring-URL for the breadcrumb link (omit for current page)

Accessibility Features

  • ✓Uses nav element with aria-label="Breadcrumb"
  • ✓Current page marked with aria-current="page"
  • ✓Semantic ordered list structure
  • ✓Clear visual distinction between links and current page