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.

Version 10

Footer updated in August 2025

See 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

HTML

<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

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
id	string	false	The ID of the footer.
columns	integer	false	Number of columns to display per row in the navigation section of the footer – `4`, `3`, `2` or `1`. Defaults to `4`.
navigation	object	false	The navigation section of the footer before the copyright information. Alternatively supports an array of `navigation` objects.
navigation{}.title	string	false	Title for group of footer navigation links.
navigation{}.text	string	false	Optional text to use within each navigation section column. If `html` is provided, the `text` option will be ignored.
navigation{}.html	string	false	Optional HTML to use within each navigation section column. If `html` is provided, the `text` option will be ignored.
navigation{}.width	string	false	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"`.
navigation{}.items	array	false	Contains the array of footer navigation link items for this group.
navigation{}.items[].href	string	true	Footer navigation link `href` attribute.
navigation{}.items[].text	string	true	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.
navigation{}.items[].html	string	true	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.
navigation{}.items[].attributes	object	false	HTML attributes (for example data attributes) to add to the anchor in the footer meta section.
meta	object	false	The meta section of the footer after any navigation, before the copyright information.
meta{}.visuallyHiddenTitle	string	false	Title for meta `items` links. Defaults to `"Support links"`.
meta{}.html	string	false	HTML to add to the meta section of the footer, which will appear below any links specified using meta `items`.
meta{}.text	string	false	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.
meta{}.items	array	false	Contains the array of key policy footer link items.
meta{}.items[].href	string	true	Footer meta link `href` attribute.
meta{}.items[].text	string	true	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.
meta{}.items[].html	string	true	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.
meta{}.items[].attributes	object	false	HTML attributes (for example data attributes) to add to the footer meta link.
copyright	object	false	The copyright information in the footer component, this defaults to `"© NHS England"`.
copyright{}.text	string	true	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.
copyright{}.html	string	true	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.
containerClasses	string	false	Classes to add to the footer container, useful if you want to make the footer fixed width.
classes	string	false	Classes to add to the footer container.
caller	nunjucks-block	false	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	false	HTML attributes (for example data attributes) to add to the footer container.

{% 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

HTML

<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

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
id	string	false	The ID of the footer.
columns	integer	false	Number of columns to display per row in the navigation section of the footer – `4`, `3`, `2` or `1`. Defaults to `4`.
navigation	object	false	The navigation section of the footer before the copyright information. Alternatively supports an array of `navigation` objects.
navigation{}.title	string	false	Title for group of footer navigation links.
navigation{}.text	string	false	Optional text to use within each navigation section column. If `html` is provided, the `text` option will be ignored.
navigation{}.html	string	false	Optional HTML to use within each navigation section column. If `html` is provided, the `text` option will be ignored.
navigation{}.width	string	false	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"`.
navigation{}.items	array	false	Contains the array of footer navigation link items for this group.
navigation{}.items[].href	string	true	Footer navigation link `href` attribute.
navigation{}.items[].text	string	true	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.
navigation{}.items[].html	string	true	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.
navigation{}.items[].attributes	object	false	HTML attributes (for example data attributes) to add to the anchor in the footer meta section.
meta	object	false	The meta section of the footer after any navigation, before the copyright information.
meta{}.visuallyHiddenTitle	string	false	Title for meta `items` links. Defaults to `"Support links"`.
meta{}.html	string	false	HTML to add to the meta section of the footer, which will appear below any links specified using meta `items`.
meta{}.text	string	false	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.
meta{}.items	array	false	Contains the array of key policy footer link items.
meta{}.items[].href	string	true	Footer meta link `href` attribute.
meta{}.items[].text	string	true	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.
meta{}.items[].html	string	true	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.
meta{}.items[].attributes	object	false	HTML attributes (for example data attributes) to add to the footer meta link.
copyright	object	false	The copyright information in the footer component, this defaults to `"© NHS England"`.
copyright{}.text	string	true	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.
copyright{}.html	string	true	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.
containerClasses	string	false	Classes to add to the footer container, useful if you want to make the footer fixed width.
classes	string	false	Classes to add to the footer container.
caller	nunjucks-block	false	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	false	HTML attributes (for example data attributes) to add to the footer container.

{% 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

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

HTML

<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

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
id	string	false	The ID of the footer.
columns	integer	false	Number of columns to display per row in the navigation section of the footer – `4`, `3`, `2` or `1`. Defaults to `4`.
navigation	object	false	The navigation section of the footer before the copyright information. Alternatively supports an array of `navigation` objects.
navigation{}.title	string	false	Title for group of footer navigation links.
navigation{}.text	string	false	Optional text to use within each navigation section column. If `html` is provided, the `text` option will be ignored.
navigation{}.html	string	false	Optional HTML to use within each navigation section column. If `html` is provided, the `text` option will be ignored.
navigation{}.width	string	false	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"`.
navigation{}.items	array	false	Contains the array of footer navigation link items for this group.
navigation{}.items[].href	string	true	Footer navigation link `href` attribute.
navigation{}.items[].text	string	true	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.
navigation{}.items[].html	string	true	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.
navigation{}.items[].attributes	object	false	HTML attributes (for example data attributes) to add to the anchor in the footer meta section.
meta	object	false	The meta section of the footer after any navigation, before the copyright information.
meta{}.visuallyHiddenTitle	string	false	Title for meta `items` links. Defaults to `"Support links"`.
meta{}.html	string	false	HTML to add to the meta section of the footer, which will appear below any links specified using meta `items`.
meta{}.text	string	false	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.
meta{}.items	array	false	Contains the array of key policy footer link items.
meta{}.items[].href	string	true	Footer meta link `href` attribute.
meta{}.items[].text	string	true	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.
meta{}.items[].html	string	true	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.
meta{}.items[].attributes	object	false	HTML attributes (for example data attributes) to add to the footer meta link.
copyright	object	false	The copyright information in the footer component, this defaults to `"© NHS England"`.
copyright{}.text	string	true	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.
copyright{}.html	string	true	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.
containerClasses	string	false	Classes to add to the footer container, useful if you want to make the footer fixed width.
classes	string	false	Classes to add to the footer container.
caller	nunjucks-block	false	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	false	HTML attributes (for example data attributes) to add to the footer container.

{% 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.

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: August 2025

Navigation - Footer

Footer updated in August 2025

When to use the footer

How to use the footer

Footer with key links only

Footer with navigation links

Copyright

Help us improve this guidance