Breadcrumb Example

About This Example

The following example demonstrates the Breadcrumb Pattern.

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.

No keyboard interaction needed.

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.

To copy the following HTML code, please open it in CodePen.