Navigation - Breadcrumbs

Use breadcrumbs to help users understand where they are in the website.

Copy code

<nav class="hse-breadcrumb" aria-label="Breadcrumb">
  <div class="hse-width-container">
    <ol class="hse-breadcrumb__list">
      <li class="hse-breadcrumb__item"><a class="hse-breadcrumb__link" href="/level-one">Level one</a></li>
      <li class="hse-breadcrumb__item"><a class="hse-breadcrumb__link" href="/level-one/level-two">Level two</a></li>
      <li class="hse-breadcrumb__item"><a class="hse-breadcrumb__link" href="/level-one/level-two/level-three">Level three</a></li>
    </ol>
    <p class="hse-breadcrumb__back"><a class="hse-breadcrumb__backlink" href="/level-one/level-two/level-three">Back to Level three</a></p>
  </div>
</nav>

Nunjucks

Nunjucks macro options

Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.

Some options are required for the macro to work; these are marked as "Required" in the option description.

If you're using Nunjucks macros in production with "html" options, or ones ending with "html", you must sanitise the HTML to protect against cross-site scripting exploits.

Nunjucks arguments for default breadcrumbs
Name	Type	Required	Description
Name items	Type array	Required true	Description Array of breadcrumbs item objects.
Name items[].text	Type string	Required true	Description Text to use within the breadcrumbs item.
Name items[].href	Type string	Required false	Description The value of the breadcrumb item link href attribute.
Name items[].attributes	Type object	Required false	Description HTML attributes (for example data attributes) to add to the individual crumb.
Name text	Type string	Required true	Description Text to use for the current page.
Name href	Type string	Required true	Description The value of the current page link href attribute.
Name classes	Type string	Required false	Description Classes to add to the container.
Name attributes	Type object	Required false	Description HTML attributes (for example data attributes) to add to the container.

Copy code

{% from 'breadcrumb/macro.njk' import breadcrumb %}

{{ breadcrumb({
  items: [
    {
      href: "/level-one",
      text: "Level one"
    },
    {
      href: "/level-one/level-two",
      text: "Level two"
    }
  ],
  href: "/level-one/level-two/level-three",
  text: "Level three"
}) }}

When to use breadcrumbs

Use breadcrumbs to give users context and let them move back or up a level if they cannot find what they want on the page.

When not to use breadcrumbs

Do not use breadcrumbs in transactional journeys as they can get in the way of the user completing the task.

How to use breadcrumbs

Breadcrumbs should display the current location in the site’s hierarchical structure, not the session history.

Breadcrumb trails should start with a link to the homepage.

On mobile, we replace the full breadcrumb trail with a "Back to [parent]" link.

Interactive states for breadcrumbs

There are 3 interactive states:

default
hover
active

Breadcrumb states follow the same pattern as in-text links.

Accessibility

We use aria-label="breadcrumb" as a label in the nav element to let people who use screen readers know what it is.

We add aria-hidden="true" to the svg icons to hide them from people who use screen readers.

Research

The NHS tested breadcrumbs on pages with lots of content about conditions or medicines. People noticed them and appreciated the context they gave. People also used them to get back to where they came from or to get back home.

The NHS took out the breadcrumb links when they tested pages in transactional journeys (in more than 3 labs). They thought that having extra links would distract users and that fewer people would complete the journey. They found that users did not miss the links because they were focused on the task.

Updated: August 2023