Components

Footer

The footer provides copyright, licensing and other information about your service.

Open this example in a new tab: footer
HTML
<footer class="govuk-footer " role="contentinfo">
  <div class="govuk-width-container ">
    <div class="govuk-footer__meta">
      <div class="govuk-footer__meta-item govuk-footer__meta-item--grow">
        <svg
          aria-hidden="true"
          focusable="false"
          class="govuk-footer__licence-logo"
          xmlns="http://www.w3.org/2000/svg"
          viewBox="0 0 483.2 195.7"
          height="17"
          width="41">
          <path
            fill="currentColor"
            d="M421.5 142.8V.1l-50.7 32.3v161.1h112.4v-50.7zm-122.3-9.6A47.12 47.12 0 0 1 221 97.8c0-26 21.1-47.1 47.1-47.1 16.7 0 31.4 8.7 39.7 21.8l42.7-27.2A97.63 97.63 0 0 0 268.1 0c-36.5 0-68.3 20.1-85.1 49.7A98 98 0 0 0 97.8 0C43.9 0 0 43.9 0 97.8s43.9 97.8 97.8 97.8c36.5 0 68.3-20.1 85.1-49.7a97.76 97.76 0 0 0 149.6 25.4l19.4 22.2h3v-87.8h-80l24.3 27.5zM97.8 145c-26 0-47.1-21.1-47.1-47.1s21.1-47.1 47.1-47.1 47.2 21 47.2 47S123.8 145 97.8 145" />
        </svg>
        <span class="govuk-footer__licence-description">
          All content is available under the
          <a
            class="govuk-footer__link"
            href="https://www.nationalarchives.gov.uk/doc/open-government-licence/version/3/"
            rel="license">Open Government Licence v3.0</a>, except where otherwise stated
        </span>
      </div>
      <div class="govuk-footer__meta-item">
        <a
          class="govuk-footer__link govuk-footer__copyright-logo"
          href="https://www.nationalarchives.gov.uk/information-management/re-using-public-sector-information/uk-government-licensing-framework/crown-copyright/">© Crown copyright</a>
      </div>
    </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.

Primary options
Name Type Description
meta object Object containing options for the meta navigation. See meta.
navigation array Array of items for use in the navigation section of the footer. See navigation.
contentLicence object The content licence information. Defaults to Open Government Licence (OGL) v3 licence. See contentLicence.
copyright object The copyright information, this defaults to Crown Copyright. See copyright.
containerClasses string Classes that can be added to the inner container, useful if you want to make the footer full width.
classes string Classes to add to the footer component container.
attributes object HTML attributes (for example data attributes) to add to the footer component container.
Options for meta object
Name Type Description
visuallyHiddenTitle string Title for a meta item section. 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 Array of items for use in the meta section of the footer. See meta items.
Options for meta items array objects
Name Type Description
text string Required. List item text in the meta section of the footer.
href string Required. List item href attribute in the meta section of the footer.
attributes object HTML attributes (for example data attributes) to add to the anchor in the footer meta section.
Options for navigation array objects
Name Type Description
title string Required. Title for a section.
columns integer Amount of columns to display items in navigation section of the footer.
width string Width of each navigation section in the footer. Defaults to full width. You can pass any design system grid width here, for example, ‘one-third’; ‘two-thirds’; ‘one-half’.
items array Array of items to display in the list in navigation section of the footer. See navigation items.
Options for navigation items array objects
Name Type Description
text string Required. List item text in the navigation section of the footer.
href string Required. List item href attribute in the navigation section of the footer. Both text and href attributes need to be present to create a link.
attributes object HTML attributes (for example data attributes) to add to the anchor in the footer navigation section.
Options for contentLicence object
Name Type Description
text string If html is set, this is not required. If html is provided, the text option will be ignored. If neither are provided, the text for the Open Government Licence is used.
html string If text is set, this is not required. If html is provided, the text option will be ignored. If neither are provided, the text for the Open Government Licence is used. The content licence is inside a <span> element, so you can only add phrasing content to it.
Options for copyright object
Name Type Description
text string If html is set, this is not required. If html is provided, the text option will be ignored. If neither are provided, Crown copyright is used.
html string If text is set, this is not required. If html is provided, the text option will be ignored. If neither are provided, Crown copyright is used. The copyright notice is inside an <a> element, so you can only use text formatting elements within it. 
{% from "govuk/components/footer/macro.njk" import govukFooter %}

{{ govukFooter({}) }}

If you use the page template, you’ll also get the footer without having to add it, as it’s included by default. However, if you want to customise the default footer, read the page template guidance about customising components.

When to use this component

Use the footer at the bottom of every page of your service.

How it works

Add a copyright notice to the footer to clarify who owns the copyright. For GOV.UK services, add the coat of arms to keep things consistent with the rest of GOV.UK.

Make it clear whether content is available for re-use - and if it is, under what sort of licence. Use an Open Government Licence unless you have permission from the National Archives to use a different type of licence.

You can add links to:

Use ‘Privacy’, ‘Accessibility’, ‘Cookies’ and ‘Terms and conditions’ for the link text.

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

Adding secondary navigation

Only add secondary GOV.UK navigation if you’re creating a GOV.UK service, and you want users to be able to navigate away from the service to somewhere else on the GOV.UK website. For example, you probably don’t want to encourage a user to navigate away from a linear, form-type service.

Help improve this component

To help make sure that this page is useful, relevant and up to date, you can:

Tell us if your service uses this component

Take part in our usage survey (opens in a new tab) to help us improve this component to better meet the needs of the services that use it.

Need help?

If you’ve got a question about the GOV.UK Design System, contact the team.