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.

Footer default

Open this example in a new tab: Footer default

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"
      }
    ]
  }
}) }}

Footer with copyright text only

Open this example in a new tab: Footer with copyright text only

© NHS England

Code

Markup

<footer class="nhsuk-footer" role="contentinfo">
  <div class="nhsuk-width-container">
    <div class="nhsuk-footer__meta">
      <p class="nhsuk-body-s">© NHS England</p>
    </div>
  </div>
</footer>

Macro

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

{{ footer() }}

Footer with custom copyright text

Open this example in a new tab: Footer with custom copyright text

© East London NHS Foundation Trust

Code

Markup

<footer class="nhsuk-footer" role="contentinfo">
  <div class="nhsuk-width-container">
    <div class="nhsuk-footer__meta">
      <p class="nhsuk-body-s">© East London NHS Foundation Trust</p>
    </div>
  </div>
</footer>

Macro

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

{{ footer({
  copyright: {
    text: "© East London NHS Foundation Trust"
  }
}) }}

Footer with meta and navigation

Open this example in a new tab: Footer with meta and navigation

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"
      }
    ]
  }
}) }}

Footer with meta (links and text)

Open this example in a new tab: Footer with meta (links and text)

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">All content is available under the Open Government Licence v3.0, 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"
  },
  meta: {
    text: "All content is available under the Open Government Licence v3.0, except where otherwise stated.",
    items: [
      {
        href: "#",
        text: "Accessibility statement"
      },
      {
        href: "#",
        text: "Contact us"
      },
      {
        href: "#",
        text: "Cookies"
      },
      {
        href: "#",
        text: "Privacy policy"
      },
      {
        href: "#",
        text: "Terms and conditions"
      }
    ]
  }
}) }}

Footer with multiple navigation groups

Open this example in a new tab: Footer with multiple navigation groups

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"
        }
      ]
    }
  ]
}) }}

Footer with multiple navigation groups and custom HTML

Open this example in a new tab: Footer with multiple navigation groups and custom HTML

Manchester University NHS Foundation Trust (MFT) 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).

Cobbett House, Manchester University NHS Foundation Trust, Oxford Road, Manchester, M13 9WL

© 2025 – Manchester University NHS Foundation Trust

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>'
    }
  ]
}) }}

Footer with multiple titled navigation groups

Open this example in a new tab: Footer with multiple titled navigation groups

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"
        }
      ]
    }
  ]
}) }}

Footer with single navigation group

Open this example in a new tab: Footer with single navigation group

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"
      }
    ]
  }
}) }}

Footer with single navigation group (empty items)

Open this example in a new tab: Footer with single navigation group (empty items)

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"
      }
    ]
  }
}) }}