Skip to main content

This is an internal development app.

To learn how to design and build digital services, visit the design system in the NHS digital service manual for guidance and examples.

Footer

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

Code

Markup

<footer class="nhsuk-footer" role="contentinfo">
  <div class="nhsuk-width-container">
    <div class="nhsuk-footer__meta">
      <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="#">Accessibility statement</a>
        </li>
        <li class="nhsuk-footer__list-item">
          <a class="nhsuk-footer__list-item-link" href="#">Contact us</a>
        </li>
        <li class="nhsuk-footer__list-item">
          <a class="nhsuk-footer__list-item-link" href="#">Cookies</a>
        </li>
        <li class="nhsuk-footer__list-item">
          <a class="nhsuk-footer__list-item-link" href="#">Privacy policy</a>
        </li>
        <li class="nhsuk-footer__list-item">
          <a class="nhsuk-footer__list-item-link" href="#">Terms and conditions</a>
        </li>
      </ul>
      <p class="nhsuk-body-s">© NHS England</p>
    </div>
  </div>
</footer>

Macro

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

{{ footer({
  meta: {
    items: [
      {
        href: "#",
        text: "Accessibility statement"
      },
      {
        href: "#",
        text: "Contact us"
      },
      {
        href: "#",
        text: "Cookies"
      },
      {
        href: "#",
        text: "Privacy policy"
      },
      {
        href: "#",
        text: "Terms and conditions"
      }
    ]
  }
}) }}
Code

Markup

<footer class="nhsuk-footer" role="contentinfo">
  <div class="nhsuk-width-container">
    <div class="nhsuk-footer__navigation nhsuk-grid-row">
      <div class="nhsuk-grid-column-one-quarter">
        <ul class="nhsuk-footer__list">
          <li class="nhsuk-footer__list-item">
            <a class="nhsuk-footer__list-item-link" href="#">Home</a>
          </li>
          <li class="nhsuk-footer__list-item">
            <a class="nhsuk-footer__list-item-link" href="#">Health A to Z</a>
          </li>
          <li class="nhsuk-footer__list-item">
            <a class="nhsuk-footer__list-item-link" href="#">Live Well</a>
          </li>
          <li class="nhsuk-footer__list-item">
            <a class="nhsuk-footer__list-item-link" href="#">Mental health</a>
          </li>
          <li class="nhsuk-footer__list-item">
            <a class="nhsuk-footer__list-item-link" href="#">Care and support</a>
          </li>
          <li class="nhsuk-footer__list-item">
            <a class="nhsuk-footer__list-item-link" href="#">Accessibility statement</a>
          </li>
          <li class="nhsuk-footer__list-item">
            <a class="nhsuk-footer__list-item-link" href="#">Pregnancy</a>
          </li>
          <li class="nhsuk-footer__list-item">
            <a class="nhsuk-footer__list-item-link" href="#">NHS services</a>
          </li>
          <li class="nhsuk-footer__list-item">
            <a class="nhsuk-footer__list-item-link" href="#">Coronavirus (COVID-19)</a>
          </li>
        </ul>
      </div>
      <div class="nhsuk-grid-column-one-quarter">
        <ul class="nhsuk-footer__list">
          <li class="nhsuk-footer__list-item">
            <a class="nhsuk-footer__list-item-link" href="#">NHS App</a>
          </li>
          <li class="nhsuk-footer__list-item">
            <a class="nhsuk-footer__list-item-link" href="#">Find my NHS number</a>
          </li>
          <li class="nhsuk-footer__list-item">
            <a class="nhsuk-footer__list-item-link" href="#">Your health records</a>
          </li>
          <li class="nhsuk-footer__list-item">
            <a class="nhsuk-footer__list-item-link" href="#">About the NHS</a>
          </li>
          <li class="nhsuk-footer__list-item">
            <a class="nhsuk-footer__list-item-link" href="#">Healthcare abroad</a>
          </li>
        </ul>
      </div>
      <div class="nhsuk-grid-column-one-quarter">
        <ul class="nhsuk-footer__list">
          <li class="nhsuk-footer__list-item">
            <a class="nhsuk-footer__list-item-link" href="#">Other NHS websites</a>
          </li>
          <li class="nhsuk-footer__list-item">
            <a class="nhsuk-footer__list-item-link" href="#">Profile editor login</a>
          </li>
        </ul>
      </div>
    </div>
    <div class="nhsuk-footer__meta">
      <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="#">About us</a>
        </li>
        <li class="nhsuk-footer__list-item">
          <a class="nhsuk-footer__list-item-link" href="#">Give us feedback</a>
        </li>
        <li class="nhsuk-footer__list-item">
          <a class="nhsuk-footer__list-item-link" href="#">Accessibility statement</a>
        </li>
        <li class="nhsuk-footer__list-item">
          <a class="nhsuk-footer__list-item-link" href="#">Our policies</a>
        </li>
        <li class="nhsuk-footer__list-item">
          <a class="nhsuk-footer__list-item-link" href="#">Cookies</a>
        </li>
      </ul>
      <p class="nhsuk-body-s">
        <svg class="nhsuk-u-static-margin-right-1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 41 17" aria-hidden="true" focusable="false" height="17" width="41">
          <path fill="currentColor" d="M35.77 12.4V.02l-4.3 2.8V16.8H41v-4.4Zm-10.38-.83a3.93 3.93 0 0 1-4.29.64 4.09 4.09 0 0 1-2.35-3.71 3.97 3.97 0 0 1 7.36-2.2l3.63-2.35A8.25 8.25 0 0 0 22.75.02c-3.1 0-5.8 1.74-7.22 4.3A8.3 8.3 0 0 0 8.3.02 8.4 8.4 0 0 0 0 8.5a8.4 8.4 0 0 0 8.3 8.48c3.1 0 5.8-1.75 7.22-4.32a8.17 8.17 0 0 0 12.7 2.2l1.64 1.93h.25V9.18h-6.79Zm-17.1 1.02A4.04 4.04 0 0 1 4.3 8.5c0-2.25 1.8-4.08 4-4.08s4 1.82 4 4.08c0 2.25-1.8 4.09-4 4.09"/>
        </svg>
        All content is available under the <a class="nhsuk-footer__list-item-link" href="https://www.nationalarchives.gov.uk/doc/open-government-licence/version/3/" rel="license">Open Government Licence v3.0</a>, except where otherwise stated.
      </p>
      <p class="nhsuk-body-s">© Crown copyright</p>
    </div>
  </div>
</footer>

Macro

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

{{ footer({
  copyright: {
    text: "© Crown copyright"
  },
  navigation: [
    {
      items: [
        {
          href: "#",
          text: "Home"
        },
        {
          href: "#",
          text: "Health A to Z"
        },
        {
          href: "#",
          text: "Live Well"
        },
        {
          href: "#",
          text: "Mental health"
        },
        {
          href: "#",
          text: "Care and support"
        },
        {
          href: "#",
          text: "Accessibility statement"
        },
        {
          href: "#",
          text: "Pregnancy"
        },
        {
          href: "#",
          text: "NHS services"
        },
        {
          href: "#",
          text: "Coronavirus (COVID-19)"
        }
      ]
    },
    {
      items: [
        {
          href: "#",
          text: "NHS App"
        },
        {
          href: "#",
          text: "Find my NHS number"
        },
        {
          href: "#",
          text: "Your health records"
        },
        {
          href: "#",
          text: "About the NHS"
        },
        {
          href: "#",
          text: "Healthcare abroad"
        }
      ]
    },
    {
      items: [
        {
          href: "#",
          text: "Other NHS websites"
        },
        {
          href: "#",
          text: "Profile editor login"
        }
      ]
    }
  ],
  meta: {
    html: '<p class="nhsuk-body-s">\n  <svg class="nhsuk-u-static-margin-right-1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 41 17" aria-hidden="true" focusable="false" height="17" width="41">\n    <path fill="currentColor" d="M35.77 12.4V.02l-4.3 2.8V16.8H41v-4.4Zm-10.38-.83a3.93 3.93 0 0 1-4.29.64 4.09 4.09 0 0 1-2.35-3.71 3.97 3.97 0 0 1 7.36-2.2l3.63-2.35A8.25 8.25 0 0 0 22.75.02c-3.1 0-5.8 1.74-7.22 4.3A8.3 8.3 0 0 0 8.3.02 8.4 8.4 0 0 0 0 8.5a8.4 8.4 0 0 0 8.3 8.48c3.1 0 5.8-1.75 7.22-4.32a8.17 8.17 0 0 0 12.7 2.2l1.64 1.93h.25V9.18h-6.79Zm-17.1 1.02A4.04 4.04 0 0 1 4.3 8.5c0-2.25 1.8-4.08 4-4.08s4 1.82 4 4.08c0 2.25-1.8 4.09-4 4.09"/>\n  </svg>\n  All content is available under the <a class="nhsuk-footer__list-item-link" href="https://www.nationalarchives.gov.uk/doc/open-government-licence/version/3/" rel="license">Open Government Licence v3.0</a>, except where otherwise stated.\n</p>',
    items: [
      {
        href: "#",
        text: "About us"
      },
      {
        href: "#",
        text: "Give us feedback"
      },
      {
        href: "#",
        text: "Accessibility statement"
      },
      {
        href: "#",
        text: "Our policies"
      },
      {
        href: "#",
        text: "Cookies"
      }
    ]
  }
}) }}
Code

Markup

<footer class="nhsuk-footer" role="contentinfo">
  <div class="nhsuk-width-container">
    <div class="nhsuk-footer__navigation nhsuk-grid-row">
      <div class="nhsuk-grid-column-one-quarter">
        <ul class="nhsuk-footer__list">
          <li class="nhsuk-footer__list-item">
            <a class="nhsuk-footer__list-item-link" href="#">Home</a>
          </li>
          <li class="nhsuk-footer__list-item">
            <a class="nhsuk-footer__list-item-link" href="#">Health A to Z</a>
          </li>
          <li class="nhsuk-footer__list-item">
            <a class="nhsuk-footer__list-item-link" href="#">NHS services</a>
          </li>
          <li class="nhsuk-footer__list-item">
            <a class="nhsuk-footer__list-item-link" href="#">Live Well</a>
          </li>
          <li class="nhsuk-footer__list-item">
            <a class="nhsuk-footer__list-item-link" href="#">Mental health</a>
          </li>
          <li class="nhsuk-footer__list-item">
            <a class="nhsuk-footer__list-item-link" href="#">Care and support</a>
          </li>
          <li class="nhsuk-footer__list-item">
            <a class="nhsuk-footer__list-item-link" href="#">Accessibility statement</a>
          </li>
          <li class="nhsuk-footer__list-item">
            <a class="nhsuk-footer__list-item-link" href="#">Pregnancy</a>
          </li>
          <li class="nhsuk-footer__list-item">
            <a class="nhsuk-footer__list-item-link" href="#">COVID-19</a>
          </li>
        </ul>
      </div>
      <div class="nhsuk-grid-column-one-quarter">
        <ul class="nhsuk-footer__list">
          <li class="nhsuk-footer__list-item">
            <a class="nhsuk-footer__list-item-link" href="#">NHS App</a>
          </li>
          <li class="nhsuk-footer__list-item">
            <a class="nhsuk-footer__list-item-link" href="#">Find my NHS number</a>
          </li>
          <li class="nhsuk-footer__list-item">
            <a class="nhsuk-footer__list-item-link" href="#">View your GP health records</a>
          </li>
          <li class="nhsuk-footer__list-item">
            <a class="nhsuk-footer__list-item-link" href="#">View your test results</a>
          </li>
          <li class="nhsuk-footer__list-item">
            <a class="nhsuk-footer__list-item-link" href="#">About the NHS</a>
          </li>
          <li class="nhsuk-footer__list-item">
            <a class="nhsuk-footer__list-item-link" href="#">Healthcare abroad</a>
          </li>
        </ul>
      </div>
      <div class="nhsuk-grid-column-one-quarter">
        <ul class="nhsuk-footer__list">
          <li class="nhsuk-footer__list-item">
            <a class="nhsuk-footer__list-item-link" href="#">Other NHS websites</a>
          </li>
          <li class="nhsuk-footer__list-item">
            <a class="nhsuk-footer__list-item-link" href="#">Profile editor login</a>
          </li>
        </ul>
      </div>
      <div class="nhsuk-grid-column-one-quarter">
        <ul class="nhsuk-footer__list">
          <li class="nhsuk-footer__list-item">
            <a class="nhsuk-footer__list-item-link" href="#">About us</a>
          </li>
          <li class="nhsuk-footer__list-item">
            <a class="nhsuk-footer__list-item-link" href="#">Give us feedback</a>
          </li>
          <li class="nhsuk-footer__list-item">
            <a class="nhsuk-footer__list-item-link" href="#">Accessibility statement</a>
          </li>
          <li class="nhsuk-footer__list-item">
            <a class="nhsuk-footer__list-item-link" href="#">Our policies</a>
          </li>
          <li class="nhsuk-footer__list-item">
            <a class="nhsuk-footer__list-item-link" href="#">Cookies</a>
          </li>
        </ul>
      </div>
    </div>
    <div class="nhsuk-footer__meta">
      <p class="nhsuk-body-s">© Crown copyright</p>
    </div>
  </div>
</footer>

Macro

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

{{ footer({
  copyright: {
    text: "© Crown copyright"
  },
  navigation: [
    {
      items: [
        {
          href: "#",
          text: "Home"
        },
        {
          href: "#",
          text: "Health A to Z"
        },
        {
          href: "#",
          text: "NHS services"
        },
        {
          href: "#",
          text: "Live Well"
        },
        {
          href: "#",
          text: "Mental health"
        },
        {
          href: "#",
          text: "Care and support"
        },
        {
          href: "#",
          text: "Accessibility statement"
        },
        {
          href: "#",
          text: "Pregnancy"
        },
        {
          href: "#",
          text: "COVID-19"
        }
      ]
    },
    {
      items: [
        {
          href: "#",
          text: "NHS App"
        },
        {
          href: "#",
          text: "Find my NHS number"
        },
        {
          href: "#",
          text: "View your GP health records"
        },
        {
          href: "#",
          text: "View your test results"
        },
        {
          href: "#",
          text: "About the NHS"
        },
        {
          href: "#",
          text: "Healthcare abroad"
        }
      ]
    },
    {
      items: [
        {
          href: "#",
          text: "Other NHS websites"
        },
        {
          href: "#",
          text: "Profile editor login"
        }
      ]
    },
    {
      items: [
        {
          href: "#",
          text: "About us"
        },
        {
          href: "#",
          text: "Give us feedback"
        },
        {
          href: "#",
          text: "Accessibility statement"
        },
        {
          href: "#",
          text: "Our policies"
        },
        {
          href: "#",
          text: "Cookies"
        }
      ]
    }
  ]
}) }}
Code

Markup

<footer class="nhsuk-footer" role="contentinfo">
  <div class="nhsuk-width-container">
    <div class="nhsuk-footer__navigation nhsuk-grid-row">
      <div class="nhsuk-grid-column-one-quarter">
        <ul class="nhsuk-footer__list">
          <li class="nhsuk-footer__list-item">
            <a class="nhsuk-footer__list-item-link" href="#">About us</a>
          </li>
          <li class="nhsuk-footer__list-item">
            <a class="nhsuk-footer__list-item-link" href="#">Give us feedback</a>
          </li>
          <li class="nhsuk-footer__list-item">
            <a class="nhsuk-footer__list-item-link" href="#">Accessibility statement</a>
          </li>
        </ul>
      </div>
      <div class="nhsuk-grid-column-one-quarter">
        <ul class="nhsuk-footer__list">
          <li class="nhsuk-footer__list-item">
            <a class="nhsuk-footer__list-item-link" href="#">Cookies</a>
          </li>
          <li class="nhsuk-footer__list-item">
            <a class="nhsuk-footer__list-item-link" href="#">Privacy policy</a>
          </li>
          <li class="nhsuk-footer__list-item">
            <a class="nhsuk-footer__list-item-link" href="#">Terms and conditions</a>
          </li>
        </ul>
      </div>
      <div class="nhsuk-grid-column-one-half">
        <p class="nhsuk-body-s nhsuk-u-margin-bottom-6"><strong>Manchester
        University NHS Foundation Trust (MFT)</strong> was formed on 1st
        October 2017 following the merger of Central Manchester University
        Hospitals NHS Foundation Trust (CMFT) and University Hospital of
        South Manchester NHS Foundation Trust (UHSM).</p>
      </div>
    </div>
    <div class="nhsuk-footer__navigation nhsuk-grid-row">
      <div class="nhsuk-grid-column-full">
        <p class="nhsuk-body-s">Cobbett House, Manchester University NHS
        Foundation Trust, Oxford Road, Manchester, M13 9WL</p>
      </div>
    </div>
    <div class="nhsuk-footer__meta">
      <p class="nhsuk-body-s">© 2025 – Manchester University NHS Foundation Trust</p>
    </div>
  </div>
</footer>

Macro

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

{{ footer({
  copyright: {
    text: "© 2025 – Manchester University NHS Foundation Trust"
  },
  columns: 3,
  navigation: [
    {
      width: "one-quarter",
      items: [
        {
          href: "#",
          text: "About us"
        },
        {
          href: "#",
          text: "Give us feedback"
        },
        {
          href: "#",
          text: "Accessibility statement"
        }
      ]
    },
    {
      width: "one-quarter",
      items: [
        {
          href: "#",
          text: "Cookies"
        },
        {
          href: "#",
          text: "Privacy policy"
        },
        {
          href: "#",
          text: "Terms and conditions"
        }
      ]
    },
    {
      width: "one-half",
      html: '<p class="nhsuk-body-s nhsuk-u-margin-bottom-6"><strong>Manchester\nUniversity NHS Foundation Trust (MFT)</strong> was formed on 1st\nOctober 2017 following the merger of Central Manchester University\nHospitals NHS Foundation Trust (CMFT) and University Hospital of\nSouth Manchester NHS Foundation Trust (UHSM).</p>'
    },
    {
      width: "full",
      html: '<p class="nhsuk-body-s">Cobbett House, Manchester University NHS\nFoundation Trust, Oxford Road, Manchester, M13 9WL</p>'
    }
  ]
}) }}
Code

Markup

<footer class="nhsuk-footer" role="contentinfo">
  <div class="nhsuk-width-container">
    <div class="nhsuk-footer__navigation nhsuk-grid-row">
      <div class="nhsuk-grid-column-one-quarter">
        <h2 class="nhsuk-footer__heading nhsuk-heading-s">Legal</h2>
        <ul class="nhsuk-footer__list">
          <li class="nhsuk-footer__list-item">
            <a class="nhsuk-footer__list-item-link" href="#">Looking after your data</a>
          </li>
          <li class="nhsuk-footer__list-item">
            <a class="nhsuk-footer__list-item-link" href="#">Freedom of information</a>
          </li>
          <li class="nhsuk-footer__list-item">
            <a class="nhsuk-footer__list-item-link" href="#">Modern Slavery and human trafficking statement</a>
          </li>
        </ul>
      </div>
      <div class="nhsuk-grid-column-one-quarter">
        <h2 class="nhsuk-footer__heading nhsuk-heading-s">Get in touch</h2>
        <ul class="nhsuk-footer__list">
          <li class="nhsuk-footer__list-item">
            <a class="nhsuk-footer__list-item-link" href="#">Contact us</a>
          </li>
          <li class="nhsuk-footer__list-item">
            <a class="nhsuk-footer__list-item-link" href="#">Press office</a>
          </li>
          <li class="nhsuk-footer__list-item">
            <a class="nhsuk-footer__list-item-link" href="#">Tell us what you think of our website</a>
          </li>
          <li class="nhsuk-footer__list-item">
            <a class="nhsuk-footer__list-item-link" href="#">RSS feeds</a>
          </li>
        </ul>
      </div>
      <div class="nhsuk-grid-column-one-quarter">
        <h2 class="nhsuk-footer__heading nhsuk-heading-s">Follow us</h2>
        <ul class="nhsuk-footer__list">
          <li class="nhsuk-footer__list-item">
            <a class="nhsuk-footer__list-item-link" href="#">LinkedIn</a>
          </li>
          <li class="nhsuk-footer__list-item">
            <a class="nhsuk-footer__list-item-link" href="#">YouTube</a>
          </li>
        </ul>
      </div>
    </div>
    <div class="nhsuk-footer__meta">
      <p class="nhsuk-body-s">© NHS England</p>
    </div>
  </div>
</footer>

Macro

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

{{ footer({
  navigation: [
    {
      title: "Legal",
      items: [
        {
          href: "#",
          text: "Looking after your data"
        },
        {
          href: "#",
          text: "Freedom of information"
        },
        {
          href: "#",
          text: "Modern Slavery and human trafficking statement"
        }
      ]
    },
    {
      title: "Get in touch",
      items: [
        {
          href: "#",
          text: "Contact us"
        },
        {
          href: "#",
          text: "Press office"
        },
        {
          href: "#",
          text: "Tell us what you think of our website"
        },
        {
          href: "#",
          text: "RSS feeds"
        }
      ]
    },
    {
      title: "Follow us",
      items: [
        {
          href: "#",
          text: "LinkedIn"
        },
        {
          href: "#",
          text: "YouTube"
        }
      ]
    }
  ]
}) }}
Code

Markup

<footer class="nhsuk-footer" role="contentinfo">
  <div class="nhsuk-width-container">
    <div class="nhsuk-footer__navigation nhsuk-grid-row">
      <div class="nhsuk-grid-column-one-quarter">
        <ul class="nhsuk-footer__list">
          <li class="nhsuk-footer__list-item">
            <a class="nhsuk-footer__list-item-link" href="#">Accessibility statement</a>
          </li>
          <li class="nhsuk-footer__list-item">
            <a class="nhsuk-footer__list-item-link" href="#">Contact us</a>
          </li>
          <li class="nhsuk-footer__list-item">
            <a class="nhsuk-footer__list-item-link" href="#">Cookies</a>
          </li>
          <li class="nhsuk-footer__list-item">
            <a class="nhsuk-footer__list-item-link" href="#">Privacy policy</a>
          </li>
          <li class="nhsuk-footer__list-item">
            <a class="nhsuk-footer__list-item-link" href="#">Terms and conditions</a>
          </li>
        </ul>
      </div>
    </div>
    <div class="nhsuk-footer__meta">
      <p class="nhsuk-body-s">© NHS England</p>
    </div>
  </div>
</footer>

Macro

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

{{ footer({
  navigation: {
    items: [
      {
        href: "#",
        text: "Accessibility statement"
      },
      {
        href: "#",
        text: "Contact us"
      },
      {
        href: "#",
        text: "Cookies"
      },
      {
        href: "#",
        text: "Privacy policy"
      },
      {
        href: "#",
        text: "Terms and conditions"
      }
    ]
  }
}) }}
Code

Markup

<footer class="nhsuk-footer" role="contentinfo">
  <div class="nhsuk-width-container">
    <div class="nhsuk-footer__navigation nhsuk-grid-row">
      <div class="nhsuk-grid-column-one-quarter">
        <ul class="nhsuk-footer__list">
          <li class="nhsuk-footer__list-item">
            <a class="nhsuk-footer__list-item-link" href="#">Accessibility statement</a>
          </li>
          <li class="nhsuk-footer__list-item">
            <a class="nhsuk-footer__list-item-link" href="#">Privacy policy</a>
          </li>
          <li class="nhsuk-footer__list-item">
            <a class="nhsuk-footer__list-item-link" href="#">Terms and conditions</a>
          </li>
        </ul>
      </div>
    </div>
    <div class="nhsuk-footer__meta">
      <p class="nhsuk-body-s">© NHS England</p>
    </div>
  </div>
</footer>

Macro

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

{{ footer({
  navigation: {
    items: [
      {
        href: "#",
        text: "Accessibility statement"
      },
      false,
      false,
      {
        href: "#",
        text: "Privacy policy"
      },
      {
        href: "#",
        text: "Terms and conditions"
      }
    ]
  }
}) }}