ARIA Breadcrumb Design Pattern Example

This page requires updates per issue 187. Please provide any additional feedback in this issue.

This example shows the breadcrumb design pattern.

It is recommended authors use an ordered list to structure the list of links. Visual separators should be added through CSS.

Accessibility Feature

If markedup with a labelled nav element, the breadcrumb will be exposed as such.

Keyboard Support

No keyboard interaction needed.

ARIA Roles, Properties and States

Role Property/State Usage
aria-current with a value of page Mark the current page within the widget.

Source Code