Components

Footer

The footer provides copyright, licensing and other information about your service.

If you use the page template, you’ll also get the footer without having to add it, as it’s included by default.

The Land Registry footer is complementary to the GOV.UK footer so that users are reassured they are working with a Government department, and can use the familiar conventions they have learnt from interacting with the UK Government.

Open this example in a new tab

HTML

<footer class="govuk-footer govuk-footer--hmlr " role="contentinfo">
  <div class="govuk-width-container ">
    <div class="govuk-footer__meta">
      <div class="govuk-footer__meta-item govuk-footer__meta-item--grow">
      </div>
      <div class="govuk-footer__meta-item">
        <span class="govuk-footer__link govuk-footer__copyright-logo govuk-footer__copyright-logo--hmlr"></span>
      </div>
    </div>
  </div>
</footer>

Nunjucks

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	Object containing options for the meta navigation. See meta.
navigation	array	Array of items for use in the navigation section of the footer. See navigation.
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.

Options for meta

Name	Type	Description
visuallyHiddenTitle	string	Title for a meta item section. Defaults to 'Support links'.
html	string	HTML to add to the meta section of the footer, which will appear below any links specified using meta.items.
text	string	Text to add to the meta section of the footer, which will appear below any links specified using meta.items. If meta.html is specified, this option is ignored.
items	array	Array of items for use in the meta section of the footer. See items.

Options for items

Name	Type	Description
text	string	Required. List item text in the meta section of the footer.
href	string	Required. List item href attribute in the meta section of the footer.
attributes	object	HTML attributes (for example data attributes) to add to the anchor in the footer meta section.

Options for navigation

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. Defaults to full width. You can pass any design system grid width here, for example, 'one-third'; 'two-thirds'; 'one-half'.
items	array	Array of items to display in the list in navigation section of the footer. See items.

Options for items

Name	Type	Description
text	string	Required. List item text in the navigation section of the footer.
href	string	Required. List item href attribute in the navigation section of the footer. Both text and href attributes need to be present to create a link.
attributes	object	HTML attributes (for example data attributes) to add to the anchor in the footer navigation section.

{% from "hmlr/components/footer/macro.njk" import hmlrFooter %}
{{ hmlrFooter() }}

When to use this component

GOV.UK footer

You must use the GOV.UK footer at the bottom of every page if your service is being hosted on one of these domains:

• gov.uk/myservice
• myservice.service.gov.uk
• myblog.blog.gov.uk

Land Registry footer

You must use the Land Registry Government footer at the bottom of every page if your service is being provided:

• as a public or professional user service, but is not hosted on a gov domain
• is for staff

How it works

The Land Registry footer works exactly the same as the GOV.UK footer, but replaces the GOV.UK specific content. The Crown copyright coat of arms and link, and the Open Government License, are removed. The Crown copyright coat of arms is replaced by the HM Land Registry logo.

This is the first version of the Land Registry footer. It’s a simpler version than the GOV.UK footer.

If you need to extend its use, you should extend it in the same was as the GOV.UK footer is used.

Adding links

You can add links to:

• privacy notice
• accessibility statement
• cookies page
• terms and conditions
• other language options

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.

Open this example in a new tab

HTML

<footer class="govuk-footer govuk-footer--hmlr " role="contentinfo">
  <div class="govuk-width-container ">
    <div class="govuk-footer__navigation">
      <div class="govuk-footer__section govuk-grid-column-one-third">
        <h2 class="govuk-footer__heading govuk-heading-m">Navigation 1</h2>
        <ul class="govuk-footer__list ">
          <li class="govuk-footer__list-item">
            <a class="govuk-footer__link" href="#">
              Item 1.1
            </a>
          </li>
          <li class="govuk-footer__list-item">
            <a class="govuk-footer__link" href="#">
              Item 1.2
            </a>
          </li>
          <li class="govuk-footer__list-item">
            <a class="govuk-footer__link" href="#">
              Item 1.3
            </a>
          </li>
        </ul>
      </div>
      <div class="govuk-footer__section govuk-grid-column-two-thirds">
        <h2 class="govuk-footer__heading govuk-heading-m">Navigation 2</h2>
        <ul class="govuk-footer__list govuk-footer__list--columns-2">
          <li class="govuk-footer__list-item">
            <a class="govuk-footer__link" href="#">
              Item 2.1
            </a>
          </li>
          <li class="govuk-footer__list-item">
            <a class="govuk-footer__link" href="#">
              Item 2.2
            </a>
          </li>
          <li class="govuk-footer__list-item">
            <a class="govuk-footer__link" href="#">
              Item 2.3
            </a>
          </li>
          <li class="govuk-footer__list-item">
            <a class="govuk-footer__link" href="#">
              Item 2.4
            </a>
          </li>
          <li class="govuk-footer__list-item">
            <a class="govuk-footer__link" href="#">
              Item 2.5
            </a>
          </li>
          <li class="govuk-footer__list-item">
            <a class="govuk-footer__link" href="#">
              Item 2.6
            </a>
          </li>
        </ul>
      </div>
    </div>
    <hr class="govuk-footer__section-break">
    <div class="govuk-footer__meta">
      <div class="govuk-footer__meta-item govuk-footer__meta-item--grow">
        <h2 class="govuk-visually-hidden">Other links</h2>
        <ul class="govuk-footer__inline-list">
          <li class="govuk-footer__inline-list-item">
            <a class="govuk-footer__link" href="#">
              Meta item 1
            </a>
          </li>
          <li class="govuk-footer__inline-list-item">
            <a class="govuk-footer__link" href="#">
              Meta item 2
            </a>
          </li>
          <li class="govuk-footer__inline-list-item">
            <a class="govuk-footer__link" href="#">
              Meta item 3
            </a>
          </li>
        </ul>
        <div class="govuk-footer__meta-custom">
          Meta <em>HTML</em>
        </div>
      </div>
      <div class="govuk-footer__meta-item">
        <span class="govuk-footer__link govuk-footer__copyright-logo govuk-footer__copyright-logo--hmlr"></span>
      </div>
    </div>
  </div>
</footer>

Nunjucks

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	Object containing options for the meta navigation. See meta.
navigation	array	Array of items for use in the navigation section of the footer. See navigation.
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.

Options for meta

Name	Type	Description
visuallyHiddenTitle	string	Title for a meta item section. Defaults to 'Support links'.
html	string	HTML to add to the meta section of the footer, which will appear below any links specified using meta.items.
text	string	Text to add to the meta section of the footer, which will appear below any links specified using meta.items. If meta.html is specified, this option is ignored.
items	array	Array of items for use in the meta section of the footer. See items.

Options for items

Name	Type	Description
text	string	Required. List item text in the meta section of the footer.
href	string	Required. List item href attribute in the meta section of the footer.
attributes	object	HTML attributes (for example data attributes) to add to the anchor in the footer meta section.

Options for navigation

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. Defaults to full width. You can pass any design system grid width here, for example, 'one-third'; 'two-thirds'; 'one-half'.
items	array	Array of items to display in the list in navigation section of the footer. See items.

Options for items

Name	Type	Description
text	string	Required. List item text in the navigation section of the footer.
href	string	Required. List item href attribute in the navigation section of the footer. Both text and href attributes need to be present to create a link.
attributes	object	HTML attributes (for example data attributes) to add to the anchor in the footer navigation section.

{% from "hmlr/components/footer/macro.njk" import hmlrFooter %}
{{ hmlrFooter({
  meta: {
    visuallyHiddenTitle: "Other links",
    html: "Meta <em>HTML</em>",
    text: "Meta text",
    items: [
      {
        text: "Meta item 1",
        href: "#"
      },
      {
        text: "Meta item 2",
        href: "#"
      },
      {
        text: "Meta item 3",
        href: "#"
      }
    ]
  },
  navigation: [
    {
      title: "Navigation 1",
      width: "one-third",
      items: [
        {
          text: "Item 1.1",
          href: "#"
        },
        {
          text: "Item 1.2",
          href: "#"
        },
        {
          text: "Item 1.3",
          href: "#"
        }
      ]
    },
    {
      title: "Navigation 2",
      width: "two-thirds",
      columns: 2,
      items: [
        {
          text: "Item 2.1",
          href: "#"
        },
        {
          text: "Item 2.2",
          href: "#"
        },
        {
          text: "Item 2.3",
          href: "#"
        },
        {
          text: "Item 2.4",
          href: "#"
        },
        {
          text: "Item 2.5",
          href: "#"
        },
        {
          text: "Item 2.6",
          href: "#"
        }
      ]
    }
  ]
}) }}

Help improve this component

If you spot a problem with this guidance you can propose a change.

If you’re not sure how to do this, read guidance on how to propose changes in GitHub.

Need help?

If you’ve got a question about the HM Land Registry Design System, contact the team.