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.

Open this default footer example in new window
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">&copy; 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
Name links Type array Required false Description Contains the array of the first column of footer link items.
Name links[].url Type string Required false Description Href attribute for a footer link item in the first column.
Name links[].label Type string Required true Description The label for a footer link item in the first column.
Name linksColumn2 Type array Required false Description Contains the array of the second column of footer link items.
Name linksColumn2[].url Type string Required false Description Href attribute for a footer link item in the second column.
Name linksColumn2[].label Type string Required true Description The label for a footer link item in the second column.
Name linksColumn3 Type array Required false Description Contains the array of the third column of footer link items.
Name linksColumn3[].url Type string Required false Description Href attribute for a footer link item in the third column.
Name linksColumn3[].label Type string Required true Description The label for a footer link item in the third column.
Name copyright Type string Required false Description Optional text for the copyright notice in the footer.
Name classes Type string Required false Description Classes to add to the footer container.
Name attributes Type object Required false Description HTML attributes (for example data attributes) to add to the footer container.
Name metaLinks Type array Required false Description Contains the array of key policy footer link items.
Name metaLinks[].url Type string Required false Description Href attribute for a key policy footer link item.
Name metaLinks[].label Type string Required true Description 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 new window
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">&copy; 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
Name links Type array Required false Description Contains the array of the first column of footer link items.
Name links[].url Type string Required false Description Href attribute for a footer link item in the first column.
Name links[].label Type string Required true Description The label for a footer link item in the first column.
Name linksColumn2 Type array Required false Description Contains the array of the second column of footer link items.
Name linksColumn2[].url Type string Required false Description Href attribute for a footer link item in the second column.
Name linksColumn2[].label Type string Required true Description The label for a footer link item in the second column.
Name linksColumn3 Type array Required false Description Contains the array of the third column of footer link items.
Name linksColumn3[].url Type string Required false Description Href attribute for a footer link item in the third column.
Name linksColumn3[].label Type string Required true Description The label for a footer link item in the third column.
Name copyright Type string Required false Description Optional text for the copyright notice in the footer.
Name classes Type string Required false Description Classes to add to the footer container.
Name attributes Type object Required false Description HTML attributes (for example data attributes) to add to the footer container.
Name metaLinks Type array Required false Description Contains the array of key policy footer link items.
Name metaLinks[].url Type string Required false Description Href attribute for a key policy footer link item.
Name metaLinks[].label Type string Required true Description 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

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 new window
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">&copy; Crown copyright</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
Name links Type array Required false Description Contains the array of the first column of footer link items.
Name links[].url Type string Required false Description Href attribute for a footer link item in the first column.
Name links[].label Type string Required true Description The label for a footer link item in the first column.
Name linksColumn2 Type array Required false Description Contains the array of the second column of footer link items.
Name linksColumn2[].url Type string Required false Description Href attribute for a footer link item in the second column.
Name linksColumn2[].label Type string Required true Description The label for a footer link item in the second column.
Name linksColumn3 Type array Required false Description Contains the array of the third column of footer link items.
Name linksColumn3[].url Type string Required false Description Href attribute for a footer link item in the third column.
Name linksColumn3[].label Type string Required true Description The label for a footer link item in the third column.
Name copyright Type string Required false Description Optional text for the copyright notice in the footer.
Name classes Type string Required false Description Classes to add to the footer container.
Name attributes Type object Required false Description HTML attributes (for example data attributes) to add to the footer container.
Name metaLinks Type array Required false Description Contains the array of key policy footer link items.
Name metaLinks[].url Type string Required false Description Href attribute for a key policy footer link item.
Name metaLinks[].label Type string Required true Description 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.

Accessibility

In 2023, we updated the NHS footer colours to improve accessibility with:

  • dark blue links that turn dark pink on hover
  • the copyright statement in dark grey

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: March 2024