Breadcrumbs
A navigation aid that allows users to keep track of their location within programs, documents, or websites.
Breadcrumbs provide a secondary navigation scheme that helps users orient themselves and navigate back up the site hierarchy.
Accessibility Features
- Semantic Nav: Uses
<nav aria-label="Breadcrumb">. - Item Separation: Separators are hidden from screen readers using
aria-hidden="true". - Current Page: The last item correctly uses
aria-current="page".
Usage Example
import { Breadcrumbs, BreadcrumbItem } from '@holmdigital/components'; <Breadcrumbs> <BreadcrumbItem href="/">Home</BreadcrumbItem> <BreadcrumbItem href="/components">Components</BreadcrumbItem> <BreadcrumbItem isCurrent>Breadcrumbs</BreadcrumbItem> </Breadcrumbs>