Navigation - Breadcrumbs

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

Version 10

Breadcrumbs updated in August 2025

See updates to breadcrumbs in version 10

WCAG 2.2: Make sure that users can successfully interact with breadcrumbs.

<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&nbsp;</span>Hospitals</a>

</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
id	string	false	The ID of the breadcrumb.
items	array	true	Array of breadcrumbs item objects. This should contain all pages in the breadcrumb except for the parent page.
items[].text	string	true	Text to use within the breadcrumbs item.
items[].href	string	false	The value of the breadcrumb item link href attribute.
items[].attributes	object	false	HTML attributes (for example data attributes) to add to the individual crumb.
text	string	true	Text to use for the parent page.
href	string	true	The value of the parent page link href attribute.
classes	string	false	Classes to add to the container.
attributes	object	false	HTML attributes (for example data attributes) to add to the container.
labelText	string	false	Plain text label identifying the landmark to screen readers. Defaults to "Breadcrumb".

{% 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 doesn't fit the screen size, it can wrap onto 2 lines, but do not break a breadcrumb if it doesn't fit the line.

WCAG 2.2

Make sure no other interactive elements are too close to the breadcrumbs. This is to make sure users can easily interact with the breadcrumbs. This is to comply with WCAG 2.2 success criterion 2.5.8 Target Size (W3C).

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

Use the nhsuk-breadcrumb--reverse modifier class to show white links and arrows on dark backgrounds.

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).

Open this example in a new tab

HTML

<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" href="#"><span class="nhsuk-u-visually-hidden">Back to&nbsp;</span>Hospitals</a>

</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 reverse breadcrumbs
Name	Type	Required	Description
id	string	false	The ID of the breadcrumb.
items	array	true	Array of breadcrumbs item objects. This should contain all pages in the breadcrumb except for the parent page.
items[].text	string	true	Text to use within the breadcrumbs item.
items[].href	string	false	The value of the breadcrumb item link href attribute.
items[].attributes	object	false	HTML attributes (for example data attributes) to add to the individual crumb.
text	string	true	Text to use for the parent page.
href	string	true	The value of the parent page link href attribute.
classes	string	false	Classes to add to the container.
attributes	object	false	HTML attributes (for example data attributes) to add to the container.
labelText	string	false	Plain text label identifying the landmark to screen readers. Defaults to "Breadcrumb".

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

{{ breadcrumb({
  classes: "nhsuk-breadcrumb--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.

Feed back or share insights on GitHub

Read more about how to feed back or share insights.

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

Updated: September 2025