Breadcrumb

These examples are used for automated tests and may not follow service manual best practice.

Breadcrumb default

Open this example in a new tab: Breadcrumb default

Code

Markup

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

Macro

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

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

Breadcrumb reverse

Open this example in a new tab: Breadcrumb reverse

Code

Markup

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

Macro

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

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

Breadcrumb with back link as a button

Open this example in a new tab: Breadcrumb with back link as a button

Code

Markup

<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="#">Search results</a>
    </li>
  </ol>
  <button class="nhsuk-back-link">
    <span class="nhsuk-u-visually-hidden">Back to</span> Search results
  </button>
  
</nav>

Macro

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

{{ breadcrumb({
  items: [
    {
      href: "#",
      text: "Home"
    },
    {
      href: "#",
      text: "Search results"
    }
  ],
  backLink: {
    element: "button"
  }
}) }}

Breadcrumb with back link custom text

Open this example in a new tab: Breadcrumb with back link custom text

Code

Markup

<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="#">Advanced search</a>
    </li>
  </ol>
  <a class="nhsuk-back-link" href="#">
    <span class="nhsuk-u-visually-hidden">Back to</span> Search results
  </a>
  
</nav>

Macro

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

{{ breadcrumb({
  items: [
    {
      href: "#",
      text: "Home"
    },
    {
      href: "#",
      text: "Advanced search"
    }
  ],
  backLink: {
    text: "Search results",
    href: "#"
  }
}) }}