Unofficial
Internal
Components
Footer
The footer provides copyright, licensing and other information about your service and department.
Props
| Name | Type | Default | Description |
|---|---|---|---|
| id | other | 'id' attribute to place on the base HTML element | |
| classBlock | other | Block name override in BEM style classes applied to all elements | |
| classModifiers | other | BEM style modifiers to apply to the base HTML element | |
| className | other | Extra classes to apply to the base HTML element | |
| govUK | other | Whether to add the standard Gov.UK content | |
| maxContentsWidth | other | Maximum width of the contents in px units (-1 for full width) | |
| meta | other | Links to meta information | |
| metaTitle | other | Title for meta links (visually hidden) | |
| navigation | other | Secondary navigation menus |
When to use this component
Use the footer at the bottom of every page of your service.
How it works
You can add links to:
- your department’s page on GOV.UK
- other language options
- terms and conditions
- privacy policy
Stories
Standard
A standard Footer.
GOV.UK footer
The default footer for public facing websites on GOV.UK.
<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"
></path>
</svg>
<span
class="govuk-footer__license-description"
>
All content is available under the
<a
rel="license"
class="govuk-footer__link"
href="https://www.nationalarchives.gov.uk/doc/open-government-licence/version/3/"
>
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>
<Footer govUK />
Footer with secondary navigation
Footer with links to meta information
You can also include links to meta information about a site, like cookies and contact details in the footer, like this:
<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 govuk-footer__link--active"
href="#1"
>
Item 1
</a>
</li>
<li class="govuk-footer__inline-list-item">
<a
class="govuk-footer__link govuk-footer__link--active"
href="#2"
>
Item 2
</a>
</li>
<li class="govuk-footer__inline-list-item">
<a
class="govuk-footer__link govuk-footer__link--active"
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"
></path>
</svg>
<span
class="govuk-footer__license-description"
>
All content is available under the
<a
rel="license"
class="govuk-footer__link"
href="https://www.nationalarchives.gov.uk/doc/open-government-licence/version/3/"
>
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>
<Footer
govUK
meta={[
{
href: "#1",
text: "Item 1",
},
{
href: "#2",
text: "Item 2",
},
{
href: "#3",
text: "Item 3",
},
]}
/>