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
{% from "footer/macro.njk" import govukFooter %}

{{ govukFooter({}) }}

You can configure this component using the Nunjucks macro arguments.

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
{% from "footer/macro.njk" import govukFooter %}

{{ govukFooter({}) }}

You can configure this component using the Nunjucks macro arguments.

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
{% 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 configure this component using the Nunjucks macro arguments.

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
{% from "footer/macro.njk" import govukFooter %}

{{ govukFooter({
  meta: {
    items: [
      {
        href: "#1",
        text: "Item 1"
      },
      {
        href: "#2",
        text: "Item 2"
      },
      {
        href: "#3",
        text: "Item 3"
      }
    ]
  }
}) }}

You can configure this component using the Nunjucks macro arguments.

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>
          <li class="govuk-footer__inline-list-item">
            <a class="govuk-footer__link" href="#">
                  Government Digital Service
                </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
{% 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"
      },
      {
        href: "#",
        text: "Government Digital Service"
      }
    ]
  }
}) }}

You can configure this component using the Nunjucks macro arguments.

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