Breadcrumbs
Introduction
The Breadcrumbs component provides a navigation aid that helps users understand their current location within a website’s hierarchy. It uses semantic HTML and follows WAI-ARIA best practices for navigation, ensuring both visual clarity and accessibility.
When to use
Breadcrumbs are perfect for websites with hierarchical navigation structures, helping users understand their location and navigate efficiently. They’re especially useful for:
- Multi-level navigation structures
- E-commerce product categories
- Documentation websites
- Content management systems
- Any site where showing the user’s location in the hierarchy is helpful
Usage
Learn how to implement the Breadcrumbs component in your project, from basic usage to advanced variants.
Basic
---import { Breadcrumbs, BreadcrumbsItem } from 'accessible-astro-components'---
<Breadcrumbs> <BreadcrumbsItem href="/" label="Home" /> <BreadcrumbsItem href="/products" label="Products" /> <BreadcrumbsItem label="Current Page" currentPage={true} /></Breadcrumbs>
Variants
The BreadcrumbsItem component offers flexibility in its visual presentation through different separator styles and icon support.
<Breadcrumbs> {/* Home icon variant */} <BreadcrumbsItem href="/" label="Home" hasIcon> <Icon name="ion:home" slot="icon" /> </BreadcrumbsItem>
{/* Custom separator variant */} <BreadcrumbsItem href="/docs" label="Documentation"> <span slot="separator" class="separator" aria-hidden="true"> <Icon name="ion:chevron-forward-outline" /> </span> </BreadcrumbsItem>
<BreadcrumbsItem label="Current Page" currentPage={true} /></Breadcrumbs>
Props
Configure the Breadcrumbs and BreadcrumbsItem components using these available props to customize their behavior and appearance.
Breadcrumbs
Prop | Type | Default | Description |
---|---|---|---|
class | string | '' | Additional CSS classes to apply to the breadcrumbs wrapper |
ariaLabel | string | 'Breadcrumbs' | The label for the breadcrumbs navigation |
BreadcrumbsItem
Prop | Type | Default | Description |
---|---|---|---|
href | string | '#' | The URL the breadcrumb item links to |
label | string | 'Breadcrumb' | The text to display (or screen reader text when using icons) |
currentPage | boolean | false | Whether this item represents the current page |
hasIcon | boolean | false | Whether this item displays an icon instead of text |
class | string | '' | Additional CSS classes to apply to the item |
Accessibility
Accessibility isn’t an afterthought - it’s built into the core of this component through semantic HTML elements and careful consideration of user interactions. The Breadcrumbs component is built with accessibility in mind:
- Uses semantic
<nav>
element with appropriatearia-label
- Proper list structure with
<ol>
for screen readers - Current page indicated with
aria-current="page"
- Icons include screen reader text via
sr-only
class - Separators are hidden from screen readers with
aria-hidden="true"
- Automatic light/dark mode color adaptation
Styling
Make the Breadcrumbs component your own with custom styling while maintaining its accessibility features.
/* Option 1: Using :global() in your style block */<style> :global(.breadcrumbs .list) { display: flex; align-items: center; gap: 0.5rem; }
:global(.breadcrumbs a) { color: light-dark(hsl(215 25% 27%), hsl(215 25% 89%)); text-decoration: none; }
:global(.breadcrumbs a:hover) { text-decoration: underline; }
:global(.breadcrumbs .separator) { color: light-dark(hsl(215 8% 45%), hsl(215 8% 65%)); }</style>
/* Option 2: Using is:global on the style tag */<style is:global> .breadcrumbs .list { display: flex; align-items: center; gap: 0.5rem; }
.breadcrumbs a { color: light-dark(hsl(215 25% 27%), hsl(215 25% 89%)); text-decoration: none; }
.breadcrumbs a:hover { text-decoration: underline; }
.breadcrumbs .separator { color: light-dark(hsl(215 8% 45%), hsl(215 8% 65%)); }</style>
<Breadcrumbs class="text-gray-600 dark:text-gray-400"> <BreadcrumbsItem href="/" label="Home" class="hover:text-gray-900 dark:hover:text-gray-100" > <span slot="separator" class="text-gray-400 dark:text-gray-600"> <Icon name="ion:chevron-forward" /> </span> </BreadcrumbsItem></Breadcrumbs>
Interactive examples
See the Breadcrumbs component in action with these practical examples demonstrating different variants and styling options.