Footer

Use the footer to show users they are on an NHS service and to help them find links they expect at the bottom of our pages.

Code and design

Open in new window
Copy
<footer role="contentinfo">
  <div class="nhsuk-footer" id="nhsuk-footer">
    <div class="nhsuk-width-container">
      <h2 class="nhsuk-u-visually-hidden">Support links</h2>
      <ul class="nhsuk-footer__list">
        <li class="nhsuk-footer__list-item"><a class="nhsuk-footer__list-item-link" href="https://www.nhs.uk/Pages/nhs-sites.aspx">NHS sites</a></li>
        <li class="nhsuk-footer__list-item"><a class="nhsuk-footer__list-item-link" href="https://www.nhs.uk/about-us">About us</a></li>
        <li class="nhsuk-footer__list-item"><a class="nhsuk-footer__list-item-link" href="https://www.nhs.uk/contact-us/">Contact us</a></li>
        <li class="nhsuk-footer__list-item"><a class="nhsuk-footer__list-item-link" href="https://www.nhs.uk/about-us/sitemap/">Sitemap</a></li>
        <li class="nhsuk-footer__list-item"><a class="nhsuk-footer__list-item-link" href="https://www.nhs.uk/our-policies/">Our policies</a></li>
      </ul>

      <p class="nhsuk-footer__copyright">&copy; Crown copyright</p>
    </div>
  </div>
</footer>
Copy
{% from 'footer/macro.njk' import footer %}

{{ footer({
  "links": [
    {
      "URL": "https://www.nhs.uk/Pages/nhs-sites.aspx",
      "label": "NHS sites"
    },
    {
      "URL": "https://www.nhs.uk/about-us",
      "label": "About us"
    },
    {
      "URL": "https://www.nhs.uk/contact-us/",
      "label": "Contact us"
    },
    {
      "URL": "https://www.nhs.uk/about-us/sitemap/",
      "label": "Sitemap"
    },
    {
      "URL": "https://www.nhs.uk/our-policies/",
      "label": "Our policies"
    }
  ]
})}}

Use this footer at the bottom of every page if your service is part of the new NHS.UK website.

Do not use this footer for transactional services.

At the moment, we are only using it for the new NHS.UK website. We are considering how to use it on other NHS Digital sites and services on the NHS.UK domain including transactional journeys.

If your service is not part of NHS.UK, get in touch on the NHS.UK service manual Slack workspace or email service-manual@nhs.net.

How not to use the footer

Avoid adding more links to the footer. Keep them to a minimum.

Product owners can decide whether or not to use all the links in the example.

If you have more information to add about how to use the footer, please let us know on the NHS.UK service manual Slack workspace or email service-manual@nhs.net.

Research

Get in touch to share your research findings if you've used this pattern.

Discuss

Discuss the footer on GitHub

Get in touch

If you have a question:

Updated: January 2019

Similar components