Open UI
View Research

Breadcrumb (Design Guide)

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

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 representing the item can contain anchor or other elements and the li representing the divider should have aria-hidden="true"
  • The link or non-interactive element to the current page has aria-current=page.

Resources

Open Discussions