Skip to main content

Navigation – Breadcrumbs

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

Information: Version 10

Breadcrumbs updated in August 2025

See breaking code updates to breadcrumbs in version 10

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

Open this example in a new tab: 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</span> Hospitals
  </a>

</nav>
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.

Primary options
Name Type Description
id string The ID of the breadcrumb.
items array Required. Array of breadcrumbs item objects. This should contain all pages in the breadcrumb except for the parent page. See macro options for items.
text string Required. Text to use for the parent page.
href string Required. The value of the parent page link href attribute.
classes string Classes to add to the container.
attributes object HTML attributes (for example data attributes) to add to the container.
labelText string Plain text label identifying the landmark to screen readers. Defaults to "Breadcrumb".
backLink object The back link used by the breadcrumbs component on mobile. See macro options for backLink.
Options for items array objects
Name Type Description
text string Required. Text to use within the breadcrumbs item.
href string The value of the breadcrumb item link href attribute.
attributes object HTML attributes (for example data attributes) to add to the individual crumb. 
{% 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.

Information: 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.

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: breadcrumbs reverse 
<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</span> Hospitals
  </a>

</nav>
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.

Primary options
Name Type Description
id string The ID of the breadcrumb.
items array Required. Array of breadcrumbs item objects. This should contain all pages in the breadcrumb except for the parent page. See macro options for items.
text string Required. Text to use for the parent page.
href string Required. The value of the parent page link href attribute.
classes string Classes to add to the container.
attributes object HTML attributes (for example data attributes) to add to the container.
labelText string Plain text label identifying the landmark to screen readers. Defaults to "Breadcrumb".
backLink object The back link used by the breadcrumbs component on mobile. See macro options for backLink.
Options for items array objects
Name Type Description
text string Required. Text to use within the breadcrumbs item.
href string The value of the breadcrumb item link href attribute.
attributes object HTML attributes (for example data attributes) to add to the individual crumb. 
{% 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: November 2025