Breadcrumbs

Description

Breadcrumbs (or a ‘breadcrumb trail’) are a form of navigation, consisting of a list of links arranged in a hierarchical or chronological order. Their purpose is to help users keep track of their location by showing the position of the current page in one of the following contexts:

• the structural hierarchy of the site’s pages;
• the categories of the current page;

You may also find examples of websites that use breadcrumbs to show the history of all the pages the user has visited in their current session, but this seems to be far less common. For the sake of this article, I will focus on the first two contexts: representing page structure; and representing nested categories.

Layout

The most common place for a breadcrumbs component to appear is before the main content of a page¹. It's usual to see a progression from least specific (the highest-level page or least specific category) to most specific category. The highest level page may be the homepage or the root of the current section.

Separation of breadcrumb items is usually indicated with either: a greater-than symbol (>), a forward slash (/), or a similar-looking icon.

Usage guidelines

Markup

For a page at the URL, example.com/parent-page/current-page the markup could look like this:

<nav aria-label="Breadcrumbs">
  <ol>
    <li>
      <a href="/">Homepage</a>
    </li>
    <li>
      <a href="/parent-page">Parent page</a>
    </li>
    <li aria-current="page">Current page</li>
  </ol>
</nav>

Notes:

• As breadcrumbs are a type of navigation you should put them in a <nav> element.
• The order of the items in a breadcrumb list is important: use an ordered list (<ol>) with an <li> for each breadcrumb item.
• Add a meaningful label such as aria-label="Breadcrumbs" to the <nav> element. This helps differentiate it from any other navigation landmarks in the current document, such as the primary navigation.²
• Add the aria-current="page" attribute to the item which represents the current page.

When to use this component

Breadcrumbs work best for websites based around a hierarchical structure, such as documentation or e-commerce websites. If everything is on a single level (e.g. posts on a blog), there’s no point.