Components

Footer

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

Open this "Footer" example in a new window
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 role="presentation" 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.
navigation array Array of items for use in the navigation section of the footer.
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. 
{% from "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
Open this "Footer" example in a new window
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 role="presentation" 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.
navigation array Array of items for use in the navigation section of the footer.
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. 
{% from "footer/macro.njk" import govukFooter %}

{{ govukFooter({}) }}
Open this "Footer with secondary navigation" example in a new window
HTML
<footer class="govuk-footer " role="contentinfo">
  <div class="govuk-width-container ">
    <div class="govuk-footer__navigation">
      <div class="govuk-footer__section">
        <h2 class="govuk-footer__heading govuk-heading-m">Two column list</h2>
        <ul class="govuk-footer__list govuk-footer__list--columns-2">
          <li class="govuk-footer__list-item">
            <a class="govuk-footer__link" href="#1">
              Navigation item 1
            </a>
          </li>
          <li class="govuk-footer__list-item">
            <a class="govuk-footer__link" href="#2">
              Navigation item 2
            </a>
          </li>
          <li class="govuk-footer__list-item">
            <a class="govuk-footer__link" href="#3">
              Navigation item 3
            </a>
          </li>
          <li class="govuk-footer__list-item">
            <a class="govuk-footer__link" href="#4">
              Navigation item 4
            </a>
          </li>
          <li class="govuk-footer__list-item">
            <a class="govuk-footer__link" href="#5">
              Navigation item 5
            </a>
          </li>
          <li class="govuk-footer__list-item">
            <a class="govuk-footer__link" href="#6">
              Navigation item 6
            </a>
          </li>
        </ul>
      </div>
      <div class="govuk-footer__section">
        <h2 class="govuk-footer__heading govuk-heading-m">Single column list</h2>
        <ul class="govuk-footer__list ">
          <li class="govuk-footer__list-item">
            <a class="govuk-footer__link" href="#1">
              Navigation item 1
            </a>
          </li>
          <li class="govuk-footer__list-item">
            <a class="govuk-footer__link" href="#2">
              Navigation item 2
            </a>
          </li>
          <li class="govuk-footer__list-item">
            <a class="govuk-footer__link" href="#3">
              Navigation item 3
            </a>
          </li>
        </ul>
      </div>
    </div>
    <hr class="govuk-footer__section-break">
    <div class="govuk-footer__meta">
      <div class="govuk-footer__meta-item govuk-footer__meta-item--grow">

        <svg role="presentation" 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.
navigation array Array of items for use in the navigation section of the footer.
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. 
{% from "footer/macro.njk" import govukFooter %}

{{ govukFooter({
  navigation: [
    {
      title: "Two column list",
      columns: 2,
      items: [
        {
          href: "#1",
          text: "Navigation item 1"
        },
        {
          href: "#2",
          text: "Navigation item 2"
        },
        {
          href: "#3",
          text: "Navigation item 3"
        },
        {
          href: "#4",
          text: "Navigation item 4"
        },
        {
          href: "#5",
          text: "Navigation item 5"
        },
        {
          href: "#6",
          text: "Navigation item 6"
        }
      ]
    },
    {
      title: "Single column list",
      items: [
        {
          href: "#1",
          text: "Navigation item 1"
        },
        {
          href: "#2",
          text: "Navigation item 2"
        },
        {
          href: "#3",
          text: "Navigation item 3"
        }
      ]
    }
  ]
}) }}

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

Open this "Footer with links to meta information" example in a new window
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">
        <h2 class="govuk-visually-hidden">Support links</h2>
        <ul class="govuk-footer__inline-list">
          <li class="govuk-footer__inline-list-item">
            <a class="govuk-footer__link" href="#1">
              Item 1
            </a>
          </li>
          <li class="govuk-footer__inline-list-item">
            <a class="govuk-footer__link" href="#2">
              Item 2
            </a>
          </li>
          <li class="govuk-footer__inline-list-item">
            <a class="govuk-footer__link" href="#3">
              Item 3
            </a>
          </li>
        </ul>

        <svg role="presentation" 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.
navigation array Array of items for use in the navigation section of the footer.
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. 
{% from "footer/macro.njk" import govukFooter %}

{{ govukFooter({
  meta: {
    items: [
      {
        href: "#1",
        text: "Item 1"
      },
      {
        href: "#2",
        text: "Item 2"
      },
      {
        href: "#3",
        text: "Item 3"
      }
    ]
  }
}) }}
Open this "Footer with secondary navigation and links to meta information" example in a new window
HTML
<footer class="govuk-footer " role="contentinfo">
  <div class="govuk-width-container ">
    <div class="govuk-footer__navigation">
      <div class="govuk-footer__section">
        <h2 class="govuk-footer__heading govuk-heading-m">Services and information</h2>
        <ul class="govuk-footer__list govuk-footer__list--columns-2">
          <li class="govuk-footer__list-item">
            <a class="govuk-footer__link" href="#">
              Benefits
            </a>
          </li>
          <li class="govuk-footer__list-item">
            <a class="govuk-footer__link" href="#">
              Births, deaths, marriages and care
            </a>
          </li>
          <li class="govuk-footer__list-item">
            <a class="govuk-footer__link" href="#">
              Business and self-employed
            </a>
          </li>
          <li class="govuk-footer__list-item">
            <a class="govuk-footer__link" href="#">
              Childcare and parenting
            </a>
          </li>
          <li class="govuk-footer__list-item">
            <a class="govuk-footer__link" href="#">
              Citizenship and living in the UK
            </a>
          </li>
          <li class="govuk-footer__list-item">
            <a class="govuk-footer__link" href="#">
              Crime, justice and the law
            </a>
          </li>
          <li class="govuk-footer__list-item">
            <a class="govuk-footer__link" href="#">
              Disabled people
            </a>
          </li>
          <li class="govuk-footer__list-item">
            <a class="govuk-footer__link" href="#">
              Driving and transport
            </a>
          </li>
          <li class="govuk-footer__list-item">
            <a class="govuk-footer__link" href="#">
              Education and learning
            </a>
          </li>
          <li class="govuk-footer__list-item">
            <a class="govuk-footer__link" href="#">
              Employing people
            </a>
          </li>
          <li class="govuk-footer__list-item">
            <a class="govuk-footer__link" href="#">
              Environment and countryside
            </a>
          </li>
          <li class="govuk-footer__list-item">
            <a class="govuk-footer__link" href="#">
              Housing and local services
            </a>
          </li>
          <li class="govuk-footer__list-item">
            <a class="govuk-footer__link" href="#">
              Money and tax
            </a>
          </li>
          <li class="govuk-footer__list-item">
            <a class="govuk-footer__link" href="#">
              Passports, travel and living abroad
            </a>
          </li>
          <li class="govuk-footer__list-item">
            <a class="govuk-footer__link" href="#">
              Visas and immigration
            </a>
          </li>
          <li class="govuk-footer__list-item">
            <a class="govuk-footer__link" href="#">
              Working, jobs and pensions
            </a>
          </li>
        </ul>
      </div>
      <div class="govuk-footer__section">
        <h2 class="govuk-footer__heading govuk-heading-m">Departments and policy</h2>
        <ul class="govuk-footer__list ">
          <li class="govuk-footer__list-item">
            <a class="govuk-footer__link" href="#">
              How government works
            </a>
          </li>
          <li class="govuk-footer__list-item">
            <a class="govuk-footer__link" href="#">
              Departments
            </a>
          </li>
          <li class="govuk-footer__list-item">
            <a class="govuk-footer__link" href="#">
              Worldwide
            </a>
          </li>
          <li class="govuk-footer__list-item">
            <a class="govuk-footer__link" href="#">
              Policies
            </a>
          </li>
          <li class="govuk-footer__list-item">
            <a class="govuk-footer__link" href="#">
              Publications
            </a>
          </li>
          <li class="govuk-footer__list-item">
            <a class="govuk-footer__link" href="#">
              Announcements
            </a>
          </li>
        </ul>
      </div>
    </div>
    <hr class="govuk-footer__section-break">
    <div class="govuk-footer__meta">
      <div class="govuk-footer__meta-item govuk-footer__meta-item--grow">
        <h2 class="govuk-visually-hidden">Support links</h2>
        <ul class="govuk-footer__inline-list">
          <li class="govuk-footer__inline-list-item">
            <a class="govuk-footer__link" href="#">
              Help
            </a>
          </li>
          <li class="govuk-footer__inline-list-item">
            <a class="govuk-footer__link" href="#">
              Cookies
            </a>
          </li>
          <li class="govuk-footer__inline-list-item">
            <a class="govuk-footer__link" href="#">
              Contact
            </a>
          </li>
          <li class="govuk-footer__inline-list-item">
            <a class="govuk-footer__link" href="#">
              Terms and conditions
            </a>
          </li>
          <li class="govuk-footer__inline-list-item">
            <a class="govuk-footer__link" href="#">
              Rhestr o Wasanaethau Cymraeg
            </a>
          </li>
        </ul>
        <div class="govuk-footer__meta-custom">
          Built by the
          <a href="#" class="govuk-footer__link">Government Digital Service</a>
        </div>

        <svg role="presentation" 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.
navigation array Array of items for use in the navigation section of the footer.
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. 
{% from "footer/macro.njk" import govukFooter %}

{{ govukFooter({
  navigation: [
    {
      title: "Services and information",
      columns: 2,
      items: [
        {
          href: "#",
          text: "Benefits"
        },
        {
          href: "#",
          text: "Births, deaths, marriages and care"
        },
        {
          href: "#",
          text: "Business and self-employed"
        },
        {
          href: "#",
          text: "Childcare and parenting"
        },
        {
          href: "#",
          text: "Citizenship and living in the UK"
        },
        {
          href: "#",
          text: "Crime, justice and the law"
        },
        {
          href: "#",
          text: "Disabled people"
        },
        {
          href: "#",
          text: "Driving and transport"
        },
        {
          href: "#",
          text: "Education and learning"
        },
        {
          href: "#",
          text: "Employing people"
        },
        {
          href: "#",
          text: "Environment and countryside"
        },
        {
          href: "#",
          text: "Housing and local services"
        },
        {
          href: "#",
          text: "Money and tax"
        },
        {
          href: "#",
          text: "Passports, travel and living abroad"
        },
        {
          href: "#",
          text: "Visas and immigration"
        },
        {
          href: "#",
          text: "Working, jobs and pensions"
        }
      ]
    },
    {
      title: "Departments and policy",
      items: [
        {
          href: "#",
          text: "How government works"
        },
        {
          href: "#",
          text: "Departments"
        },
        {
          href: "#",
          text: "Worldwide"
        },
        {
          href: "#",
          text: "Policies"
        },
        {
          href: "#",
          text: "Publications"
        },
        {
          href: "#",
          text: "Announcements"
        }
      ]
    }
  ],
  meta: {
    items: [
      {
        href: "#",
        text: "Help"
      },
      {
        href: "#",
        text: "Cookies"
      },
      {
        href: "#",
        text: "Contact"
      },
      {
        href: "#",
        text: "Terms and conditions"
      },
      {
        href: "#",
        text: "Rhestr o Wasanaethau Cymraeg"
      }
    ],
    html: 'Built by the <a href="#" class="govuk-footer__link">Government Digital Service</a>'
  }
}) }}

Research on this component

If you’ve used this component, get in touch to share your user research findings.

Get in touch

If you’ve got a question, idea or suggestion share it in #govuk-design-system on cross-government Slack (open in app) or email the Design System team on govuk-design-system-support@digital.cabinet-office.gov.uk

Discuss ‘Footer’ on GitHub