Breadcrumbs

Breadcrumbs help users navigate to a previous page or section. They also help screen reader users understand where they are in the website.

Usage guidance

Accessibility features

• Helps screen reader identify content to users by using aria-label="Breadcrumbs"
• Helps screen readers identify lists to users, like how many items there are and which item is in focus
• Helps screen readers identify navigation by using a <nav> element

Usage

Accessible Astro exports two breadcrumb-related components:

• Breadcrumbs: The wrapper for breadcrumbs
• BreadcrumbsItem: The component that defines a single breadcrumb item

Props

Breadcrumbs Props

Breadcrumbs does not have any props. It accepts one or more BreadcrumbItem component(s) in the default slot.

BreadcrumbsItem Props

• label
  • Description: The label text to display for this breadcrumb
  • Type: string
• currentPage
  • Description: When set to true, the breadcrumb item will not be wrapped in a link. When set to false, the breadcrumb item will be wrapped in a link to href.
  • Type: boolean
  • Default: false
• href
  • Description: An optional path to link this breadcrumb item to
  • Type: string
  • Default: "#"

Example

---

1. Home
2. Blog
3. My blog post

---

---
import { Breadcrumbs, BreadcrumbsItem } from 'accessible-astro-components'
---
<Breadcrumbs>
  <BreadcrumbsItem
    href="/"
    label="Home"
  />
  <BreadcrumbsItem
    href="/blog"
    label="Blog"
  />
  <BreadcrumbsItem
    currentPage={true}
    label="My blog post"
  />
</Breadcrumbs>

Style customization

Customize styles by:

• setting individual properties with a :global(body .{class) selector (see Anatomy for class name reference)
• setting a global style tag to define styles

Anatomy

Class	Use
breadcrumbs	The root class for the breadcrumbs component
breadcrumbs__item	An individual item in the breadcrumbs component

Example

<style lang="scss" is:global>
  body .breadcrumbs__item {
    li::after {
      content: '>';
    }
  }
</style>