Footer
The 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.
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 meta. |
navigation | array | The navigation section of the footer before a section break and the copyright and license information. See navigation. |
contentLicence | object | The content licence information within the footer component. Defaults to Open Government Licence (OGL) v3 licence. See contentLicence. |
copyright | object | The copyright information in the footer component, this defaults to See copyright. |
containerClasses | string | Classes that can be added to the inner container, useful if you want to make the footer full width. |
classes | string | Classes to add to the footer component container. |
attributes | object | HTML attributes (for example data attributes) to add to the footer component container. |
Name | Type | Description |
---|---|---|
text | string | If |
html | string | If |
Name | Type | Description |
---|---|---|
text | string | If |
html | string | If |
Name | Type | Description |
---|---|---|
visuallyHiddenTitle | string | Title for a meta item section. Defaults to |
html | string | HTML to add to the meta section of the footer, which will appear below any links specified using meta |
text | string | Text to add to the meta section of the footer, which will appear below any links specified using meta |
items | array | The meta See items. |
Name | Type | Description |
---|---|---|
text | string | Required. List item text in the meta section of the footer. |
href | string | Required. List item link |
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, |
items | array | The items within the navigation section of the footer component. See items. |
Name | Type | Description |
---|---|---|
text | string | Required. List item text in the navigation section of the footer. |
href | string | Required. List item link |
attributes | object | HTML attributes (for example data attributes) to add to the anchor in the footer navigation section. |
{% from "moduk/components/footer/macro.njk" import modukFooter -%}
{{ modukFooter({}) -}}
When to use this component
Use the footer at the bottom of every page of your service.
How it works
See GOV.UK footer component guidance for detail on how this component works.
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.
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 meta. |
navigation | array | The navigation section of the footer before a section break and the copyright and license information. See navigation. |
contentLicence | object | The content licence information within the footer component. Defaults to Open Government Licence (OGL) v3 licence. See contentLicence. |
copyright | object | The copyright information in the footer component, this defaults to See copyright. |
containerClasses | string | Classes that can be added to the inner container, useful if you want to make the footer full width. |
classes | string | Classes to add to the footer component container. |
attributes | object | HTML attributes (for example data attributes) to add to the footer component container. |
Name | Type | Description |
---|---|---|
text | string | If |
html | string | If |
Name | Type | Description |
---|---|---|
text | string | If |
html | string | If |
Name | Type | Description |
---|---|---|
visuallyHiddenTitle | string | Title for a meta item section. Defaults to |
html | string | HTML to add to the meta section of the footer, which will appear below any links specified using meta |
text | string | Text to add to the meta section of the footer, which will appear below any links specified using meta |
items | array | The meta See items. |
Name | Type | Description |
---|---|---|
text | string | Required. List item text in the meta section of the footer. |
href | string | Required. List item link |
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, |
items | array | The items within the navigation section of the footer component. See items. |
Name | Type | Description |
---|---|---|
text | string | Required. List item text in the navigation section of the footer. |
href | string | Required. List item link |
attributes | object | HTML attributes (for example data attributes) to add to the anchor in the footer navigation section. |
{% from "moduk/components/footer/macro.njk" import modukFooter -%}
{{ modukFooter({}) -}}
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="#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>
Nunjucks macro options
Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.
Some options are required for the macro to work; these are marked as "Required" in the option description.
If you’re using Nunjucks macros in production with "html" options, or ones ending with "html", you must sanitise the HTML to protect against cross-site scripting exploits.
Name | Type | Description |
---|---|---|
meta | object | The meta section of the footer after any navigation, before the copyright and license information. See meta. |
navigation | array | The navigation section of the footer before a section break and the copyright and license information. See navigation. |
contentLicence | object | The content licence information within the footer component. Defaults to Open Government Licence (OGL) v3 licence. See contentLicence. |
copyright | object | The copyright information in the footer component, this defaults to See copyright. |
containerClasses | string | Classes that can be added to the inner container, useful if you want to make the footer full width. |
classes | string | Classes to add to the footer component container. |
attributes | object | HTML attributes (for example data attributes) to add to the footer component container. |
Name | Type | Description |
---|---|---|
text | string | If |
html | string | If |
Name | Type | Description |
---|---|---|
text | string | If |
html | string | If |
Name | Type | Description |
---|---|---|
visuallyHiddenTitle | string | Title for a meta item section. Defaults to |
html | string | HTML to add to the meta section of the footer, which will appear below any links specified using meta |
text | string | Text to add to the meta section of the footer, which will appear below any links specified using meta |
items | array | The meta See items. |
Name | Type | Description |
---|---|---|
text | string | Required. List item text in the meta section of the footer. |
href | string | Required. List item link |
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, |
items | array | The items within the navigation section of the footer component. See items. |
Name | Type | Description |
---|---|---|
text | string | Required. List item text in the navigation section of the footer. |
href | string | Required. List item link |
attributes | object | HTML attributes (for example data attributes) to add to the anchor in the footer navigation section. |
{% from "moduk/components/footer/macro.njk" import modukFooter -%}
{{ modukFooter({
meta: {
items: [
{
href: "#1",
text: "Item 1"
},
{
href: "#2",
text: "Item 2"
},
{
href: "#3",
text: "Item 3"
}
]
}
}) -}}
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="#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>
Nunjucks macro options
Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.
Some options are required for the macro to work; these are marked as "Required" in the option description.
If you’re using Nunjucks macros in production with "html" options, or ones ending with "html", you must sanitise the HTML to protect against cross-site scripting exploits.
Name | Type | Description |
---|---|---|
meta | object | The meta section of the footer after any navigation, before the copyright and license information. See meta. |
navigation | array | The navigation section of the footer before a section break and the copyright and license information. See navigation. |
contentLicence | object | The content licence information within the footer component. Defaults to Open Government Licence (OGL) v3 licence. See contentLicence. |
copyright | object | The copyright information in the footer component, this defaults to See copyright. |
containerClasses | string | Classes that can be added to the inner container, useful if you want to make the footer full width. |
classes | string | Classes to add to the footer component container. |
attributes | object | HTML attributes (for example data attributes) to add to the footer component container. |
Name | Type | Description |
---|---|---|
text | string | If |
html | string | If |
Name | Type | Description |
---|---|---|
text | string | If |
html | string | If |
Name | Type | Description |
---|---|---|
visuallyHiddenTitle | string | Title for a meta item section. Defaults to |
html | string | HTML to add to the meta section of the footer, which will appear below any links specified using meta |
text | string | Text to add to the meta section of the footer, which will appear below any links specified using meta |
items | array | The meta See items. |
Name | Type | Description |
---|---|---|
text | string | Required. List item text in the meta section of the footer. |
href | string | Required. List item link |
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, |
items | array | The items within the navigation section of the footer component. See items. |
Name | Type | Description |
---|---|---|
text | string | Required. List item text in the navigation section of the footer. |
href | string | Required. List item link |
attributes | object | HTML attributes (for example data attributes) to add to the anchor in the footer navigation section. |
{% from "moduk/components/footer/macro.njk" import modukFooter -%}
{{ modukFooter({
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 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">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">
<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>
<div class="govuk-footer__meta-custom">
Built by <a href="#" class="govuk-footer__link">Defence Digital</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.
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 meta. |
navigation | array | The navigation section of the footer before a section break and the copyright and license information. See navigation. |
contentLicence | object | The content licence information within the footer component. Defaults to Open Government Licence (OGL) v3 licence. See contentLicence. |
copyright | object | The copyright information in the footer component, this defaults to See copyright. |
containerClasses | string | Classes that can be added to the inner container, useful if you want to make the footer full width. |
classes | string | Classes to add to the footer component container. |
attributes | object | HTML attributes (for example data attributes) to add to the footer component container. |
Name | Type | Description |
---|---|---|
text | string | If |
html | string | If |
Name | Type | Description |
---|---|---|
text | string | If |
html | string | If |
Name | Type | Description |
---|---|---|
visuallyHiddenTitle | string | Title for a meta item section. Defaults to |
html | string | HTML to add to the meta section of the footer, which will appear below any links specified using meta |
text | string | Text to add to the meta section of the footer, which will appear below any links specified using meta |
items | array | The meta See items. |
Name | Type | Description |
---|---|---|
text | string | Required. List item text in the meta section of the footer. |
href | string | Required. List item link |
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, |
items | array | The items within the navigation section of the footer component. See items. |
Name | Type | Description |
---|---|---|
text | string | Required. List item text in the navigation section of the footer. |
href | string | Required. List item link |
attributes | object | HTML attributes (for example data attributes) to add to the anchor in the footer navigation section. |
{% from "moduk/components/footer/macro.njk" import modukFooter -%}
{{ modukFooter({
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"
}
]
}
],
meta: {
items: [
{
href: "#1",
text: "Item 1"
},
{
href: "#2",
text: "Item 2"
},
{
href: "#3",
text: "Item 3"
}
],
html: 'Built by <a href="#" class="govuk-footer__link">Defence Digital</a>'
}
}) -}}
Changes from the GOV.UK version
MOD.UK Design System components are closely based on GOV.UK Design System components.
For this component we’ve changed the font.
Have you tested this component?
Let us know how we could improve this component or share your user research findings.
Email the MOD.UK Design System team at design-system@digital.mod.uk
Need help?
Email the MOD.UK Design System team at design-system@digital.mod.uk if you have questions or feedback.