Skip to content

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.

PropTypeDefaultDescription
classstring''Additional CSS classes to apply to the breadcrumbs wrapper
ariaLabelstring'Breadcrumbs'The label for the breadcrumbs navigation
PropTypeDefaultDescription
hrefstring'#'The URL the breadcrumb item links to
labelstring'Breadcrumb'The text to display (or screen reader text when using icons)
currentPagebooleanfalseWhether this item represents the current page
hasIconbooleanfalseWhether this item displays an icon instead of text
classstring''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 appropriate aria-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>

Interactive examples

See the Breadcrumbs component in action with these practical examples demonstrating different variants and styling options.

Default style

With home icon

Custom separator