GOV.UK footer
The GOV.UK footer provides copyright, licensing and other information about your service.
<footer class="govuk-footer">
<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 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. Deprecated options are marked as “Deprecated”.
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.
| Name | Type | Description |
|---|---|---|
| meta | object | The meta section of the footer after any navigation, before the copyright and license information. See macro options for meta. |
| navigation | array | The navigation section of the footer before a section break and the copyright and license information. See macro options for navigation. |
| content |
object |
The content licence information within the footer component. Defaults to Open Government Licence (OGL) v3 licence.
See macro options for content |
| copyright | object |
The copyright information in the footer component, this defaults to "© Crown copyright".
See macro options for copyright.
|
| container |
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. |
| rebrand | boolean |
If true, use the redesigned footer with the GOV.UK crown. Default is false.
|
| Name | Type | Description |
|---|---|---|
| visually |
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 |
The meta items add content within a unordered list to the meta section of the footer component. These appear above any text or custom html in the meta section.
See macro options for meta items.
|
| Name | Type | Description |
|---|---|---|
| text | string | Required. List item text in the meta section of the footer. |
| href | string |
Required.
List item link 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. |
| 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. You can pass any Design System grid width here – for example, "one-third", "two-thirds" or "one-half". Defaults to "full".
|
| items | array | The items within the navigation section of the footer component. See macro options for navigation items. |
| Name | Type | Description |
|---|---|---|
| text | string | Required. List item text in the navigation section of the footer. |
| href | string |
Required.
List item link 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. |
| 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.
|
| 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.
Brand note
Brand refresh of the GOV.UK footer component
From 25 June 2025, the GOV.UK footer component will change to support a wider refresh of the GOV.UK brand.
The updated GOV.UK footer 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, we’ve released GOV.UK Frontend v5.10.0.
Read the full release notes to see more details and how to update.
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.
Footer without links
<footer class="govuk-footer">
<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 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. Deprecated options are marked as “Deprecated”.
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.
| Name | Type | Description |
|---|---|---|
| meta | object | The meta section of the footer after any navigation, before the copyright and license information. See macro options for meta. |
| navigation | array | The navigation section of the footer before a section break and the copyright and license information. See macro options for navigation. |
| content |
object |
The content licence information within the footer component. Defaults to Open Government Licence (OGL) v3 licence.
See macro options for content |
| copyright | object |
The copyright information in the footer component, this defaults to "© Crown copyright".
See macro options for copyright.
|
| container |
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. |
| rebrand | boolean |
If true, use the redesigned footer with the GOV.UK crown. Default is false.
|
| Name | Type | Description |
|---|---|---|
| visually |
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 |
The meta items add content within a unordered list to the meta section of the footer component. These appear above any text or custom html in the meta section.
See macro options for meta items.
|
| Name | Type | Description |
|---|---|---|
| text | string | Required. List item text in the meta section of the footer. |
| href | string |
Required.
List item link 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. |
| 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. You can pass any Design System grid width here – for example, "one-third", "two-thirds" or "one-half". Defaults to "full".
|
| items | array | The items within the navigation section of the footer component. See macro options for navigation items. |
| Name | Type | Description |
|---|---|---|
| text | string | Required. List item text in the navigation section of the footer. |
| href | string |
Required.
List item link 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. |
| 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.
|
| 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({}) }}Footer with links
<footer class="govuk-footer">
<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="#">
Item 1
</a>
</li>
<li class="govuk-footer__inline-list-item">
<a class="govuk-footer__link" href="#">
Item 2
</a>
</li>
<li class="govuk-footer__inline-list-item">
<a class="govuk-footer__link" href="#">
Item 3
</a>
</li>
</ul>
<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 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. Deprecated options are marked as “Deprecated”.
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.
| Name | Type | Description |
|---|---|---|
| meta | object | The meta section of the footer after any navigation, before the copyright and license information. See macro options for meta. |
| navigation | array | The navigation section of the footer before a section break and the copyright and license information. See macro options for navigation. |
| content |
object |
The content licence information within the footer component. Defaults to Open Government Licence (OGL) v3 licence.
See macro options for content |
| copyright | object |
The copyright information in the footer component, this defaults to "© Crown copyright".
See macro options for copyright.
|
| container |
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. |
| rebrand | boolean |
If true, use the redesigned footer with the GOV.UK crown. Default is false.
|
| Name | Type | Description |
|---|---|---|
| visually |
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 |
The meta items add content within a unordered list to the meta section of the footer component. These appear above any text or custom html in the meta section.
See macro options for meta items.
|
| Name | Type | Description |
|---|---|---|
| text | string | Required. List item text in the meta section of the footer. |
| href | string |
Required.
List item link 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. |
| 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. You can pass any Design System grid width here – for example, "one-third", "two-thirds" or "one-half". Defaults to "full".
|
| items | array | The items within the navigation section of the footer component. See macro options for navigation items. |
| Name | Type | Description |
|---|---|---|
| text | string | Required. List item text in the navigation section of the footer. |
| href | string |
Required.
List item link 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. |
| 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.
|
| 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({
meta: {
items: [
{
href: "#",
text: "Item 1"
},
{
href: "#",
text: "Item 2"
},
{
href: "#",
text: "Item 3"
}
]
}
}) }}Adding links
You can add links to:
- your service’s privacy notice
- your service’s accessibility statement
- your service’s Cookies page
- terms and conditions
- other language options
- help content
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
<footer class="govuk-footer">
<div class="govuk-width-container">
<div class="govuk-footer__navigation">
<div class="govuk-footer__section govuk-grid-column-two-thirds">
<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="#">
Navigation item 1
</a>
</li>
<li class="govuk-footer__list-item">
<a class="govuk-footer__link" href="#">
Navigation item 2
</a>
</li>
<li class="govuk-footer__list-item">
<a class="govuk-footer__link" href="#">
Navigation item 3
</a>
</li>
<li class="govuk-footer__list-item">
<a class="govuk-footer__link" href="#">
Navigation item 4
</a>
</li>
<li class="govuk-footer__list-item">
<a class="govuk-footer__link" href="#">
Navigation item 5
</a>
</li>
<li class="govuk-footer__list-item">
<a class="govuk-footer__link" href="#">
Navigation item 6
</a>
</li>
</ul>
</div>
<div class="govuk-footer__section govuk-grid-column-one-third">
<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="#">
Navigation item 1
</a>
</li>
<li class="govuk-footer__list-item">
<a class="govuk-footer__link" href="#">
Navigation item 2
</a>
</li>
<li class="govuk-footer__list-item">
<a class="govuk-footer__link" href="#">
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
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 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. Deprecated options are marked as “Deprecated”.
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.
| Name | Type | Description |
|---|---|---|
| meta | object | The meta section of the footer after any navigation, before the copyright and license information. See macro options for meta. |
| navigation | array | The navigation section of the footer before a section break and the copyright and license information. See macro options for navigation. |
| content |
object |
The content licence information within the footer component. Defaults to Open Government Licence (OGL) v3 licence.
See macro options for content |
| copyright | object |
The copyright information in the footer component, this defaults to "© Crown copyright".
See macro options for copyright.
|
| container |
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. |
| rebrand | boolean |
If true, use the redesigned footer with the GOV.UK crown. Default is false.
|
| Name | Type | Description |
|---|---|---|
| visually |
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 |
The meta items add content within a unordered list to the meta section of the footer component. These appear above any text or custom html in the meta section.
See macro options for meta items.
|
| Name | Type | Description |
|---|---|---|
| text | string | Required. List item text in the meta section of the footer. |
| href | string |
Required.
List item link 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. |
| 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. You can pass any Design System grid width here – for example, "one-third", "two-thirds" or "one-half". Defaults to "full".
|
| items | array | The items within the navigation section of the footer component. See macro options for navigation items. |
| Name | Type | Description |
|---|---|---|
| text | string | Required. List item text in the navigation section of the footer. |
| href | string |
Required.
List item link 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. |
| 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.
|
| 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({
navigation: [
{
title: "Two column list",
width: "two-thirds",
columns: 2,
items: [
{
href: "#",
text: "Navigation item 1"
},
{
href: "#",
text: "Navigation item 2"
},
{
href: "#",
text: "Navigation item 3"
},
{
href: "#",
text: "Navigation item 4"
},
{
href: "#",
text: "Navigation item 5"
},
{
href: "#",
text: "Navigation item 6"
}
]
},
{
title: "Single column list",
width: "one-third",
items: [
{
href: "#",
text: "Navigation item 1"
},
{
href: "#",
text: "Navigation item 2"
},
{
href: "#",
text: "Navigation item 3"
}
]
}
]
}) }}Footer with links and secondary navigation
<footer class="govuk-footer">
<div class="govuk-width-container">
<div class="govuk-footer__navigation">
<div class="govuk-footer__section govuk-grid-column-two-thirds">
<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 govuk-grid-column-one-third">
<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="#" lang="cy" hreflang="cy">
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
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 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. Deprecated options are marked as “Deprecated”.
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.
| Name | Type | Description |
|---|---|---|
| meta | object | The meta section of the footer after any navigation, before the copyright and license information. See macro options for meta. |
| navigation | array | The navigation section of the footer before a section break and the copyright and license information. See macro options for navigation. |
| content |
object |
The content licence information within the footer component. Defaults to Open Government Licence (OGL) v3 licence.
See macro options for content |
| copyright | object |
The copyright information in the footer component, this defaults to "© Crown copyright".
See macro options for copyright.
|
| container |
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. |
| rebrand | boolean |
If true, use the redesigned footer with the GOV.UK crown. Default is false.
|
| Name | Type | Description |
|---|---|---|
| visually |
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 |
The meta items add content within a unordered list to the meta section of the footer component. These appear above any text or custom html in the meta section.
See macro options for meta items.
|
| Name | Type | Description |
|---|---|---|
| text | string | Required. List item text in the meta section of the footer. |
| href | string |
Required.
List item link 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. |
| 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. You can pass any Design System grid width here – for example, "one-third", "two-thirds" or "one-half". Defaults to "full".
|
| items | array | The items within the navigation section of the footer component. See macro options for navigation items. |
| Name | Type | Description |
|---|---|---|
| text | string | Required. List item text in the navigation section of the footer. |
| href | string |
Required.
List item link 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. |
| 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.
|
| 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({
navigation: [
{
title: "Services and information",
width: "two-thirds",
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",
width: "one-third",
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",
attributes: {
lang: "cy",
hreflang: "cy"
}
}
],
html: 'Built by the <a href="#" class="govuk-footer__link">Government Digital Service</a>'
}
}) }}Help improve this component
To help make sure that this page is useful, relevant and up to date, you can:
- take part in the ‘GOV.UK footer’ discussion on GitHub and share your research
- propose a change on GitHub – read more about how to propose changes in GitHub
Need help?
If you’ve got a question about the GOV.UK Design System, contact the team.