Skip to content
Open UI

Breadcrumb (Design Guide)


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




  • <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:

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


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.


Open Discussions