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.

Information: Version 10

Footer updated in August 2025

See breaking code updates to footer in version 10

WCAG 2.2: Make sure that users can successfully find help links in a consistent place on each page.

Open this example in a new tab: footer 
<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>
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.

Primary options
Name Type Description
id string The ID of the footer.
columns integer Number of columns to display per row in the navigation section of the footer – 4, 3, 2 or 1. Defaults to 4.
navigation object The navigation section of the footer before the copyright information. Alternatively supports an array of navigation objects. See macro options for navigation.
meta object The meta section of the footer after any navigation, before the copyright information. See macro options for meta.
copyright object The copyright information in the footer component, this defaults to "© NHS England". See macro options for copyright.
containerClasses string Classes to add to the footer container, useful if you want to make the footer fixed width.
classes string Classes to add to the footer container.
caller nunjucks-block Not strictly a parameter but a Nunjucks code convention. Using a call block enables you to call a macro with all the text inside the tag. This is helpful if you want to pass a lot of content into a macro. To use it, you will need to wrap the entire footer component in a call block.
attributes object HTML attributes (for example data attributes) to add to the footer container.
Options for navigation object
Name Type Description
title string Title for group of footer navigation links.
text string Optional text to use within each navigation section column. If html is provided, the text option will be ignored.
html string Optional HTML to use within each navigation section column. If html is provided, the text option will be ignored.
width string Width of each navigation section column in the footer. You can pass any design system grid width here – for example, "one-third", "two-thirds" or "one-half". Defaults to "one-quarter".
items array Contains the array of footer navigation link items for this group. See macro options for navigation items.
Options for navigation items array objects
Name Type Description
href string Required. Footer navigation link href attribute.
text string Required. If html is set, this is not required. Text to use within each footer navigation link. If html is provided, the text option will be ignored.
html string Required. If text is set, this is not required. HTML to use within each footer navigation link. If html is provided, the text option will be ignored.
attributes object HTML attributes (for example data attributes) to add to the anchor in the footer meta section.
Options for meta object
Name Type Description
visuallyHiddenTitle string Title for meta items links. Defaults to "Support links".
html string HTML to add to the meta section of the footer, which will appear below any links specified using meta items.
text string Text to add to the meta section of the footer, which will appear below any links specified using meta items. If meta html is specified, this option is ignored.
items array Contains the array of key policy footer link items. See macro options for meta items.
Options for meta items array objects
Name Type Description
href string Required. Footer meta link href attribute.
text string Required. If html is set, this is not required. Text to use within each footer meta link. If html is provided, the text option will be ignored.
html string Required. If text is set, this is not required. HTML to use within each footer meta link. If html is provided, the text option will be ignored.
attributes object HTML attributes (for example data attributes) to add to the footer meta link.
Options for copyright object
Name Type Description
text string Required. If html is set, this is not required. If html is provided, the text option will be ignored. If neither are provided, "© NHS England" is used.
html string Required. If text is set, this is not required. If html is provided, the text option will be ignored. If neither are provided, "© NHS England" is used. 
{% 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"
      }
    ]
  }
}) }}

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

Open this example in a new tab: footer second 
<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>
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.

Primary options
Name Type Description
id string The ID of the footer.
columns integer Number of columns to display per row in the navigation section of the footer – 4, 3, 2 or 1. Defaults to 4.
navigation object The navigation section of the footer before the copyright information. Alternatively supports an array of navigation objects. See macro options for navigation.
meta object The meta section of the footer after any navigation, before the copyright information. See macro options for meta.
copyright object The copyright information in the footer component, this defaults to "© NHS England". See macro options for copyright.
containerClasses string Classes to add to the footer container, useful if you want to make the footer fixed width.
classes string Classes to add to the footer container.
caller nunjucks-block Not strictly a parameter but a Nunjucks code convention. Using a call block enables you to call a macro with all the text inside the tag. This is helpful if you want to pass a lot of content into a macro. To use it, you will need to wrap the entire footer component in a call block.
attributes object HTML attributes (for example data attributes) to add to the footer container.
Options for navigation object
Name Type Description
title string Title for group of footer navigation links.
text string Optional text to use within each navigation section column. If html is provided, the text option will be ignored.
html string Optional HTML to use within each navigation section column. If html is provided, the text option will be ignored.
width string Width of each navigation section column in the footer. You can pass any design system grid width here – for example, "one-third", "two-thirds" or "one-half". Defaults to "one-quarter".
items array Contains the array of footer navigation link items for this group. See macro options for navigation items.
Options for navigation items array objects
Name Type Description
href string Required. Footer navigation link href attribute.
text string Required. If html is set, this is not required. Text to use within each footer navigation link. If html is provided, the text option will be ignored.
html string Required. If text is set, this is not required. HTML to use within each footer navigation link. If html is provided, the text option will be ignored.
attributes object HTML attributes (for example data attributes) to add to the anchor in the footer meta section.
Options for meta object
Name Type Description
visuallyHiddenTitle string Title for meta items links. Defaults to "Support links".
html string HTML to add to the meta section of the footer, which will appear below any links specified using meta items.
text string Text to add to the meta section of the footer, which will appear below any links specified using meta items. If meta html is specified, this option is ignored.
items array Contains the array of key policy footer link items. See macro options for meta items.
Options for meta items array objects
Name Type Description
href string Required. Footer meta link href attribute.
text string Required. If html is set, this is not required. Text to use within each footer meta link. If html is provided, the text option will be ignored.
html string Required. If text is set, this is not required. HTML to use within each footer meta link. If html is provided, the text option will be ignored.
attributes object HTML attributes (for example data attributes) to add to the footer meta link.
Options for copyright object
Name Type Description
text string Required. If html is set, this is not required. If html is provided, the text option will be ignored. If neither are provided, "© NHS England" is used.
html string Required. If text is set, this is not required. If html is provided, the text option will be ignored. If neither are provided, "© NHS England" is used. 
{% 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"
      }
    ]
  }
}) }}

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.

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.

There is a line below the columns to separate them from the meta information, for example the copyright notice.

Open this example in a new tab: footer columns 
<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>
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.

Primary options
Name Type Description
id string The ID of the footer.
columns integer Number of columns to display per row in the navigation section of the footer – 4, 3, 2 or 1. Defaults to 4.
navigation object The navigation section of the footer before the copyright information. Alternatively supports an array of navigation objects. See macro options for navigation.
meta object The meta section of the footer after any navigation, before the copyright information. See macro options for meta.
copyright object The copyright information in the footer component, this defaults to "© NHS England". See macro options for copyright.
containerClasses string Classes to add to the footer container, useful if you want to make the footer fixed width.
classes string Classes to add to the footer container.
caller nunjucks-block Not strictly a parameter but a Nunjucks code convention. Using a call block enables you to call a macro with all the text inside the tag. This is helpful if you want to pass a lot of content into a macro. To use it, you will need to wrap the entire footer component in a call block.
attributes object HTML attributes (for example data attributes) to add to the footer container.
Options for navigation object
Name Type Description
title string Title for group of footer navigation links.
text string Optional text to use within each navigation section column. If html is provided, the text option will be ignored.
html string Optional HTML to use within each navigation section column. If html is provided, the text option will be ignored.
width string Width of each navigation section column in the footer. You can pass any design system grid width here – for example, "one-third", "two-thirds" or "one-half". Defaults to "one-quarter".
items array Contains the array of footer navigation link items for this group. See macro options for navigation items.
Options for navigation items array objects
Name Type Description
href string Required. Footer navigation link href attribute.
text string Required. If html is set, this is not required. Text to use within each footer navigation link. If html is provided, the text option will be ignored.
html string Required. If text is set, this is not required. HTML to use within each footer navigation link. If html is provided, the text option will be ignored.
attributes object HTML attributes (for example data attributes) to add to the anchor in the footer meta section.
Options for meta object
Name Type Description
visuallyHiddenTitle string Title for meta items links. Defaults to "Support links".
html string HTML to add to the meta section of the footer, which will appear below any links specified using meta items.
text string Text to add to the meta section of the footer, which will appear below any links specified using meta items. If meta html is specified, this option is ignored.
items array Contains the array of key policy footer link items. See macro options for meta items.
Options for meta items array objects
Name Type Description
href string Required. Footer meta link href attribute.
text string Required. If html is set, this is not required. Text to use within each footer meta link. If html is provided, the text option will be ignored.
html string Required. If text is set, this is not required. HTML to use within each footer meta link. If html is provided, the text option will be ignored.
attributes object HTML attributes (for example data attributes) to add to the footer meta link.
Options for copyright object
Name Type Description
text string Required. If html is set, this is not required. If html is provided, the text option will be ignored. If neither are provided, "© NHS England" is used.
html string Required. If text is set, this is not required. If html is provided, the text option will be ignored. If neither are provided, "© NHS England" is used. 
{% 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"
        }
      ]
    }
  ]
}) }}

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.

Feed back or share insights on GitHub

Read more about how to feed back or share insights.

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

Updated: August 2025