Navigation - Breadcrumbs

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

Open this breadcrumb example in new window
<nav class="nhsuk-breadcrumb" aria-label="Breadcrumb">
  <div class="nhsuk-width-container">
    <ol class="nhsuk-breadcrumb__list">
      <li class="nhsuk-breadcrumb__item"><a class="nhsuk-breadcrumb__link" href="/level-one">Level one</a></li>
      <li class="nhsuk-breadcrumb__item"><a class="nhsuk-breadcrumb__link" href="/level-one/level-two">Level two</a></li>
      <li class="nhsuk-breadcrumb__item"><a class="nhsuk-breadcrumb__link" href="/level-one/level-two/level-three">Level three</a></li>
    <p class="nhsuk-breadcrumb__back"><a class="nhsuk-breadcrumb__backlink" href="/level-one/level-two/level-three">Back to Level three</a></p>
{% 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 can't find what they want on the page.

When not to use breadcrumbs

Don’t 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 don't break a breadcrumb if it doesn't fit the line.

You don't 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.

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


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

We took out the breadcrumb links when we tested our pages in transactional journeys (in more than 3 labs). We thought that having extra links would distract users and that fewer people would complete the journey. As we expected, we found that users didn’t miss the links because they were focused on the task.

Get in touch to share your research findings about this pattern.

Help improve this page

The manual is a community effort. Anyone can help improve and grow it.

To help make sure the Breadcrumbs guidance is useful, relevant and up to date, you can:

Need help?

If you’ve got a question about the NHS digital service manual or want to feedback, get in touch.

Updated: January 2019