Breadcrumb (Editor's Draft)

Overview

Breadcrumbs are navigation landmarks used to show a user's location within a website or application.

Use Cases

A <breadcrumb /> trail consists of a list of links to the parent pages of the current page in hierarchical order. It helps users find their place within a website or web application. Breadcrumbs are often placed horizontally before or as the first component of a page's main content.

Prior Art/Examples

Anatomy

Diagram

Show slots

Structure

<breadcrumb> - The root element that has the semantics of a navigation [required]
<ordered-list> - The list containing items and dividers [required]
<list-item> - The wrapper to items or divider content [required]

Proposed HTML:

<nav>
  <ol>
    <li><a>Item 1</a></li>
    <li aria-hidden="true">/</li>
    <li><a>Item 2</a></li>
  </ol>
</nav>

Accessibility

The Breadcrumb is composed by:

A nav equivalent wrapper that should always have aria-label or aria-labelledby, though this may be redundant if we provide additional context to the nav element.
An ordered list
li items and dividers where the li represeting the item can contain anchor or other elements and the li represeting the divider should have aria-hidden="true"
The link or non-interactive element to the current page has aria-current=page.