Skip to main content

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

Open this footer example 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.

Help improve this page

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

To help make sure the Footer 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, you can contact the team:

Updated: January 2019