Skip to main content

Internal review app NHS.UK frontend

Use design system guidance and examples to build consistent, accessible NHS services for the public and staff.

Deployed automatically from main branch (opens in new tab).

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 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: "#"
  }
}) }}