Navigation – Breadcrumbs

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

<nav class="nhsuk-breadcrumb" aria-label="Breadcrumb">
  <ol class="nhsuk-breadcrumb__list">
    <li class="nhsuk-breadcrumb__list-item">
      <a class="nhsuk-breadcrumb__link" href="#">
        Home
      </a>
    </li>
    <li class="nhsuk-breadcrumb__list-item">
      <a class="nhsuk-breadcrumb__link" href="#">
        NHS services
      </a>
    </li>
    <li class="nhsuk-breadcrumb__list-item">
      <a class="nhsuk-breadcrumb__link" href="#">
        Hospitals
      </a>
    </li>
  </ol>
  <a class="nhsuk-back-link" href="#">
    <span class="nhsuk-u-visually-hidden">Back to </span>Hospitals
  </a>
</nav>

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

{{ breadcrumb({
  items: [
    {
      href: "#",
      text: "Home"
    },
    {
      href: "#",
      text: "NHS services"
    },
    {
      href: "#",
      text: "Hospitals"
    }
  ]
}) }}

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

If the full breadcrumb trail does not fit the screen size, it can wrap onto 2 lines. Do not break the breadcrumb if it fits on 1 line.

If you put the back link in a different position, do not put it close to other links or buttons where it might distract users from what they need to do. Also think about people who use a screen reader: is the page read out in a logical order?

You do not need to show the current page in the breadcrumb because this information is in the H1.

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

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

Breadcrumbs on dark backgrounds

To show white links and arrows on dark backgrounds, add the variant: "reverse" option using Nunjucks. For HTML add the nhsuk-breadcrumb--reverse class to the breadcrumb.

Make sure all users can see the breadcrumbs. The background colour must have a contrast ratio of at least 4.5:1 with white to meet WCAG 2.2 success criterion 1.4.3 Contrast (minimum), level AA (W3C).

<nav class="nhsuk-breadcrumb nhsuk-breadcrumb--reverse" aria-label="Breadcrumb">
  <ol class="nhsuk-breadcrumb__list">
    <li class="nhsuk-breadcrumb__list-item">
      <a class="nhsuk-breadcrumb__link" href="#">
        Home
      </a>
    </li>
    <li class="nhsuk-breadcrumb__list-item">
      <a class="nhsuk-breadcrumb__link" href="#">
        NHS services
      </a>
    </li>
    <li class="nhsuk-breadcrumb__list-item">
      <a class="nhsuk-breadcrumb__link" href="#">
        Hospitals
      </a>
    </li>
  </ol>
  <a class="nhsuk-back-link nhsuk-back-link--reverse" href="#">
    <span class="nhsuk-u-visually-hidden">Back to </span>Hospitals
  </a>
</nav>

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

{{ breadcrumb({
  variant: "reverse",
  items: [
    {
      href: "#",
      text: "Home"
    },
    {
      href: "#",
      text: "NHS services"
    },
    {
      href: "#",
      text: "Hospitals"
    }
  ]
}) }}

Research

We tested breadcrumbs on pages with lots of content about conditions or medicines. They helped people understand their place on the website. 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.

We took out the breadcrumb links when we tested our pages in transactional journeys (in more than 3 labs). We thought that having breadcrumb links would distract users from completing the journey. We found that they did not need the breadcrumbs because they were focused on the task.

Help us improve this guidance

Share insights or feedback and take part in the discussion. We use GitHub as a collaboration space. All the information on it is open to the public.

Read more about how to feed back or share insights.

If you have any questions, get in touch with the service manual team.