Footer
Code
Markup
<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>Macro
{% from "govuk/components/footer/macro.njk" import govukFooter %}
{{ govukFooter({}) }}Footer with custom HTML content licence and copyright notice
Open this example in a new tab: footer with custom html content licence and copyright notice
Open Government Licence and Crown copyright notice translated into Welsh
Code
Markup
<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">
Mae’r holl gynnwys ar gael dan <a class="govuk-footer__link" href="https://www.nationalarchives.gov.uk/doc/open-government-licence-cymraeg/version/3/" rel="license">Drwydded y Llywodraeth Agored v3.0</a>, ac eithrio lle nodir yn wahanol
</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/"
>
<span>Hawlfraint y Goron</span>
</a>
</div>
</div>
</div>
</footer>Macro
{% from "govuk/components/footer/macro.njk" import govukFooter %}
{{ govukFooter({
contentLicence: {
html: 'Mae’r holl gynnwys ar gael dan <a class="govuk-footer__link" href="https://www.nationalarchives.gov.uk/doc/open-government-licence-cymraeg/version/3/" rel="license">Drwydded y Llywodraeth Agored v3.0</a>, ac eithrio lle nodir yn wahanol'
},
copyright: {
html: "<span>Hawlfraint y Goron</span>"
}
}) }}Footer with custom text content licence and copyright notice
Open this example in a new tab: footer with custom text content licence and copyright notice
Open Government Licence and Crown copyright notice translated into Welsh
Code
Markup
<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">
Mae’r holl gynnwys ar gael dan Drwydded y Llywodraeth Agored v3.0, ac eithrio lle nodir yn wahanol
</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/"
>
© Hawlfraint y Goron
</a>
</div>
</div>
</div>
</footer>Macro
{% from "govuk/components/footer/macro.njk" import govukFooter %}
{{ govukFooter({
contentLicence: {
text: "Mae’r holl gynnwys ar gael dan Drwydded y Llywodraeth Agored v3.0, ac eithrio lle nodir yn wahanol"
},
copyright: {
text: "© Hawlfraint y Goron"
}
}) }}Footer with meta
Open this example in a new tab: footer with meta
Secondary navigation with meta information relating to the site
Code
Markup
<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">Items</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
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>Macro
{% from "govuk/components/footer/macro.njk" import govukFooter %}
{{ govukFooter({
meta: {
visuallyHiddenTitle: "Items",
items: [
{
href: "#1",
text: "Item 1"
},
{
href: "#2",
text: "Item 2"
},
{
href: "#3",
text: "Item 3"
}
]
}
}) }}Code
Markup
<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>
<div class="govuk-footer__meta-custom">
GOV.UK Prototype Kit v7.0.1
</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>Macro
{% from "govuk/components/footer/macro.njk" import govukFooter %}
{{ govukFooter({
meta: {
text: "GOV.UK Prototype Kit v7.0.1"
}
}) }}Footer with meta links and meta content
Open this example in a new tab: footer with meta links and meta content
Secondary navigation links and custom meta text
Code
Markup
<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">
Bibendum Ornare
</a>
</li>
<li class="govuk-footer__inline-list-item">
<a class="govuk-footer__link" href="#2">
Nullam
</a>
</li>
<li class="govuk-footer__inline-list-item">
<a class="govuk-footer__link" href="#3">
Tortor Fringilla
</a>
</li>
<li class="govuk-footer__inline-list-item">
<a class="govuk-footer__link" href="#4">
Tellus
</a>
</li>
<li class="govuk-footer__inline-list-item">
<a class="govuk-footer__link" href="#5">
Egestas Nullam
</a>
</li>
<li class="govuk-footer__inline-list-item">
<a class="govuk-footer__link" href="#6">
Euismod Etiam
</a>
</li>
<li class="govuk-footer__inline-list-item">
<a class="govuk-footer__link" href="#7">
Fusce Sollicitudin
</a>
</li>
<li class="govuk-footer__inline-list-item">
<a class="govuk-footer__link" href="#8">
Ligula Nullam Ultricies
</a>
</li>
</ul>
<div class="govuk-footer__meta-custom">
Built by the <a href="#" class="govuk-footer__link">Department of Magical Law Enforcement</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>Macro
{% from "govuk/components/footer/macro.njk" import govukFooter %}
{{ govukFooter({
meta: {
items: [
{
href: "#1",
text: "Bibendum Ornare"
},
{
href: "#2",
text: "Nullam"
},
{
href: "#3",
text: "Tortor Fringilla"
},
{
href: "#4",
text: "Tellus"
},
{
href: "#5",
text: "Egestas Nullam"
},
{
href: "#6",
text: "Euismod Etiam"
},
{
href: "#7",
text: "Fusce Sollicitudin"
},
{
href: "#8",
text: "Ligula Nullam Ultricies"
}
],
html: 'Built by the <a href="#" class="govuk-footer__link">Department of Magical Law Enforcement</a>'
}
}) }}Code
Markup
<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>
<div class="govuk-footer__meta-custom">
GOV.UK Prototype Kit v7.0.1
</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>Macro
{% from "govuk/components/footer/macro.njk" import govukFooter %}
{{ govukFooter({
meta: {
text: "GOV.UK Prototype Kit v7.0.1"
}
}) }}Footer with default width navigation (one column)
Open this example in a new tab: footer with default width navigation (one column)
Code
Markup
<footer class="govuk-footer" role="contentinfo">
<div class="govuk-width-container">
<div class="govuk-footer__navigation">
<div class="govuk-footer__section govuk-grid-column-full">
<h2 class="govuk-footer__heading govuk-heading-m">Navigation section</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>
<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>
<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>Macro
{% from "govuk/components/footer/macro.njk" import govukFooter %}
{{ govukFooter({
navigation: [
{
title: "Navigation section",
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"
}
]
}
]
}) }}Footer with default width navigation (two columns)
Open this example in a new tab: footer with default width navigation (two columns)
Code
Markup
<footer class="govuk-footer" role="contentinfo">
<div class="govuk-width-container">
<div class="govuk-footer__navigation">
<div class="govuk-footer__section govuk-grid-column-full">
<h2 class="govuk-footer__heading govuk-heading-m">Navigation section</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>
<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>Macro
{% from "govuk/components/footer/macro.njk" import govukFooter %}
{{ govukFooter({
navigation: [
{
title: "Navigation section",
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"
}
]
}
]
}) }}Footer with navigation
Code
Markup
<footer class="govuk-footer" role="contentinfo">
<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="#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 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="#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
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>Macro
{% from "govuk/components/footer/macro.njk" import govukFooter %}
{{ govukFooter({
navigation: [
{
title: "Two column list",
width: "two-thirds",
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",
width: "one-third",
items: [
{
href: "#1",
text: "Navigation item 1"
},
{
href: "#2",
text: "Navigation item 2"
},
{
href: "#3",
text: "Navigation item 3"
}
]
}
]
}) }}Footer Full GDS example
Open this example in a new tab: footer full gds example
A full example based on GOV.UK's current footer
Code
Markup
<footer class="govuk-footer" role="contentinfo">
<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">Coronavirus (COVID-19)</h2>
<ul class="govuk-footer__list">
<li class="govuk-footer__list-item">
<a class="govuk-footer__link" href="/coronavirus">
Coronavirus (COVID-19): guidance and support
</a>
</li>
</ul>
</div>
<div class="govuk-footer__section govuk-grid-column-one-third">
<h2 class="govuk-footer__heading govuk-heading-m">Brexit</h2>
<ul class="govuk-footer__list">
<li class="govuk-footer__list-item">
<a class="govuk-footer__link" href="/brexit">
Check what you need to do
</a>
</li>
</ul>
</div>
<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="/browse/benefits">
Benefits
</a>
</li>
<li class="govuk-footer__list-item">
<a class="govuk-footer__link" href="/browse/births-deaths-marriages">
Births, deaths, marriages and care
</a>
</li>
<li class="govuk-footer__list-item">
<a class="govuk-footer__link" href="/browse/business">
Business and self-employed
</a>
</li>
<li class="govuk-footer__list-item">
<a class="govuk-footer__link" href="/browse/childcare-parenting">
Childcare and parenting
</a>
</li>
<li class="govuk-footer__list-item">
<a class="govuk-footer__link" href="/browse/citizenship">
Citizenship and living in the UK
</a>
</li>
<li class="govuk-footer__list-item">
<a class="govuk-footer__link" href="/browse/justice">
Crime, justice and the law
</a>
</li>
<li class="govuk-footer__list-item">
<a class="govuk-footer__link" href="/browse/disabilities">
Disabled people
</a>
</li>
<li class="govuk-footer__list-item">
<a class="govuk-footer__link" href="/browse/driving">
Driving and transport
</a>
</li>
<li class="govuk-footer__list-item">
<a class="govuk-footer__link" href="/browse/education">
Education and learning
</a>
</li>
<li class="govuk-footer__list-item">
<a class="govuk-footer__link" href="/browse/employing-people">
Employing people
</a>
</li>
<li class="govuk-footer__list-item">
<a class="govuk-footer__link" href="/browse/environment-countryside">
Environment and countryside
</a>
</li>
<li class="govuk-footer__list-item">
<a class="govuk-footer__link" href="/browse/housing-local-services">
Housing and local services
</a>
</li>
<li class="govuk-footer__list-item">
<a class="govuk-footer__link" href="/browse/tax">
Money and tax
</a>
</li>
<li class="govuk-footer__list-item">
<a class="govuk-footer__link" href="/browse/abroad">
Passports, travel and living abroad
</a>
</li>
<li class="govuk-footer__list-item">
<a class="govuk-footer__link" href="/browse/visas-immigration">
Visas and immigration
</a>
</li>
<li class="govuk-footer__list-item">
<a class="govuk-footer__link" href="/browse/working">
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="/government/how-government-works">
How government works
</a>
</li>
<li class="govuk-footer__list-item">
<a class="govuk-footer__link" href="/government/organisations">
Departments
</a>
</li>
<li class="govuk-footer__list-item">
<a class="govuk-footer__link" href="/world">
Worldwide
</a>
</li>
<li class="govuk-footer__list-item">
<a class="govuk-footer__link" href="/government/policies">
Policies
</a>
</li>
<li class="govuk-footer__list-item">
<a class="govuk-footer__link" href="/government/publications">
Publications
</a>
</li>
<li class="govuk-footer__list-item">
<a class="govuk-footer__link" href="/government/announcements">
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">
Help
</a>
</li>
<li class="govuk-footer__inline-list-item">
<a class="govuk-footer__link" href="/help/cookies">
Cookies
</a>
</li>
<li class="govuk-footer__inline-list-item">
<a class="govuk-footer__link" href="/contact">
Contact
</a>
</li>
<li class="govuk-footer__inline-list-item">
<a class="govuk-footer__link" href="/help/terms-conditions">
Terms and conditions
</a>
</li>
<li class="govuk-footer__inline-list-item">
<a class="govuk-footer__link" href="/cymraeg">
Rhestr o Wasanaethau Cymraeg
</a>
</li>
</ul>
<div class="govuk-footer__meta-custom">
Built by the <a class="govuk-footer__link" href="#">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>Macro
{% from "govuk/components/footer/macro.njk" import govukFooter %}
{{ govukFooter({
navigation: [
{
title: "Coronavirus (COVID-19)",
width: "two-thirds",
items: [
{
href: "/coronavirus",
text: "Coronavirus (COVID-19): guidance and support"
}
]
},
{
title: "Brexit",
width: "one-third",
items: [
{
href: "/brexit",
text: "Check what you need to do"
}
]
},
{
title: "Services and information",
width: "two-thirds",
columns: 2,
items: [
{
href: "/browse/benefits",
text: "Benefits"
},
{
href: "/browse/births-deaths-marriages",
text: "Births, deaths, marriages and care"
},
{
href: "/browse/business",
text: "Business and self-employed"
},
{
href: "/browse/childcare-parenting",
text: "Childcare and parenting"
},
{
href: "/browse/citizenship",
text: "Citizenship and living in the UK"
},
{
href: "/browse/justice",
text: "Crime, justice and the law"
},
{
href: "/browse/disabilities",
text: "Disabled people"
},
{
href: "/browse/driving",
text: "Driving and transport"
},
{
href: "/browse/education",
text: "Education and learning"
},
{
href: "/browse/employing-people",
text: "Employing people"
},
{
href: "/browse/environment-countryside",
text: "Environment and countryside"
},
{
href: "/browse/housing-local-services",
text: "Housing and local services"
},
{
href: "/browse/tax",
text: "Money and tax"
},
{
href: "/browse/abroad",
text: "Passports, travel and living abroad"
},
{
href: "/browse/visas-immigration",
text: "Visas and immigration"
},
{
href: "/browse/working",
text: "Working, jobs and pensions"
}
]
},
{
title: "Departments and policy",
width: "one-third",
items: [
{
href: "/government/how-government-works",
text: "How government works"
},
{
href: "/government/organisations",
text: "Departments"
},
{
href: "/world",
text: "Worldwide"
},
{
href: "/government/policies",
text: "Policies"
},
{
href: "/government/publications",
text: "Publications"
},
{
href: "/government/announcements",
text: "Announcements"
}
]
}
],
meta: {
items: [
{
href: "/help",
text: "Help"
},
{
href: "/help/cookies",
text: "Cookies"
},
{
href: "/contact",
text: "Contact"
},
{
href: "/help/terms-conditions",
text: "Terms and conditions"
},
{
href: "/cymraeg",
text: "Rhestr o Wasanaethau Cymraeg"
}
],
html: 'Built by the <a class="govuk-footer__link" href="#">Government Digital Service</a>'
}
}) }}Footer Three equal columns
Open this example in a new tab: footer three equal columns
A full example to demonstrate three equal width columns
Code
Markup
<footer class="govuk-footer" role="contentinfo">
<div class="govuk-width-container">
<div class="govuk-footer__navigation">
<div class="govuk-footer__section govuk-grid-column-one-third">
<h2 class="govuk-footer__heading govuk-heading-m">Single column list 1</h2>
<ul class="govuk-footer__list govuk-footer__list--columns-1">
<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 govuk-grid-column-one-third">
<h2 class="govuk-footer__heading govuk-heading-m">Single column list 2</h2>
<ul class="govuk-footer__list govuk-footer__list--columns-1">
<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 govuk-grid-column-one-third">
<h2 class="govuk-footer__heading govuk-heading-m">Single column list 3</h2>
<ul class="govuk-footer__list govuk-footer__list--columns-1">
<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>
<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>Macro
{% from "govuk/components/footer/macro.njk" import govukFooter %}
{{ govukFooter({
navigation: [
{
title: "Single column list 1",
width: "one-third",
columns: 1,
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 2",
width: "one-third",
columns: 1,
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 3",
width: "one-third",
columns: 1,
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"
}
]
}
]
}) }}