Components

Footer

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

Open this footer example in a new tab
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.
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
Name Type Description
visuallyHiddenTitle string Title for a meta item section, which 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 items.
Options for items
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
Name Type Description
title string Required. Title for a section
columns integer Amount of columns to display items in navigation section of the footer.
items array Array of items to display in the list in navigation section of the footer. See items.
Options for items
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. 
{% from "govuk/components/footer/macro.njk" import govukFooter %}

{{ govukFooter({}) }}

When to use this component

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

How it works

You can add links to:

  • your department’s page on GOV.UK
  • other language options
  • terms and conditions
  • privacy policy

You can also include links to meta information about a site, like cookies and contact details in the footer, like this:

Help improve this page

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

Need help?

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