<p>
Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.
</p>
<p>
Some options are required for the macro to work; these are marked as "Required" in the option description.
</p>
<p>
If you're using Nunjucks macros in production with "html" options, or ones ending with "html", you must sanitise the HTML to protect against <a href="https://developer.mozilla.org/en-US/docs/Glossary/Cross-site_scripting">cross-site scripting exploits</a>.
</p>
<table class="govuk-table app-options__table" id="options-default-1--primary">
<caption class="govuk-table__caption govuk-heading-m govuk-visually-hidden">Primary options</caption>
<thead class="govuk-table__head">
<tr class="govuk-table__row">
<th class="govuk-table__header app-options__limit-table-cell" scope="col">Name</th>
<th class="govuk-table__header app-options__limit-table-cell" scope="col">Type</th>
<th class="govuk-table__header" scope="col">Description</th>
</tr>
</thead>
<tbody class="govuk-table__body">
<tr class="govuk-table__row">
<th class="govuk-table__header" scope="row">meta</th>
<td class="govuk-table__cell ">object</td>
<td class="govuk-table__cell ">
Object containing options for the meta navigation.
See <a href="#options-default-1--meta">meta</a>.
</td>
</tr>
<tr class="govuk-table__row">
<th class="govuk-table__header" scope="row">navigation</th>
<td class="govuk-table__cell ">array</td>
<td class="govuk-table__cell ">
Array of items for use in the navigation section of the footer.
See <a href="#options-default-1--navigation">navigation</a>.
</td>
</tr>
<tr class="govuk-table__row">
<th class="govuk-table__header" scope="row">contentLicence</th>
<td class="govuk-table__cell ">object</td>
<td class="govuk-table__cell ">
The content licence information. Defaults to Open Government Licence (OGL) v3 licence.
See <a href="#options-default-1--contentLicence">contentLicence</a>.
</td>
</tr>
<tr class="govuk-table__row">
<th class="govuk-table__header" scope="row">copyright</th>
<td class="govuk-table__cell ">object</td>
<td class="govuk-table__cell ">
The copyright information, this defaults to Crown Copyright.
See <a href="#options-default-1--copyright">copyright</a>.
</td>
</tr>
<tr class="govuk-table__row">
<th class="govuk-table__header" scope="row">containerClasses</th>
<td class="govuk-table__cell ">string</td>
<td class="govuk-table__cell ">
Classes that can be added to the inner container, useful if you want to make the footer full width.
</td>
</tr>
<tr class="govuk-table__row">
<th class="govuk-table__header" scope="row">classes</th>
<td class="govuk-table__cell ">string</td>
<td class="govuk-table__cell ">
Classes to add to the footer component container.
</td>
</tr>
<tr class="govuk-table__row">
<th class="govuk-table__header" scope="row">attributes</th>
<td class="govuk-table__cell ">object</td>
<td class="govuk-table__cell ">
HTML attributes (for example data attributes) to add to the footer component container.
</td>
</tr>
</tbody>
</table>
<table class="govuk-table app-options__table" id="options-default-1--meta">
<caption class="govuk-table__caption govuk-heading-m ">Options for meta</caption>
<thead class="govuk-table__head">
<tr class="govuk-table__row">
<th class="govuk-table__header app-options__limit-table-cell" scope="col">Name</th>
<th class="govuk-table__header app-options__limit-table-cell" scope="col">Type</th>
<th class="govuk-table__header" scope="col">Description</th>
</tr>
</thead>
<tbody class="govuk-table__body">
<tr class="govuk-table__row">
<th class="govuk-table__header" scope="row">visuallyHiddenTitle</th>
<td class="govuk-table__cell ">string</td>
<td class="govuk-table__cell ">
Title for a meta item section. Defaults to 'Support links'.
</td>
</tr>
<tr class="govuk-table__row">
<th class="govuk-table__header" scope="row">html</th>
<td class="govuk-table__cell ">string</td>
<td class="govuk-table__cell ">
HTML to add to the meta section of the footer, which will appear below any links specified using meta.items.
</td>
</tr>
<tr class="govuk-table__row">
<th class="govuk-table__header" scope="row">text</th>
<td class="govuk-table__cell ">string</td>
<td class="govuk-table__cell ">
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.
</td>
</tr>
<tr class="govuk-table__row">
<th class="govuk-table__header" scope="row">items</th>
<td class="govuk-table__cell ">array</td>
<td class="govuk-table__cell ">
Array of items for use in the meta section of the footer.
See <a href="#options-default-1--items">items</a>.
</td>
</tr>
</tbody>
</table>
<table class="govuk-table app-options__table" id="options-default-1--items">
<caption class="govuk-table__caption govuk-heading-m ">Options for items</caption>
<thead class="govuk-table__head">
<tr class="govuk-table__row">
<th class="govuk-table__header app-options__limit-table-cell" scope="col">Name</th>
<th class="govuk-table__header app-options__limit-table-cell" scope="col">Type</th>
<th class="govuk-table__header" scope="col">Description</th>
</tr>
</thead>
<tbody class="govuk-table__body">
<tr class="govuk-table__row">
<th class="govuk-table__header" scope="row">text</th>
<td class="govuk-table__cell ">string</td>
<td class="govuk-table__cell ">
<strong>Required.</strong>
List item text in the meta section of the footer.
</td>
</tr>
<tr class="govuk-table__row">
<th class="govuk-table__header" scope="row">href</th>
<td class="govuk-table__cell ">string</td>
<td class="govuk-table__cell ">
<strong>Required.</strong>
List item href attribute in the meta section of the footer.
</td>
</tr>
<tr class="govuk-table__row">
<th class="govuk-table__header" scope="row">attributes</th>
<td class="govuk-table__cell ">object</td>
<td class="govuk-table__cell ">
HTML attributes (for example data attributes) to add to the anchor in the footer meta section.
</td>
</tr>
</tbody>
</table>
<table class="govuk-table app-options__table" id="options-default-1--navigation">
<caption class="govuk-table__caption govuk-heading-m ">Options for navigation</caption>
<thead class="govuk-table__head">
<tr class="govuk-table__row">
<th class="govuk-table__header app-options__limit-table-cell" scope="col">Name</th>
<th class="govuk-table__header app-options__limit-table-cell" scope="col">Type</th>
<th class="govuk-table__header" scope="col">Description</th>
</tr>
</thead>
<tbody class="govuk-table__body">
<tr class="govuk-table__row">
<th class="govuk-table__header" scope="row">title</th>
<td class="govuk-table__cell ">string</td>
<td class="govuk-table__cell ">
<strong>Required.</strong>
Title for a section.
</td>
</tr>
<tr class="govuk-table__row">
<th class="govuk-table__header" scope="row">columns</th>
<td class="govuk-table__cell ">integer</td>
<td class="govuk-table__cell ">
Amount of columns to display items in navigation section of the footer.
</td>
</tr>
<tr class="govuk-table__row">
<th class="govuk-table__header" scope="row">width</th>
<td class="govuk-table__cell ">string</td>
<td class="govuk-table__cell ">
Width of each navigation section in the footer. Defaults to full width. You can pass any design system grid width here, for example, 'one-third'; 'two-thirds'; 'one-half'.
</td>
</tr>
<tr class="govuk-table__row">
<th class="govuk-table__header" scope="row">items</th>
<td class="govuk-table__cell ">array</td>
<td class="govuk-table__cell ">
Array of items to display in the list in navigation section of the footer.
See <a href="#options-default-1--items">items</a>.
</td>
</tr>
</tbody>
</table>
<table class="govuk-table app-options__table" id="options-default-1--items">
<caption class="govuk-table__caption govuk-heading-m ">Options for items</caption>
<thead class="govuk-table__head">
<tr class="govuk-table__row">
<th class="govuk-table__header app-options__limit-table-cell" scope="col">Name</th>
<th class="govuk-table__header app-options__limit-table-cell" scope="col">Type</th>
<th class="govuk-table__header" scope="col">Description</th>
</tr>
</thead>
<tbody class="govuk-table__body">
<tr class="govuk-table__row">
<th class="govuk-table__header" scope="row">text</th>
<td class="govuk-table__cell ">string</td>
<td class="govuk-table__cell ">
<strong>Required.</strong>
List item text in the navigation section of the footer.
</td>
</tr>
<tr class="govuk-table__row">
<th class="govuk-table__header" scope="row">href</th>
<td class="govuk-table__cell ">string</td>
<td class="govuk-table__cell ">
<strong>Required.</strong>
List item href attribute in the navigation section of the footer. Both <code>text</code> and <code>href</code> attributes need to be present to create a link.
</td>
</tr>
<tr class="govuk-table__row">
<th class="govuk-table__header" scope="row">attributes</th>
<td class="govuk-table__cell ">object</td>
<td class="govuk-table__cell ">
HTML attributes (for example data attributes) to add to the anchor in the footer navigation section.
</td>
</tr>
</tbody>
</table>
<table class="govuk-table app-options__table" id="options-default-1--contentLicence">
<caption class="govuk-table__caption govuk-heading-m ">Options for contentLicence</caption>
<thead class="govuk-table__head">
<tr class="govuk-table__row">
<th class="govuk-table__header app-options__limit-table-cell" scope="col">Name</th>
<th class="govuk-table__header app-options__limit-table-cell" scope="col">Type</th>
<th class="govuk-table__header" scope="col">Description</th>
</tr>
</thead>
<tbody class="govuk-table__body">
<tr class="govuk-table__row">
<th class="govuk-table__header" scope="row">text</th>
<td class="govuk-table__cell ">string</td>
<td class="govuk-table__cell ">
If <code>html</code> is set, this is not required. If <code>html</code> is provided, the <code>text</code> option will be ignored. If neither are provided, the text for the Open Government Licence is used.
</td>
</tr>
<tr class="govuk-table__row">
<th class="govuk-table__header" scope="row">html</th>
<td class="govuk-table__cell ">string</td>
<td class="govuk-table__cell ">
If <code>text</code> is set, this is not required. If <code>html</code> is provided, the <code>text</code> option will be ignored. If neither are provided, the text for the Open Government Licence is used. The content licence is inside a <code><span></code> element, so you can only add <a href="https://html.spec.whatwg.org/#phrasing-content">phrasing content</a> to it.
</td>
</tr>
</tbody>
</table>
<table class="govuk-table app-options__table" id="options-default-1--copyright">
<caption class="govuk-table__caption govuk-heading-m ">Options for copyright</caption>
<thead class="govuk-table__head">
<tr class="govuk-table__row">
<th class="govuk-table__header app-options__limit-table-cell" scope="col">Name</th>
<th class="govuk-table__header app-options__limit-table-cell" scope="col">Type</th>
<th class="govuk-table__header" scope="col">Description</th>
</tr>
</thead>
<tbody class="govuk-table__body">
<tr class="govuk-table__row">
<th class="govuk-table__header" scope="row">text</th>
<td class="govuk-table__cell ">string</td>
<td class="govuk-table__cell ">
If <code>html</code> is set, this is not required. If <code>html</code> is provided, the <code>text</code> option will be ignored. If neither are provided, Crown copyright is used.
</td>
</tr>
<tr class="govuk-table__row">
<th class="govuk-table__header" scope="row">html</th>
<td class="govuk-table__cell ">string</td>
<td class="govuk-table__cell ">
If <code>text</code> is set, this is not required. If <code>html</code> is provided, the <code>text</code> option will be ignored. If neither are provided, Crown copyright is used. The copyright notice is inside an <code><a></code> element, so you can only use text formatting elements within it.
</td>
</tr>
</tbody>
</table>
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.
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.
<p>
Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.
</p>
<p>
Some options are required for the macro to work; these are marked as "Required" in the option description.
</p>
<p>
If you're using Nunjucks macros in production with "html" options, or ones ending with "html", you must sanitise the HTML to protect against <a href="https://developer.mozilla.org/en-US/docs/Glossary/Cross-site_scripting">cross-site scripting exploits</a>.
</p>
<table class="govuk-table app-options__table" id="options-footer-second-example--primary">
<caption class="govuk-table__caption govuk-heading-m govuk-visually-hidden">Primary options</caption>
<thead class="govuk-table__head">
<tr class="govuk-table__row">
<th class="govuk-table__header app-options__limit-table-cell" scope="col">Name</th>
<th class="govuk-table__header app-options__limit-table-cell" scope="col">Type</th>
<th class="govuk-table__header" scope="col">Description</th>
</tr>
</thead>
<tbody class="govuk-table__body">
<tr class="govuk-table__row">
<th class="govuk-table__header" scope="row">meta</th>
<td class="govuk-table__cell ">object</td>
<td class="govuk-table__cell ">
Object containing options for the meta navigation.
See <a href="#options-footer-second-example--meta">meta</a>.
</td>
</tr>
<tr class="govuk-table__row">
<th class="govuk-table__header" scope="row">navigation</th>
<td class="govuk-table__cell ">array</td>
<td class="govuk-table__cell ">
Array of items for use in the navigation section of the footer.
See <a href="#options-footer-second-example--navigation">navigation</a>.
</td>
</tr>
<tr class="govuk-table__row">
<th class="govuk-table__header" scope="row">contentLicence</th>
<td class="govuk-table__cell ">object</td>
<td class="govuk-table__cell ">
The content licence information. Defaults to Open Government Licence (OGL) v3 licence.
See <a href="#options-footer-second-example--contentLicence">contentLicence</a>.
</td>
</tr>
<tr class="govuk-table__row">
<th class="govuk-table__header" scope="row">copyright</th>
<td class="govuk-table__cell ">object</td>
<td class="govuk-table__cell ">
The copyright information, this defaults to Crown Copyright.
See <a href="#options-footer-second-example--copyright">copyright</a>.
</td>
</tr>
<tr class="govuk-table__row">
<th class="govuk-table__header" scope="row">containerClasses</th>
<td class="govuk-table__cell ">string</td>
<td class="govuk-table__cell ">
Classes that can be added to the inner container, useful if you want to make the footer full width.
</td>
</tr>
<tr class="govuk-table__row">
<th class="govuk-table__header" scope="row">classes</th>
<td class="govuk-table__cell ">string</td>
<td class="govuk-table__cell ">
Classes to add to the footer component container.
</td>
</tr>
<tr class="govuk-table__row">
<th class="govuk-table__header" scope="row">attributes</th>
<td class="govuk-table__cell ">object</td>
<td class="govuk-table__cell ">
HTML attributes (for example data attributes) to add to the footer component container.
</td>
</tr>
</tbody>
</table>
<table class="govuk-table app-options__table" id="options-footer-second-example--meta">
<caption class="govuk-table__caption govuk-heading-m ">Options for meta</caption>
<thead class="govuk-table__head">
<tr class="govuk-table__row">
<th class="govuk-table__header app-options__limit-table-cell" scope="col">Name</th>
<th class="govuk-table__header app-options__limit-table-cell" scope="col">Type</th>
<th class="govuk-table__header" scope="col">Description</th>
</tr>
</thead>
<tbody class="govuk-table__body">
<tr class="govuk-table__row">
<th class="govuk-table__header" scope="row">visuallyHiddenTitle</th>
<td class="govuk-table__cell ">string</td>
<td class="govuk-table__cell ">
Title for a meta item section. Defaults to 'Support links'.
</td>
</tr>
<tr class="govuk-table__row">
<th class="govuk-table__header" scope="row">html</th>
<td class="govuk-table__cell ">string</td>
<td class="govuk-table__cell ">
HTML to add to the meta section of the footer, which will appear below any links specified using meta.items.
</td>
</tr>
<tr class="govuk-table__row">
<th class="govuk-table__header" scope="row">text</th>
<td class="govuk-table__cell ">string</td>
<td class="govuk-table__cell ">
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.
</td>
</tr>
<tr class="govuk-table__row">
<th class="govuk-table__header" scope="row">items</th>
<td class="govuk-table__cell ">array</td>
<td class="govuk-table__cell ">
Array of items for use in the meta section of the footer.
See <a href="#options-footer-second-example--items">items</a>.
</td>
</tr>
</tbody>
</table>
<table class="govuk-table app-options__table" id="options-footer-second-example--items">
<caption class="govuk-table__caption govuk-heading-m ">Options for items</caption>
<thead class="govuk-table__head">
<tr class="govuk-table__row">
<th class="govuk-table__header app-options__limit-table-cell" scope="col">Name</th>
<th class="govuk-table__header app-options__limit-table-cell" scope="col">Type</th>
<th class="govuk-table__header" scope="col">Description</th>
</tr>
</thead>
<tbody class="govuk-table__body">
<tr class="govuk-table__row">
<th class="govuk-table__header" scope="row">text</th>
<td class="govuk-table__cell ">string</td>
<td class="govuk-table__cell ">
<strong>Required.</strong>
List item text in the meta section of the footer.
</td>
</tr>
<tr class="govuk-table__row">
<th class="govuk-table__header" scope="row">href</th>
<td class="govuk-table__cell ">string</td>
<td class="govuk-table__cell ">
<strong>Required.</strong>
List item href attribute in the meta section of the footer.
</td>
</tr>
<tr class="govuk-table__row">
<th class="govuk-table__header" scope="row">attributes</th>
<td class="govuk-table__cell ">object</td>
<td class="govuk-table__cell ">
HTML attributes (for example data attributes) to add to the anchor in the footer meta section.
</td>
</tr>
</tbody>
</table>
<table class="govuk-table app-options__table" id="options-footer-second-example--navigation">
<caption class="govuk-table__caption govuk-heading-m ">Options for navigation</caption>
<thead class="govuk-table__head">
<tr class="govuk-table__row">
<th class="govuk-table__header app-options__limit-table-cell" scope="col">Name</th>
<th class="govuk-table__header app-options__limit-table-cell" scope="col">Type</th>
<th class="govuk-table__header" scope="col">Description</th>
</tr>
</thead>
<tbody class="govuk-table__body">
<tr class="govuk-table__row">
<th class="govuk-table__header" scope="row">title</th>
<td class="govuk-table__cell ">string</td>
<td class="govuk-table__cell ">
<strong>Required.</strong>
Title for a section.
</td>
</tr>
<tr class="govuk-table__row">
<th class="govuk-table__header" scope="row">columns</th>
<td class="govuk-table__cell ">integer</td>
<td class="govuk-table__cell ">
Amount of columns to display items in navigation section of the footer.
</td>
</tr>
<tr class="govuk-table__row">
<th class="govuk-table__header" scope="row">width</th>
<td class="govuk-table__cell ">string</td>
<td class="govuk-table__cell ">
Width of each navigation section in the footer. Defaults to full width. You can pass any design system grid width here, for example, 'one-third'; 'two-thirds'; 'one-half'.
</td>
</tr>
<tr class="govuk-table__row">
<th class="govuk-table__header" scope="row">items</th>
<td class="govuk-table__cell ">array</td>
<td class="govuk-table__cell ">
Array of items to display in the list in navigation section of the footer.
See <a href="#options-footer-second-example--items">items</a>.
</td>
</tr>
</tbody>
</table>
<table class="govuk-table app-options__table" id="options-footer-second-example--items">
<caption class="govuk-table__caption govuk-heading-m ">Options for items</caption>
<thead class="govuk-table__head">
<tr class="govuk-table__row">
<th class="govuk-table__header app-options__limit-table-cell" scope="col">Name</th>
<th class="govuk-table__header app-options__limit-table-cell" scope="col">Type</th>
<th class="govuk-table__header" scope="col">Description</th>
</tr>
</thead>
<tbody class="govuk-table__body">
<tr class="govuk-table__row">
<th class="govuk-table__header" scope="row">text</th>
<td class="govuk-table__cell ">string</td>
<td class="govuk-table__cell ">
<strong>Required.</strong>
List item text in the navigation section of the footer.
</td>
</tr>
<tr class="govuk-table__row">
<th class="govuk-table__header" scope="row">href</th>
<td class="govuk-table__cell ">string</td>
<td class="govuk-table__cell ">
<strong>Required.</strong>
List item href attribute in the navigation section of the footer. Both <code>text</code> and <code>href</code> attributes need to be present to create a link.
</td>
</tr>
<tr class="govuk-table__row">
<th class="govuk-table__header" scope="row">attributes</th>
<td class="govuk-table__cell ">object</td>
<td class="govuk-table__cell ">
HTML attributes (for example data attributes) to add to the anchor in the footer navigation section.
</td>
</tr>
</tbody>
</table>
<table class="govuk-table app-options__table" id="options-footer-second-example--contentLicence">
<caption class="govuk-table__caption govuk-heading-m ">Options for contentLicence</caption>
<thead class="govuk-table__head">
<tr class="govuk-table__row">
<th class="govuk-table__header app-options__limit-table-cell" scope="col">Name</th>
<th class="govuk-table__header app-options__limit-table-cell" scope="col">Type</th>
<th class="govuk-table__header" scope="col">Description</th>
</tr>
</thead>
<tbody class="govuk-table__body">
<tr class="govuk-table__row">
<th class="govuk-table__header" scope="row">text</th>
<td class="govuk-table__cell ">string</td>
<td class="govuk-table__cell ">
If <code>html</code> is set, this is not required. If <code>html</code> is provided, the <code>text</code> option will be ignored. If neither are provided, the text for the Open Government Licence is used.
</td>
</tr>
<tr class="govuk-table__row">
<th class="govuk-table__header" scope="row">html</th>
<td class="govuk-table__cell ">string</td>
<td class="govuk-table__cell ">
If <code>text</code> is set, this is not required. If <code>html</code> is provided, the <code>text</code> option will be ignored. If neither are provided, the text for the Open Government Licence is used. The content licence is inside a <code><span></code> element, so you can only add <a href="https://html.spec.whatwg.org/#phrasing-content">phrasing content</a> to it.
</td>
</tr>
</tbody>
</table>
<table class="govuk-table app-options__table" id="options-footer-second-example--copyright">
<caption class="govuk-table__caption govuk-heading-m ">Options for copyright</caption>
<thead class="govuk-table__head">
<tr class="govuk-table__row">
<th class="govuk-table__header app-options__limit-table-cell" scope="col">Name</th>
<th class="govuk-table__header app-options__limit-table-cell" scope="col">Type</th>
<th class="govuk-table__header" scope="col">Description</th>
</tr>
</thead>
<tbody class="govuk-table__body">
<tr class="govuk-table__row">
<th class="govuk-table__header" scope="row">text</th>
<td class="govuk-table__cell ">string</td>
<td class="govuk-table__cell ">
If <code>html</code> is set, this is not required. If <code>html</code> is provided, the <code>text</code> option will be ignored. If neither are provided, Crown copyright is used.
</td>
</tr>
<tr class="govuk-table__row">
<th class="govuk-table__header" scope="row">html</th>
<td class="govuk-table__cell ">string</td>
<td class="govuk-table__cell ">
If <code>text</code> is set, this is not required. If <code>html</code> is provided, the <code>text</code> option will be ignored. If neither are provided, Crown copyright is used. The copyright notice is inside an <code><a></code> element, so you can only use text formatting elements within it.
</td>
</tr>
</tbody>
</table>
<p>
Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.
</p>
<p>
Some options are required for the macro to work; these are marked as "Required" in the option description.
</p>
<p>
If you're using Nunjucks macros in production with "html" options, or ones ending with "html", you must sanitise the HTML to protect against <a href="https://developer.mozilla.org/en-US/docs/Glossary/Cross-site_scripting">cross-site scripting exploits</a>.
</p>
<table class="govuk-table app-options__table" id="options-footer-with-links-to-meta-information-example--primary">
<caption class="govuk-table__caption govuk-heading-m govuk-visually-hidden">Primary options</caption>
<thead class="govuk-table__head">
<tr class="govuk-table__row">
<th class="govuk-table__header app-options__limit-table-cell" scope="col">Name</th>
<th class="govuk-table__header app-options__limit-table-cell" scope="col">Type</th>
<th class="govuk-table__header" scope="col">Description</th>
</tr>
</thead>
<tbody class="govuk-table__body">
<tr class="govuk-table__row">
<th class="govuk-table__header" scope="row">meta</th>
<td class="govuk-table__cell ">object</td>
<td class="govuk-table__cell ">
Object containing options for the meta navigation.
See <a href="#options-footer-with-links-to-meta-information-example--meta">meta</a>.
</td>
</tr>
<tr class="govuk-table__row">
<th class="govuk-table__header" scope="row">navigation</th>
<td class="govuk-table__cell ">array</td>
<td class="govuk-table__cell ">
Array of items for use in the navigation section of the footer.
See <a href="#options-footer-with-links-to-meta-information-example--navigation">navigation</a>.
</td>
</tr>
<tr class="govuk-table__row">
<th class="govuk-table__header" scope="row">contentLicence</th>
<td class="govuk-table__cell ">object</td>
<td class="govuk-table__cell ">
The content licence information. Defaults to Open Government Licence (OGL) v3 licence.
See <a href="#options-footer-with-links-to-meta-information-example--contentLicence">contentLicence</a>.
</td>
</tr>
<tr class="govuk-table__row">
<th class="govuk-table__header" scope="row">copyright</th>
<td class="govuk-table__cell ">object</td>
<td class="govuk-table__cell ">
The copyright information, this defaults to Crown Copyright.
See <a href="#options-footer-with-links-to-meta-information-example--copyright">copyright</a>.
</td>
</tr>
<tr class="govuk-table__row">
<th class="govuk-table__header" scope="row">containerClasses</th>
<td class="govuk-table__cell ">string</td>
<td class="govuk-table__cell ">
Classes that can be added to the inner container, useful if you want to make the footer full width.
</td>
</tr>
<tr class="govuk-table__row">
<th class="govuk-table__header" scope="row">classes</th>
<td class="govuk-table__cell ">string</td>
<td class="govuk-table__cell ">
Classes to add to the footer component container.
</td>
</tr>
<tr class="govuk-table__row">
<th class="govuk-table__header" scope="row">attributes</th>
<td class="govuk-table__cell ">object</td>
<td class="govuk-table__cell ">
HTML attributes (for example data attributes) to add to the footer component container.
</td>
</tr>
</tbody>
</table>
<table class="govuk-table app-options__table" id="options-footer-with-links-to-meta-information-example--meta">
<caption class="govuk-table__caption govuk-heading-m ">Options for meta</caption>
<thead class="govuk-table__head">
<tr class="govuk-table__row">
<th class="govuk-table__header app-options__limit-table-cell" scope="col">Name</th>
<th class="govuk-table__header app-options__limit-table-cell" scope="col">Type</th>
<th class="govuk-table__header" scope="col">Description</th>
</tr>
</thead>
<tbody class="govuk-table__body">
<tr class="govuk-table__row">
<th class="govuk-table__header" scope="row">visuallyHiddenTitle</th>
<td class="govuk-table__cell ">string</td>
<td class="govuk-table__cell ">
Title for a meta item section. Defaults to 'Support links'.
</td>
</tr>
<tr class="govuk-table__row">
<th class="govuk-table__header" scope="row">html</th>
<td class="govuk-table__cell ">string</td>
<td class="govuk-table__cell ">
HTML to add to the meta section of the footer, which will appear below any links specified using meta.items.
</td>
</tr>
<tr class="govuk-table__row">
<th class="govuk-table__header" scope="row">text</th>
<td class="govuk-table__cell ">string</td>
<td class="govuk-table__cell ">
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.
</td>
</tr>
<tr class="govuk-table__row">
<th class="govuk-table__header" scope="row">items</th>
<td class="govuk-table__cell ">array</td>
<td class="govuk-table__cell ">
Array of items for use in the meta section of the footer.
See <a href="#options-footer-with-links-to-meta-information-example--items">items</a>.
</td>
</tr>
</tbody>
</table>
<table class="govuk-table app-options__table" id="options-footer-with-links-to-meta-information-example--items">
<caption class="govuk-table__caption govuk-heading-m ">Options for items</caption>
<thead class="govuk-table__head">
<tr class="govuk-table__row">
<th class="govuk-table__header app-options__limit-table-cell" scope="col">Name</th>
<th class="govuk-table__header app-options__limit-table-cell" scope="col">Type</th>
<th class="govuk-table__header" scope="col">Description</th>
</tr>
</thead>
<tbody class="govuk-table__body">
<tr class="govuk-table__row">
<th class="govuk-table__header" scope="row">text</th>
<td class="govuk-table__cell ">string</td>
<td class="govuk-table__cell ">
<strong>Required.</strong>
List item text in the meta section of the footer.
</td>
</tr>
<tr class="govuk-table__row">
<th class="govuk-table__header" scope="row">href</th>
<td class="govuk-table__cell ">string</td>
<td class="govuk-table__cell ">
<strong>Required.</strong>
List item href attribute in the meta section of the footer.
</td>
</tr>
<tr class="govuk-table__row">
<th class="govuk-table__header" scope="row">attributes</th>
<td class="govuk-table__cell ">object</td>
<td class="govuk-table__cell ">
HTML attributes (for example data attributes) to add to the anchor in the footer meta section.
</td>
</tr>
</tbody>
</table>
<table class="govuk-table app-options__table" id="options-footer-with-links-to-meta-information-example--navigation">
<caption class="govuk-table__caption govuk-heading-m ">Options for navigation</caption>
<thead class="govuk-table__head">
<tr class="govuk-table__row">
<th class="govuk-table__header app-options__limit-table-cell" scope="col">Name</th>
<th class="govuk-table__header app-options__limit-table-cell" scope="col">Type</th>
<th class="govuk-table__header" scope="col">Description</th>
</tr>
</thead>
<tbody class="govuk-table__body">
<tr class="govuk-table__row">
<th class="govuk-table__header" scope="row">title</th>
<td class="govuk-table__cell ">string</td>
<td class="govuk-table__cell ">
<strong>Required.</strong>
Title for a section.
</td>
</tr>
<tr class="govuk-table__row">
<th class="govuk-table__header" scope="row">columns</th>
<td class="govuk-table__cell ">integer</td>
<td class="govuk-table__cell ">
Amount of columns to display items in navigation section of the footer.
</td>
</tr>
<tr class="govuk-table__row">
<th class="govuk-table__header" scope="row">width</th>
<td class="govuk-table__cell ">string</td>
<td class="govuk-table__cell ">
Width of each navigation section in the footer. Defaults to full width. You can pass any design system grid width here, for example, 'one-third'; 'two-thirds'; 'one-half'.
</td>
</tr>
<tr class="govuk-table__row">
<th class="govuk-table__header" scope="row">items</th>
<td class="govuk-table__cell ">array</td>
<td class="govuk-table__cell ">
Array of items to display in the list in navigation section of the footer.
See <a href="#options-footer-with-links-to-meta-information-example--items">items</a>.
</td>
</tr>
</tbody>
</table>
<table class="govuk-table app-options__table" id="options-footer-with-links-to-meta-information-example--items">
<caption class="govuk-table__caption govuk-heading-m ">Options for items</caption>
<thead class="govuk-table__head">
<tr class="govuk-table__row">
<th class="govuk-table__header app-options__limit-table-cell" scope="col">Name</th>
<th class="govuk-table__header app-options__limit-table-cell" scope="col">Type</th>
<th class="govuk-table__header" scope="col">Description</th>
</tr>
</thead>
<tbody class="govuk-table__body">
<tr class="govuk-table__row">
<th class="govuk-table__header" scope="row">text</th>
<td class="govuk-table__cell ">string</td>
<td class="govuk-table__cell ">
<strong>Required.</strong>
List item text in the navigation section of the footer.
</td>
</tr>
<tr class="govuk-table__row">
<th class="govuk-table__header" scope="row">href</th>
<td class="govuk-table__cell ">string</td>
<td class="govuk-table__cell ">
<strong>Required.</strong>
List item href attribute in the navigation section of the footer. Both <code>text</code> and <code>href</code> attributes need to be present to create a link.
</td>
</tr>
<tr class="govuk-table__row">
<th class="govuk-table__header" scope="row">attributes</th>
<td class="govuk-table__cell ">object</td>
<td class="govuk-table__cell ">
HTML attributes (for example data attributes) to add to the anchor in the footer navigation section.
</td>
</tr>
</tbody>
</table>
<table class="govuk-table app-options__table" id="options-footer-with-links-to-meta-information-example--contentLicence">
<caption class="govuk-table__caption govuk-heading-m ">Options for contentLicence</caption>
<thead class="govuk-table__head">
<tr class="govuk-table__row">
<th class="govuk-table__header app-options__limit-table-cell" scope="col">Name</th>
<th class="govuk-table__header app-options__limit-table-cell" scope="col">Type</th>
<th class="govuk-table__header" scope="col">Description</th>
</tr>
</thead>
<tbody class="govuk-table__body">
<tr class="govuk-table__row">
<th class="govuk-table__header" scope="row">text</th>
<td class="govuk-table__cell ">string</td>
<td class="govuk-table__cell ">
If <code>html</code> is set, this is not required. If <code>html</code> is provided, the <code>text</code> option will be ignored. If neither are provided, the text for the Open Government Licence is used.
</td>
</tr>
<tr class="govuk-table__row">
<th class="govuk-table__header" scope="row">html</th>
<td class="govuk-table__cell ">string</td>
<td class="govuk-table__cell ">
If <code>text</code> is set, this is not required. If <code>html</code> is provided, the <code>text</code> option will be ignored. If neither are provided, the text for the Open Government Licence is used. The content licence is inside a <code><span></code> element, so you can only add <a href="https://html.spec.whatwg.org/#phrasing-content">phrasing content</a> to it.
</td>
</tr>
</tbody>
</table>
<table class="govuk-table app-options__table" id="options-footer-with-links-to-meta-information-example--copyright">
<caption class="govuk-table__caption govuk-heading-m ">Options for copyright</caption>
<thead class="govuk-table__head">
<tr class="govuk-table__row">
<th class="govuk-table__header app-options__limit-table-cell" scope="col">Name</th>
<th class="govuk-table__header app-options__limit-table-cell" scope="col">Type</th>
<th class="govuk-table__header" scope="col">Description</th>
</tr>
</thead>
<tbody class="govuk-table__body">
<tr class="govuk-table__row">
<th class="govuk-table__header" scope="row">text</th>
<td class="govuk-table__cell ">string</td>
<td class="govuk-table__cell ">
If <code>html</code> is set, this is not required. If <code>html</code> is provided, the <code>text</code> option will be ignored. If neither are provided, Crown copyright is used.
</td>
</tr>
<tr class="govuk-table__row">
<th class="govuk-table__header" scope="row">html</th>
<td class="govuk-table__cell ">string</td>
<td class="govuk-table__cell ">
If <code>text</code> is set, this is not required. If <code>html</code> is provided, the <code>text</code> option will be ignored. If neither are provided, Crown copyright is used. The copyright notice is inside an <code><a></code> element, so you can only use text formatting elements within it.
</td>
</tr>
</tbody>
</table>
Use ‘Privacy’, ‘Accessibility’, ‘Cookies’ and ‘Terms and conditions’ for the link text.
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.
<p>
Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.
</p>
<p>
Some options are required for the macro to work; these are marked as "Required" in the option description.
</p>
<p>
If you're using Nunjucks macros in production with "html" options, or ones ending with "html", you must sanitise the HTML to protect against <a href="https://developer.mozilla.org/en-US/docs/Glossary/Cross-site_scripting">cross-site scripting exploits</a>.
</p>
<table class="govuk-table app-options__table" id="options-footer-with-secondary-navigation-example--primary">
<caption class="govuk-table__caption govuk-heading-m govuk-visually-hidden">Primary options</caption>
<thead class="govuk-table__head">
<tr class="govuk-table__row">
<th class="govuk-table__header app-options__limit-table-cell" scope="col">Name</th>
<th class="govuk-table__header app-options__limit-table-cell" scope="col">Type</th>
<th class="govuk-table__header" scope="col">Description</th>
</tr>
</thead>
<tbody class="govuk-table__body">
<tr class="govuk-table__row">
<th class="govuk-table__header" scope="row">meta</th>
<td class="govuk-table__cell ">object</td>
<td class="govuk-table__cell ">
Object containing options for the meta navigation.
See <a href="#options-footer-with-secondary-navigation-example--meta">meta</a>.
</td>
</tr>
<tr class="govuk-table__row">
<th class="govuk-table__header" scope="row">navigation</th>
<td class="govuk-table__cell ">array</td>
<td class="govuk-table__cell ">
Array of items for use in the navigation section of the footer.
See <a href="#options-footer-with-secondary-navigation-example--navigation">navigation</a>.
</td>
</tr>
<tr class="govuk-table__row">
<th class="govuk-table__header" scope="row">contentLicence</th>
<td class="govuk-table__cell ">object</td>
<td class="govuk-table__cell ">
The content licence information. Defaults to Open Government Licence (OGL) v3 licence.
See <a href="#options-footer-with-secondary-navigation-example--contentLicence">contentLicence</a>.
</td>
</tr>
<tr class="govuk-table__row">
<th class="govuk-table__header" scope="row">copyright</th>
<td class="govuk-table__cell ">object</td>
<td class="govuk-table__cell ">
The copyright information, this defaults to Crown Copyright.
See <a href="#options-footer-with-secondary-navigation-example--copyright">copyright</a>.
</td>
</tr>
<tr class="govuk-table__row">
<th class="govuk-table__header" scope="row">containerClasses</th>
<td class="govuk-table__cell ">string</td>
<td class="govuk-table__cell ">
Classes that can be added to the inner container, useful if you want to make the footer full width.
</td>
</tr>
<tr class="govuk-table__row">
<th class="govuk-table__header" scope="row">classes</th>
<td class="govuk-table__cell ">string</td>
<td class="govuk-table__cell ">
Classes to add to the footer component container.
</td>
</tr>
<tr class="govuk-table__row">
<th class="govuk-table__header" scope="row">attributes</th>
<td class="govuk-table__cell ">object</td>
<td class="govuk-table__cell ">
HTML attributes (for example data attributes) to add to the footer component container.
</td>
</tr>
</tbody>
</table>
<table class="govuk-table app-options__table" id="options-footer-with-secondary-navigation-example--meta">
<caption class="govuk-table__caption govuk-heading-m ">Options for meta</caption>
<thead class="govuk-table__head">
<tr class="govuk-table__row">
<th class="govuk-table__header app-options__limit-table-cell" scope="col">Name</th>
<th class="govuk-table__header app-options__limit-table-cell" scope="col">Type</th>
<th class="govuk-table__header" scope="col">Description</th>
</tr>
</thead>
<tbody class="govuk-table__body">
<tr class="govuk-table__row">
<th class="govuk-table__header" scope="row">visuallyHiddenTitle</th>
<td class="govuk-table__cell ">string</td>
<td class="govuk-table__cell ">
Title for a meta item section. Defaults to 'Support links'.
</td>
</tr>
<tr class="govuk-table__row">
<th class="govuk-table__header" scope="row">html</th>
<td class="govuk-table__cell ">string</td>
<td class="govuk-table__cell ">
HTML to add to the meta section of the footer, which will appear below any links specified using meta.items.
</td>
</tr>
<tr class="govuk-table__row">
<th class="govuk-table__header" scope="row">text</th>
<td class="govuk-table__cell ">string</td>
<td class="govuk-table__cell ">
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.
</td>
</tr>
<tr class="govuk-table__row">
<th class="govuk-table__header" scope="row">items</th>
<td class="govuk-table__cell ">array</td>
<td class="govuk-table__cell ">
Array of items for use in the meta section of the footer.
See <a href="#options-footer-with-secondary-navigation-example--items">items</a>.
</td>
</tr>
</tbody>
</table>
<table class="govuk-table app-options__table" id="options-footer-with-secondary-navigation-example--items">
<caption class="govuk-table__caption govuk-heading-m ">Options for items</caption>
<thead class="govuk-table__head">
<tr class="govuk-table__row">
<th class="govuk-table__header app-options__limit-table-cell" scope="col">Name</th>
<th class="govuk-table__header app-options__limit-table-cell" scope="col">Type</th>
<th class="govuk-table__header" scope="col">Description</th>
</tr>
</thead>
<tbody class="govuk-table__body">
<tr class="govuk-table__row">
<th class="govuk-table__header" scope="row">text</th>
<td class="govuk-table__cell ">string</td>
<td class="govuk-table__cell ">
<strong>Required.</strong>
List item text in the meta section of the footer.
</td>
</tr>
<tr class="govuk-table__row">
<th class="govuk-table__header" scope="row">href</th>
<td class="govuk-table__cell ">string</td>
<td class="govuk-table__cell ">
<strong>Required.</strong>
List item href attribute in the meta section of the footer.
</td>
</tr>
<tr class="govuk-table__row">
<th class="govuk-table__header" scope="row">attributes</th>
<td class="govuk-table__cell ">object</td>
<td class="govuk-table__cell ">
HTML attributes (for example data attributes) to add to the anchor in the footer meta section.
</td>
</tr>
</tbody>
</table>
<table class="govuk-table app-options__table" id="options-footer-with-secondary-navigation-example--navigation">
<caption class="govuk-table__caption govuk-heading-m ">Options for navigation</caption>
<thead class="govuk-table__head">
<tr class="govuk-table__row">
<th class="govuk-table__header app-options__limit-table-cell" scope="col">Name</th>
<th class="govuk-table__header app-options__limit-table-cell" scope="col">Type</th>
<th class="govuk-table__header" scope="col">Description</th>
</tr>
</thead>
<tbody class="govuk-table__body">
<tr class="govuk-table__row">
<th class="govuk-table__header" scope="row">title</th>
<td class="govuk-table__cell ">string</td>
<td class="govuk-table__cell ">
<strong>Required.</strong>
Title for a section.
</td>
</tr>
<tr class="govuk-table__row">
<th class="govuk-table__header" scope="row">columns</th>
<td class="govuk-table__cell ">integer</td>
<td class="govuk-table__cell ">
Amount of columns to display items in navigation section of the footer.
</td>
</tr>
<tr class="govuk-table__row">
<th class="govuk-table__header" scope="row">width</th>
<td class="govuk-table__cell ">string</td>
<td class="govuk-table__cell ">
Width of each navigation section in the footer. Defaults to full width. You can pass any design system grid width here, for example, 'one-third'; 'two-thirds'; 'one-half'.
</td>
</tr>
<tr class="govuk-table__row">
<th class="govuk-table__header" scope="row">items</th>
<td class="govuk-table__cell ">array</td>
<td class="govuk-table__cell ">
Array of items to display in the list in navigation section of the footer.
See <a href="#options-footer-with-secondary-navigation-example--items">items</a>.
</td>
</tr>
</tbody>
</table>
<table class="govuk-table app-options__table" id="options-footer-with-secondary-navigation-example--items">
<caption class="govuk-table__caption govuk-heading-m ">Options for items</caption>
<thead class="govuk-table__head">
<tr class="govuk-table__row">
<th class="govuk-table__header app-options__limit-table-cell" scope="col">Name</th>
<th class="govuk-table__header app-options__limit-table-cell" scope="col">Type</th>
<th class="govuk-table__header" scope="col">Description</th>
</tr>
</thead>
<tbody class="govuk-table__body">
<tr class="govuk-table__row">
<th class="govuk-table__header" scope="row">text</th>
<td class="govuk-table__cell ">string</td>
<td class="govuk-table__cell ">
<strong>Required.</strong>
List item text in the navigation section of the footer.
</td>
</tr>
<tr class="govuk-table__row">
<th class="govuk-table__header" scope="row">href</th>
<td class="govuk-table__cell ">string</td>
<td class="govuk-table__cell ">
<strong>Required.</strong>
List item href attribute in the navigation section of the footer. Both <code>text</code> and <code>href</code> attributes need to be present to create a link.
</td>
</tr>
<tr class="govuk-table__row">
<th class="govuk-table__header" scope="row">attributes</th>
<td class="govuk-table__cell ">object</td>
<td class="govuk-table__cell ">
HTML attributes (for example data attributes) to add to the anchor in the footer navigation section.
</td>
</tr>
</tbody>
</table>
<table class="govuk-table app-options__table" id="options-footer-with-secondary-navigation-example--contentLicence">
<caption class="govuk-table__caption govuk-heading-m ">Options for contentLicence</caption>
<thead class="govuk-table__head">
<tr class="govuk-table__row">
<th class="govuk-table__header app-options__limit-table-cell" scope="col">Name</th>
<th class="govuk-table__header app-options__limit-table-cell" scope="col">Type</th>
<th class="govuk-table__header" scope="col">Description</th>
</tr>
</thead>
<tbody class="govuk-table__body">
<tr class="govuk-table__row">
<th class="govuk-table__header" scope="row">text</th>
<td class="govuk-table__cell ">string</td>
<td class="govuk-table__cell ">
If <code>html</code> is set, this is not required. If <code>html</code> is provided, the <code>text</code> option will be ignored. If neither are provided, the text for the Open Government Licence is used.
</td>
</tr>
<tr class="govuk-table__row">
<th class="govuk-table__header" scope="row">html</th>
<td class="govuk-table__cell ">string</td>
<td class="govuk-table__cell ">
If <code>text</code> is set, this is not required. If <code>html</code> is provided, the <code>text</code> option will be ignored. If neither are provided, the text for the Open Government Licence is used. The content licence is inside a <code><span></code> element, so you can only add <a href="https://html.spec.whatwg.org/#phrasing-content">phrasing content</a> to it.
</td>
</tr>
</tbody>
</table>
<table class="govuk-table app-options__table" id="options-footer-with-secondary-navigation-example--copyright">
<caption class="govuk-table__caption govuk-heading-m ">Options for copyright</caption>
<thead class="govuk-table__head">
<tr class="govuk-table__row">
<th class="govuk-table__header app-options__limit-table-cell" scope="col">Name</th>
<th class="govuk-table__header app-options__limit-table-cell" scope="col">Type</th>
<th class="govuk-table__header" scope="col">Description</th>
</tr>
</thead>
<tbody class="govuk-table__body">
<tr class="govuk-table__row">
<th class="govuk-table__header" scope="row">text</th>
<td class="govuk-table__cell ">string</td>
<td class="govuk-table__cell ">
If <code>html</code> is set, this is not required. If <code>html</code> is provided, the <code>text</code> option will be ignored. If neither are provided, Crown copyright is used.
</td>
</tr>
<tr class="govuk-table__row">
<th class="govuk-table__header" scope="row">html</th>
<td class="govuk-table__cell ">string</td>
<td class="govuk-table__cell ">
If <code>text</code> is set, this is not required. If <code>html</code> is provided, the <code>text</code> option will be ignored. If neither are provided, Crown copyright is used. The copyright notice is inside an <code><a></code> element, so you can only use text formatting elements within it.
</td>
</tr>
</tbody>
</table>
<p>
Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.
</p>
<p>
Some options are required for the macro to work; these are marked as "Required" in the option description.
</p>
<p>
If you're using Nunjucks macros in production with "html" options, or ones ending with "html", you must sanitise the HTML to protect against <a href="https://developer.mozilla.org/en-US/docs/Glossary/Cross-site_scripting">cross-site scripting exploits</a>.
</p>
<table class="govuk-table app-options__table" id="options-footer-with-secondary-navigation-and-links-to-meta-information-example--primary">
<caption class="govuk-table__caption govuk-heading-m govuk-visually-hidden">Primary options</caption>
<thead class="govuk-table__head">
<tr class="govuk-table__row">
<th class="govuk-table__header app-options__limit-table-cell" scope="col">Name</th>
<th class="govuk-table__header app-options__limit-table-cell" scope="col">Type</th>
<th class="govuk-table__header" scope="col">Description</th>
</tr>
</thead>
<tbody class="govuk-table__body">
<tr class="govuk-table__row">
<th class="govuk-table__header" scope="row">meta</th>
<td class="govuk-table__cell ">object</td>
<td class="govuk-table__cell ">
Object containing options for the meta navigation.
See <a href="#options-footer-with-secondary-navigation-and-links-to-meta-information-example--meta">meta</a>.
</td>
</tr>
<tr class="govuk-table__row">
<th class="govuk-table__header" scope="row">navigation</th>
<td class="govuk-table__cell ">array</td>
<td class="govuk-table__cell ">
Array of items for use in the navigation section of the footer.
See <a href="#options-footer-with-secondary-navigation-and-links-to-meta-information-example--navigation">navigation</a>.
</td>
</tr>
<tr class="govuk-table__row">
<th class="govuk-table__header" scope="row">contentLicence</th>
<td class="govuk-table__cell ">object</td>
<td class="govuk-table__cell ">
The content licence information. Defaults to Open Government Licence (OGL) v3 licence.
See <a href="#options-footer-with-secondary-navigation-and-links-to-meta-information-example--contentLicence">contentLicence</a>.
</td>
</tr>
<tr class="govuk-table__row">
<th class="govuk-table__header" scope="row">copyright</th>
<td class="govuk-table__cell ">object</td>
<td class="govuk-table__cell ">
The copyright information, this defaults to Crown Copyright.
See <a href="#options-footer-with-secondary-navigation-and-links-to-meta-information-example--copyright">copyright</a>.
</td>
</tr>
<tr class="govuk-table__row">
<th class="govuk-table__header" scope="row">containerClasses</th>
<td class="govuk-table__cell ">string</td>
<td class="govuk-table__cell ">
Classes that can be added to the inner container, useful if you want to make the footer full width.
</td>
</tr>
<tr class="govuk-table__row">
<th class="govuk-table__header" scope="row">classes</th>
<td class="govuk-table__cell ">string</td>
<td class="govuk-table__cell ">
Classes to add to the footer component container.
</td>
</tr>
<tr class="govuk-table__row">
<th class="govuk-table__header" scope="row">attributes</th>
<td class="govuk-table__cell ">object</td>
<td class="govuk-table__cell ">
HTML attributes (for example data attributes) to add to the footer component container.
</td>
</tr>
</tbody>
</table>
<table class="govuk-table app-options__table" id="options-footer-with-secondary-navigation-and-links-to-meta-information-example--meta">
<caption class="govuk-table__caption govuk-heading-m ">Options for meta</caption>
<thead class="govuk-table__head">
<tr class="govuk-table__row">
<th class="govuk-table__header app-options__limit-table-cell" scope="col">Name</th>
<th class="govuk-table__header app-options__limit-table-cell" scope="col">Type</th>
<th class="govuk-table__header" scope="col">Description</th>
</tr>
</thead>
<tbody class="govuk-table__body">
<tr class="govuk-table__row">
<th class="govuk-table__header" scope="row">visuallyHiddenTitle</th>
<td class="govuk-table__cell ">string</td>
<td class="govuk-table__cell ">
Title for a meta item section. Defaults to 'Support links'.
</td>
</tr>
<tr class="govuk-table__row">
<th class="govuk-table__header" scope="row">html</th>
<td class="govuk-table__cell ">string</td>
<td class="govuk-table__cell ">
HTML to add to the meta section of the footer, which will appear below any links specified using meta.items.
</td>
</tr>
<tr class="govuk-table__row">
<th class="govuk-table__header" scope="row">text</th>
<td class="govuk-table__cell ">string</td>
<td class="govuk-table__cell ">
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.
</td>
</tr>
<tr class="govuk-table__row">
<th class="govuk-table__header" scope="row">items</th>
<td class="govuk-table__cell ">array</td>
<td class="govuk-table__cell ">
Array of items for use in the meta section of the footer.
See <a href="#options-footer-with-secondary-navigation-and-links-to-meta-information-example--items">items</a>.
</td>
</tr>
</tbody>
</table>
<table class="govuk-table app-options__table" id="options-footer-with-secondary-navigation-and-links-to-meta-information-example--items">
<caption class="govuk-table__caption govuk-heading-m ">Options for items</caption>
<thead class="govuk-table__head">
<tr class="govuk-table__row">
<th class="govuk-table__header app-options__limit-table-cell" scope="col">Name</th>
<th class="govuk-table__header app-options__limit-table-cell" scope="col">Type</th>
<th class="govuk-table__header" scope="col">Description</th>
</tr>
</thead>
<tbody class="govuk-table__body">
<tr class="govuk-table__row">
<th class="govuk-table__header" scope="row">text</th>
<td class="govuk-table__cell ">string</td>
<td class="govuk-table__cell ">
<strong>Required.</strong>
List item text in the meta section of the footer.
</td>
</tr>
<tr class="govuk-table__row">
<th class="govuk-table__header" scope="row">href</th>
<td class="govuk-table__cell ">string</td>
<td class="govuk-table__cell ">
<strong>Required.</strong>
List item href attribute in the meta section of the footer.
</td>
</tr>
<tr class="govuk-table__row">
<th class="govuk-table__header" scope="row">attributes</th>
<td class="govuk-table__cell ">object</td>
<td class="govuk-table__cell ">
HTML attributes (for example data attributes) to add to the anchor in the footer meta section.
</td>
</tr>
</tbody>
</table>
<table class="govuk-table app-options__table" id="options-footer-with-secondary-navigation-and-links-to-meta-information-example--navigation">
<caption class="govuk-table__caption govuk-heading-m ">Options for navigation</caption>
<thead class="govuk-table__head">
<tr class="govuk-table__row">
<th class="govuk-table__header app-options__limit-table-cell" scope="col">Name</th>
<th class="govuk-table__header app-options__limit-table-cell" scope="col">Type</th>
<th class="govuk-table__header" scope="col">Description</th>
</tr>
</thead>
<tbody class="govuk-table__body">
<tr class="govuk-table__row">
<th class="govuk-table__header" scope="row">title</th>
<td class="govuk-table__cell ">string</td>
<td class="govuk-table__cell ">
<strong>Required.</strong>
Title for a section.
</td>
</tr>
<tr class="govuk-table__row">
<th class="govuk-table__header" scope="row">columns</th>
<td class="govuk-table__cell ">integer</td>
<td class="govuk-table__cell ">
Amount of columns to display items in navigation section of the footer.
</td>
</tr>
<tr class="govuk-table__row">
<th class="govuk-table__header" scope="row">width</th>
<td class="govuk-table__cell ">string</td>
<td class="govuk-table__cell ">
Width of each navigation section in the footer. Defaults to full width. You can pass any design system grid width here, for example, 'one-third'; 'two-thirds'; 'one-half'.
</td>
</tr>
<tr class="govuk-table__row">
<th class="govuk-table__header" scope="row">items</th>
<td class="govuk-table__cell ">array</td>
<td class="govuk-table__cell ">
Array of items to display in the list in navigation section of the footer.
See <a href="#options-footer-with-secondary-navigation-and-links-to-meta-information-example--items">items</a>.
</td>
</tr>
</tbody>
</table>
<table class="govuk-table app-options__table" id="options-footer-with-secondary-navigation-and-links-to-meta-information-example--items">
<caption class="govuk-table__caption govuk-heading-m ">Options for items</caption>
<thead class="govuk-table__head">
<tr class="govuk-table__row">
<th class="govuk-table__header app-options__limit-table-cell" scope="col">Name</th>
<th class="govuk-table__header app-options__limit-table-cell" scope="col">Type</th>
<th class="govuk-table__header" scope="col">Description</th>
</tr>
</thead>
<tbody class="govuk-table__body">
<tr class="govuk-table__row">
<th class="govuk-table__header" scope="row">text</th>
<td class="govuk-table__cell ">string</td>
<td class="govuk-table__cell ">
<strong>Required.</strong>
List item text in the navigation section of the footer.
</td>
</tr>
<tr class="govuk-table__row">
<th class="govuk-table__header" scope="row">href</th>
<td class="govuk-table__cell ">string</td>
<td class="govuk-table__cell ">
<strong>Required.</strong>
List item href attribute in the navigation section of the footer. Both <code>text</code> and <code>href</code> attributes need to be present to create a link.
</td>
</tr>
<tr class="govuk-table__row">
<th class="govuk-table__header" scope="row">attributes</th>
<td class="govuk-table__cell ">object</td>
<td class="govuk-table__cell ">
HTML attributes (for example data attributes) to add to the anchor in the footer navigation section.
</td>
</tr>
</tbody>
</table>
<table class="govuk-table app-options__table" id="options-footer-with-secondary-navigation-and-links-to-meta-information-example--contentLicence">
<caption class="govuk-table__caption govuk-heading-m ">Options for contentLicence</caption>
<thead class="govuk-table__head">
<tr class="govuk-table__row">
<th class="govuk-table__header app-options__limit-table-cell" scope="col">Name</th>
<th class="govuk-table__header app-options__limit-table-cell" scope="col">Type</th>
<th class="govuk-table__header" scope="col">Description</th>
</tr>
</thead>
<tbody class="govuk-table__body">
<tr class="govuk-table__row">
<th class="govuk-table__header" scope="row">text</th>
<td class="govuk-table__cell ">string</td>
<td class="govuk-table__cell ">
If <code>html</code> is set, this is not required. If <code>html</code> is provided, the <code>text</code> option will be ignored. If neither are provided, the text for the Open Government Licence is used.
</td>
</tr>
<tr class="govuk-table__row">
<th class="govuk-table__header" scope="row">html</th>
<td class="govuk-table__cell ">string</td>
<td class="govuk-table__cell ">
If <code>text</code> is set, this is not required. If <code>html</code> is provided, the <code>text</code> option will be ignored. If neither are provided, the text for the Open Government Licence is used. The content licence is inside a <code><span></code> element, so you can only add <a href="https://html.spec.whatwg.org/#phrasing-content">phrasing content</a> to it.
</td>
</tr>
</tbody>
</table>
<table class="govuk-table app-options__table" id="options-footer-with-secondary-navigation-and-links-to-meta-information-example--copyright">
<caption class="govuk-table__caption govuk-heading-m ">Options for copyright</caption>
<thead class="govuk-table__head">
<tr class="govuk-table__row">
<th class="govuk-table__header app-options__limit-table-cell" scope="col">Name</th>
<th class="govuk-table__header app-options__limit-table-cell" scope="col">Type</th>
<th class="govuk-table__header" scope="col">Description</th>
</tr>
</thead>
<tbody class="govuk-table__body">
<tr class="govuk-table__row">
<th class="govuk-table__header" scope="row">text</th>
<td class="govuk-table__cell ">string</td>
<td class="govuk-table__cell ">
If <code>html</code> is set, this is not required. If <code>html</code> is provided, the <code>text</code> option will be ignored. If neither are provided, Crown copyright is used.
</td>
</tr>
<tr class="govuk-table__row">
<th class="govuk-table__header" scope="row">html</th>
<td class="govuk-table__cell ">string</td>
<td class="govuk-table__cell ">
If <code>text</code> is set, this is not required. If <code>html</code> is provided, the <code>text</code> option will be ignored. If neither are provided, Crown copyright is used. The copyright notice is inside an <code><a></code> element, so you can only use text formatting elements within it.
</td>
</tr>
</tbody>
</table>