SDC Pattern Library

Breadcrumb

Rationale

To provide the user with a way-finding structure

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. This should be placed before a page’s main content.

  • The set of links is structured using an ordered list to provide semantic structure.
  • A nav element labeled Breadcrumb identifies the structure as a breadcrumb trail and makes it a navigation landmark so that it is easy to locate.
  • To prevent screen reader announcing the visual separators between links, they are added via CSS:
    • The separators are part of the visual presentation that signifies the breadcrumb trail. This is already semantically represented by the nav element with its aria-label of Breadcrumb. Therefore using a display technique that is not used by screen readers prevents redundant and potentially distracting verbosity.

Implementation

When implementing breadcrumbs ensure that the output is inline with no whitespace.

<li class="breadcrumb__item"><a href="#Another thing" class="breadcrumb__link pluto">Another thing</a></li><li class...

Not

<li class="breadcrumb__item">
  <a href="#Another thing" class="breadcrumb__link pluto">Another thing</a>
</li>

Research

Based upon W3 principles

Usage

Scope

Global

Dependencies

  • /components/_breadcrumb.scss
  • vars/_colours.scss
<nav class="breadcrumb" aria-label="Breadcrumb">
    <ol class="breadcrumb__items">
        <li class="breadcrumb__item"><a href="#Home" class="breadcrumb__link pluto">Home</a></li>
        <li class="breadcrumb__item"><a href="#Item one" class="breadcrumb__link pluto">Item one</a></li>
        <li class="breadcrumb__item"><a href="#Another thing" class="breadcrumb__link pluto">Another thing</a></li>
        <li class="breadcrumb__item"><a href="#The other thing" class="breadcrumb__link pluto">The other thing</a></li>
        <li class="breadcrumb__item breadcrumb__item--current pluto" aria-current="page">Current page</li>
    </ol>
</nav>
 
{
  "items": [
    {
      "item": "Home"
    },
    {
      "item": "Item one"
    },
    {
      "item": "Another thing"
    },
    {
      "item": "The other thing"
    }
  ],
  "current": "Current page"
}