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 footer example in new window
Copy
<footer role="contentinfo">
<div class="nhsuk-footer" id="nhsuk-footer">
<div class="nhsuk-width-container">
<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-footer__copyright">© Crown copyright</p>
</div>
</div>
</footer>
Copy
{% 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"
}
]
})}}
When to use the footer
Use the footer at the bottom of every page of your service.
How to use the footer
Add links to meta information about your service, such as:
- accessibility
- contact details
- cookies
- privacy policy
- terms and conditions
Avoid adding lots of links. Keep them to a minimum.
Help improve this page
The manual is a community effort. Anyone can help improve and grow it.
To help make sure the Footer guidance is useful, relevant and up to date, you can:
- share research or feedback about the Footer component on GitHub
- propose a code change to this page on GitHub
Need help?
If you’ve got a question about the NHS digital service manual or want to feedback, get in touch.
Updated: May 2020