Breadcrumb Example (2024)

Table of Contents

Read This First About This Example Example Accessibility Features Keyboard Support Role, Property, State, and Tabindex Attributes JavaScript and CSS Source Code HTML Source Code

Breadcrumb Example

Read This First

The code in this example is not intended for production environments. Before using it for any purpose, read this to understand why.

This is an illustrative example of one way of using ARIA that conforms with the ARIA specification.

About This Example

The following example demonstrates the Breadcrumb Pattern.

Example

Accessibility Features

The set of links is structured using an ordered list .
A nav element labeled Breadcrumb identifies the structure as a breadcrumb trail and makes it a navigation landmark so that it is easy to locate.
To prevent screen reader announcement of the visual separators between links, they are added via CSS:
- The separators are part of the visual presentation that signifies the breadcrumb trail, which is already semantically represented by the nav element with its label of Breadcrumb. So, using a display technique that is not represented in the accessibility tree used by screen readers prevents redundant and potentially distracting verbosity.
- Each link has a border on one side that is skewed with the CSS’ transform property so it resembles a slash.

Keyboard Support

No keyboard interaction needed.

Role, Property, State, and Tabindex Attributes

Role	Attribute	Element	Usage
	`aria-label=Breadcrumb`	`nav`	Provides a label that describes the type of navigation provided in the `nav` element.
	`aria-current=page`	`a`	Applied to the last link in the set to indicate that it represents the current page.