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.

WCAG 2.2

WCAG 2.2 affects this component

To meet new success criteria introduced in the Web Content Accessibility Guidelines (WCAG) 2.2, make sure that users can successfully:

See the full list of design system changes to meet WCAG 2.2.

Open this default footer example in a new tab
Copy default footer code 
<footer role="contentinfo">
  <div class="nhsuk-footer-container">
    <div class="nhsuk-width-container">
      <h2 class="nhsuk-u-visually-hidden">Support links</h2>
      <div class="nhsuk-footer">

        <ul class="nhsuk-footer__list">
          <li class="nhsuk-footer__list-item nhsuk-footer-default__list-item">
            <a class="nhsuk-footer__list-item-link" href="#">Accessibility statement</a>
          </li>
          <li class="nhsuk-footer__list-item nhsuk-footer-default__list-item">
            <a class="nhsuk-footer__list-item-link" href="#">Contact us</a>
          </li>
          <li class="nhsuk-footer__list-item nhsuk-footer-default__list-item">
            <a class="nhsuk-footer__list-item-link" href="#">Cookies</a>
          </li>
          <li class="nhsuk-footer__list-item nhsuk-footer-default__list-item">
            <a class="nhsuk-footer__list-item-link" href="#">Privacy policy</a>
          </li>
          <li class="nhsuk-footer__list-item nhsuk-footer-default__list-item">
            <a class="nhsuk-footer__list-item-link" href="#">Terms and conditions</a>
          </li>
        </ul>
        <div>
          <p class="nhsuk-footer__copyright">© NHS England</p>
        </div>
      </div>

    </div>
  </div>
</footer>
Close default footer code
Nunjucks macro options

Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.

Some options are required for the macro to work; these are marked as "Required" in the option description.

If you're using Nunjucks macros in production with "html" options, or ones ending with "html", you must sanitise the HTML to protect against cross-site scripting exploits.

Nunjucks arguments for default footer
Name Type Required Description
links array false Contains the array of the first column of footer link items.
links[].url string false Href attribute for a footer link item in the first column.
links[].label string true The label for a footer link item in the first column.
linksColumn2 array false Contains the array of the second column of footer link items.
linksColumn2[].url string false Href attribute for a footer link item in the second column.
linksColumn2[].label string true The label for a footer link item in the second column.
linksColumn3 array false Contains the array of the third column of footer link items.
linksColumn3[].url string false Href attribute for a footer link item in the third column.
linksColumn3[].label string true The label for a footer link item in the third column.
copyright string false Optional text for the copyright notice in the footer.
classes string false Classes to add to the footer container.
attributes object false HTML attributes (for example data attributes) to add to the footer container.
metaLinks array false Contains the array of key policy footer link items.
metaLinks[].url string false Href attribute for a key policy footer link item.
metaLinks[].label string true The label for a key policy footer link item.
Copy default footer code 
{% from 'footer/macro.njk' import footer %}

{{ footer({
  links: [
    {
      URL: "#",
      label: "Accessibility statement"
    },
    {
      URL: "#",
      label: "Contact us"
    },
    {
      URL: "#",
      label: "Cookies"
    },
    {
      URL: "#",
      label: "Privacy policy"
    },
    {
      URL: "#",
      label: "Terms and conditions"
    }
  ]
})}}
Close default footer code

Use the footer at the bottom of every page of your website or service but not on a mobile app.

Open this default footer example in a new tab
Copy default footer code 
<footer role="contentinfo">
  <div class="nhsuk-footer-container">
    <div class="nhsuk-width-container">
      <h2 class="nhsuk-u-visually-hidden">Support links</h2>
      <div class="nhsuk-footer">

        <ul class="nhsuk-footer__list">
          <li class="nhsuk-footer__list-item nhsuk-footer-default__list-item">
            <a class="nhsuk-footer__list-item-link" href="#">Accessibility statement</a>
          </li>
          <li class="nhsuk-footer__list-item nhsuk-footer-default__list-item">
            <a class="nhsuk-footer__list-item-link" href="#">Contact us</a>
          </li>
          <li class="nhsuk-footer__list-item nhsuk-footer-default__list-item">
            <a class="nhsuk-footer__list-item-link" href="#">Cookies</a>
          </li>
          <li class="nhsuk-footer__list-item nhsuk-footer-default__list-item">
            <a class="nhsuk-footer__list-item-link" href="#">Privacy policy</a>
          </li>
          <li class="nhsuk-footer__list-item nhsuk-footer-default__list-item">
            <a class="nhsuk-footer__list-item-link" href="#">Terms and conditions</a>
          </li>
        </ul>
        <div>
          <p class="nhsuk-footer__copyright">© NHS England</p>
        </div>
      </div>

    </div>
  </div>
</footer>
Close default footer code
Nunjucks macro options

Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.

Some options are required for the macro to work; these are marked as "Required" in the option description.

If you're using Nunjucks macros in production with "html" options, or ones ending with "html", you must sanitise the HTML to protect against cross-site scripting exploits.

Nunjucks arguments for default footer
Name Type Required Description
links array false Contains the array of the first column of footer link items.
links[].url string false Href attribute for a footer link item in the first column.
links[].label string true The label for a footer link item in the first column.
linksColumn2 array false Contains the array of the second column of footer link items.
linksColumn2[].url string false Href attribute for a footer link item in the second column.
linksColumn2[].label string true The label for a footer link item in the second column.
linksColumn3 array false Contains the array of the third column of footer link items.
linksColumn3[].url string false Href attribute for a footer link item in the third column.
linksColumn3[].label string true The label for a footer link item in the third column.
copyright string false Optional text for the copyright notice in the footer.
classes string false Classes to add to the footer container.
attributes object false HTML attributes (for example data attributes) to add to the footer container.
metaLinks array false Contains the array of key policy footer link items.
metaLinks[].url string false Href attribute for a key policy footer link item.
metaLinks[].label string true The label for a key policy footer link item.
Copy default footer code 
{% from 'footer/macro.njk' import footer %}

{{ footer({
  links: [
    {
      URL: "#",
      label: "Accessibility statement"
    },
    {
      URL: "#",
      label: "Contact us"
    },
    {
      URL: "#",
      label: "Cookies"
    },
    {
      URL: "#",
      label: "Privacy policy"
    },
    {
      URL: "#",
      label: "Terms and conditions"
    }
  ]
})}}
Close default footer code

Add links to policies and other meta information about your service, such as:

  • accessibility
  • contact details
  • cookies
  • privacy policy
  • terms and conditions
Information: WCAG 2.2

If you include links to "help" pages in a footer, make sure to place those links consistently in the footer content. Also make sure that "help" links always work in a similar way across each page. This is to comply with WCAG 2.2 success criterion 3.2.6 Consistent Help (W3C).

Keep links to a minimum, especially in a transactional journey. Too many links can distract users. Link to specific policies for the transaction, if appropriate.

If your total number of links is less than 7, arrange them horizontally in lines.

If your users need lots of footer links to help them navigate a complex information architecture, include navigation links and arrange the links in columns.

For example, the NHS website has 4 columns of links, with key policy links in the last column.

The navigation links give users another route to the most visited content on the site. They act as a safety net for users who have not found content through the main navigation.

On tablets or smaller devices, there is a white line above the key policy links.

Open this columns footer example in a new tab
Copy columns footer code 
<footer role="contentinfo">
  <div class="nhsuk-footer-container">
    <div class="nhsuk-width-container">
      <h2 class="nhsuk-u-visually-hidden">Support links</h2>
      <div class="nhsuk-footer">

        <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>
        <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>
        <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="#">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>
        <ul class="nhsuk-footer__list nhsuk-footer__meta">

          <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="#">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>
        <p class="nhsuk-footer__copyright">© NHS England</p>
      </div>

    </div>
  </div>
</footer>
Close columns footer code
Nunjucks macro options

Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.

Some options are required for the macro to work; these are marked as "Required" in the option description.

If you're using Nunjucks macros in production with "html" options, or ones ending with "html", you must sanitise the HTML to protect against cross-site scripting exploits.

Nunjucks arguments for columns footer
Name Type Required Description
links array false Contains the array of the first column of footer link items.
links[].url string false Href attribute for a footer link item in the first column.
links[].label string true The label for a footer link item in the first column.
linksColumn2 array false Contains the array of the second column of footer link items.
linksColumn2[].url string false Href attribute for a footer link item in the second column.
linksColumn2[].label string true The label for a footer link item in the second column.
linksColumn3 array false Contains the array of the third column of footer link items.
linksColumn3[].url string false Href attribute for a footer link item in the third column.
linksColumn3[].label string true The label for a footer link item in the third column.
copyright string false Optional text for the copyright notice in the footer.
classes string false Classes to add to the footer container.
attributes object false HTML attributes (for example data attributes) to add to the footer container.
metaLinks array false Contains the array of key policy footer link items.
metaLinks[].url string false Href attribute for a key policy footer link item.
metaLinks[].label string true The label for a key policy footer link item.
Copy columns footer code 
{% from 'footer/macro.njk' import footer %}

  {{ footer({
    links: [
      {
        URL: "#",
        label: "Home"
      },
      {
        URL: "#",
        label: "Health A to Z"
      },
      {
        URL: "#",
        label: "Live Well"
      },
      {
        URL: "#",
        label: "Mental health"
      },
      {
        URL: "#",
        label: "Care and support"
      },
      {
        URL: "#",
        label: "Accessibility statement"
      },
      {
        URL: "#",
        label: "Pregnancy"
      },
      {
        URL: "#",
        label: "NHS services"
      },
      {
        URL: "#",
        label: "Coronavirus (COVID-19)"
      }
    ],
    linksColumn2: [
      {
        URL: "#",
        label: "NHS App"
      },
      {
        URL: "#",
        label: "Find my NHS number"
      },
      {
        URL: "#",
        label: "Your health records"
      },
      {
        URL: "#",
        label: "About the NHS"
      },
      {
        URL: "#",
        label: "Healthcare abroad"
      }
    ],
    linksColumn3: [
      {
        URL: "#",
        label: "Contact us"
      },
      {
        URL: "#",
        label: "Other NHS websites"
      },
      {
        URL: "#",
        label: "Profile editor login"
      }
    ],
    metaLinks: [
      {
        URL: "#",
        label: "About us"
      },
      {
        URL: "#",
        label: "Accessibility statement"
      },
      {
        URL: "#",
        label: "Our policies"
      },
      {
        URL: "#",
        label: "Cookies"
      }
    ]
  })}}
Close columns footer code

Copyright

Your copyright statement must reflect the ownership of your website or service. The NHS website is (c) Crown copyright but the NHS generally does not have Crown status. The service manual footer, for example, says (c) NHS England.

Include a reference to the Open Government Licence if your organisation or service encourages people to reuse and adapt its information under the licence.

Contact your legal team for advice.

Help us improve this guidance

Share insights or feedback and take part in the discussion. We use GitHub as a collaboration space. All the information on it is open to the public.

Feedback or share insights on GitHub

Read more about how to feedback or share insights.

If you have any questions, get in touch with the service manual team.

Updated: April 2024