Skip to content

Latest commit

 

History

History
95 lines (61 loc) · 5.12 KB

File metadata and controls

95 lines (61 loc) · 5.12 KB
title GOV.UK footer
description The footer provides copyright, licensing and other information about your service and department
section Components
aliases privacy notice, accessibility statement, terms and conditions
backlogIssueId 96
layout layout-pane.njk

{% from "_example.njk" import example %} {% from "_brand-callout.njk" import brandCallout %} {%- from "govuk/components/tag/macro.njk" import govukTag -%}

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

{{ example({ group: "components", item: "footer", example: "default", id: "default-1", html: true, nunjucks: true, open: false, size: "m", loading: "eager" }) }}

Brand

See an example of the GOV.UK footer showing the refreshed GOV.UK branding.

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.

{% call brandCallout({ text: "Brand", classes: "brand-tag-green" }) %}

Brand changes to the {{title}} component

From 25 June 2025, the {{title}} component will change to support a wider refresh of the GOV.UK brand.

The updated {{title}} component:

  • uses a light blue as the background colour, instead of grey
  • adds a thick blue top border
  • adds a small crown logo, in addition to the existing coat of arms

To help service teams in government get ready to use the new branding, we’ve provided several options to update their services.

{% endcall %}

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.

Update to refresh the GOV.UK brand

Brand

If you use the Nunjucks macro and page template across your service, you can enable the brand refresh by setting the page template’s rebrand option to true. This will automatically make all needed changes related to the brand refresh.

You can enable the brand refresh within the GOV.UK footer component by setting its rebrand option to true. You’ll also need to add some code to your <html> and <head> elements.

See the release notes for more details and other ways to update.

Footer without links

{{ example({ group: "components", item: "footer", example: "default", titleSuffix: "second", html: true, nunjucks: true, open: false, size: "m", titleSuffix: "second" }) }}

Footer with links

{{ example({ group: "components", item: "footer", example: "with-meta", html: true, nunjucks: true, open: false, size: "m" }) }}

Adding links

You can add links to:

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

If you include links to ‘help’ pages within the GOV.UK footer component, 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.

Footer with secondary navigation

{{ example({ group: "components", item: "footer", example: "with-navigation", html: true, nunjucks: true, open: false, size: "xl" }) }}

Footer with links and secondary navigation

{{ example({ group: "components", item: "footer", example: "full", html: true, nunjucks: true, open: false, size: "xl" }) }}