Skip to main content
  1. X-GOVUK projects
  2. GOV.UK Components
  3. Footer

Footer

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

When no arguments are provided, a bare footer is generated.

Input

= govuk_footer
<%= govuk_footer %>

Output

<footer role="contentinfo" 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/">
            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>

You can also include links to meta information about a site, such as cookies and contact details in the footer:

Input

= govuk_footer(meta_items_title: "Helpful links", meta_items: meta_items)
<%= govuk_footer(meta_items_title: "Helpful links", meta_items: meta_items) %>
{ meta_items: { "One" => "#", "Two" => "#", "Three" => "#", "Four" => "#" } }

Output

<footer role="contentinfo" 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">
          Helpful links
        </h2>
        <ul class="govuk-footer__inline-list">
          <li class="govuk-footer__inline-list-item">
            <a class="govuk-footer__link" href="#">
              One
            </a>
          </li>
          <li class="govuk-footer__inline-list-item">
            <a class="govuk-footer__link" href="#">
              Two
            </a>
          </li>
          <li class="govuk-footer__inline-list-item">
            <a class="govuk-footer__link" href="#">
              Three
            </a>
          </li>
          <li class="govuk-footer__inline-list-item">
            <a class="govuk-footer__link" href="#">
              Four
            </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/">
            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>

If you need greater control of the meta links you can provide them as an array of hashes with the keys text:, href: and attr: where attr is a hash of HTML attributes.

Input

= govuk_footer(meta_items_title: "Helpful links", meta_items: meta_items)
<%= govuk_footer(meta_items_title: "Helpful links", meta_items: meta_items) %>
{
  meta_items: [
    { text: "Apricot", href: "#apr", attr: { data: { controller: "item-a" } } },
    { text: "Blackberry", href: "#blb", attr: { data: { controller: "item-b" } } },
    { text: "Cherry", href: "#chy", attr: { rel: "noopener" } },
    { text: "Damson", href: "#dsn", attr: { aria: { description: "An edible subspecies of plum" } } },
  ]
}

Output

<footer role="contentinfo" 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">
          Helpful links
        </h2>
        <ul class="govuk-footer__inline-list">
          <li class="govuk-footer__inline-list-item">
            <a class="govuk-footer__link" data-controller="item-a" href="#apr">
              Apricot
            </a>
          </li>
          <li class="govuk-footer__inline-list-item">
            <a class="govuk-footer__link" data-controller="item-b" href="#blb">
              Blackberry
            </a>
          </li>
          <li class="govuk-footer__inline-list-item">
            <a class="govuk-footer__link" rel="noopener" href="#chy">
              Cherry
            </a>
          </li>
          <li class="govuk-footer__inline-list-item">
            <a class="govuk-footer__link" aria-description="An edible subspecies of plum" href="#dsn">
              Damson
            </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/">
            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 with custom content above the licence information

The meta_html slot allows any custom HTML to be placed above the licence information. Use the govuk_footer_link_to helper to build footer links.

Input

= render GovukComponent::FooterComponent.new do |footer|
  - footer.with_meta_html do
    | Built with love by
    = govuk_footer_link_to("X-GOVUK", "https://x-govuk.github.io/")
<%= render GovukComponent::FooterComponent.new do |footer|
footer.with_meta_html do %>Built with love by
  <%= govuk_footer_link_to("X-GOVUK", "https://x-govuk.github.io/") %>
<% end; end %>

Output

<footer role="contentinfo" class="govuk-footer">
  <div class="govuk-width-container">
    <div class="govuk-footer__meta">
      <div class="govuk-footer__meta-item govuk-footer__meta-item--grow">
        <div class="govuk-footer__meta-custom">
          Built with love by<a class="govuk-footer__link" href="https://x-govuk.github.io/">
            X-GOVUK
          </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/">
            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 with entirely custom content

The meta slot overwrites the entire meta area of the footer.

Input

= render GovukComponent::FooterComponent.new do |footer|
  - footer.with_meta do
    .govuk-footer__meta-item
      p.govuk-footer__meta-custom
        | Any custom HTML can go here, all other content will be
          replaced.
<%= render GovukComponent::FooterComponent.new do |footer|
footer.with_meta do %>
  <div class="govuk-footer__meta-item">
    <p class="govuk-footer__meta-custom">
      Any custom HTML can go here, all other content will be
      replaced.
    </p>
  </div>
<% end; end %>

Output

Any custom HTML can go here, all other content will be replaced. 

<footer role="contentinfo" class="govuk-footer">
  <div class="govuk-width-container">
    <div class="govuk-footer__meta">
      <div class="govuk-footer__meta-item">
        <p class="govuk-footer__meta-custom">
          Any custom HTML can go here, all other content will be
          replaced.
        </p>
      </div>
    </div>
  </div>
</footer>

Input

= govuk_footer(copyright_text: copyright_text, meta_licence: meta_licence)
<%= govuk_footer(copyright_text: copyright_text, meta_licence: meta_licence) %>
{
  copyright_text: "© Creative Commons",
  meta_licence: "This licence allows reusers to distribute, remix, adapt, and build upon the material in any medium or format, so long as attribution is given to the creator."
}

Output

This licence allows reusers to distribute, remix, adapt, and build upon the material in any medium or format, so long as attribution is given to the creator. 
<footer role="contentinfo" class="govuk-footer">
  <div class="govuk-width-container">
    <div class="govuk-footer__meta">
      <div class="govuk-footer__meta-item govuk-footer__meta-item--grow">
        <span class="govuk-footer__licence-description">
          This licence allows reusers to distribute, remix, adapt, and build upon the material in any medium or format, so long as attribution is given to the creator.
        </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/">
          © Creative Commons
        </a>
      </div>
    </div>
  </div>
</footer>

Input

= govuk_footer do |footer|
  - footer.with_navigation do
    .govuk-footer__section.govuk-grid-column-one-third
      h2.govuk-footer__heading.govuk-heading-m Section one

      ul.govuk-footer__list.govuk-footer__list--columns-2
        li == govuk_footer_link_to("First", "#")
        li == govuk_footer_link_to("Second", "#")
        li == govuk_footer_link_to("Third", "#")
        li == govuk_footer_link_to("Fourth", "#")
        li == govuk_footer_link_to("Fifth", "#")
        li == govuk_footer_link_to("Sixth", "#")

    .govuk-footer__section.govuk-grid-column-two-thirds
      h2.govuk-footer__heading.govuk-heading-m Section two

      ul.govuk-footer__list.govuk-footer__list--columns-3
        li == govuk_footer_link_to("First", "#")
        li == govuk_footer_link_to("Second", "#")
        li == govuk_footer_link_to("Third", "#")
        li == govuk_footer_link_to("Fourth", "#")
        li == govuk_footer_link_to("Fifth", "#")
        li == govuk_footer_link_to("Sixth", "#")
        li == govuk_footer_link_to("Seventh", "#")
        li == govuk_footer_link_to("Eighth", "#")
        li == govuk_footer_link_to("Ninth", "#")
        li == govuk_footer_link_to("Tenth", "#")
<%= govuk_footer do |footer|
footer.with_navigation do %>
  <div class="govuk-footer__section govuk-grid-column-one-third">
    <h2 class="govuk-footer__heading govuk-heading-m">Section one
    </h2>
    <ul class="govuk-footer__list govuk-footer__list--columns-2">
      <li><%= govuk_footer_link_to("First", "#") %>
      </li>
      <li><%= govuk_footer_link_to("Second", "#") %>
      </li>
      <li><%= govuk_footer_link_to("Third", "#") %>
      </li>
      <li><%= govuk_footer_link_to("Fourth", "#") %>
      </li>
      <li><%= govuk_footer_link_to("Fifth", "#") %>
      </li>
      <li><%= govuk_footer_link_to("Sixth", "#") %>
      </li>
    </ul>
  </div>
  <div class="govuk-footer__section govuk-grid-column-two-thirds">
    <h2 class="govuk-footer__heading govuk-heading-m">Section two
    </h2>
    <ul class="govuk-footer__list govuk-footer__list--columns-3">
      <li><%= govuk_footer_link_to("First", "#") %>
      </li>
      <li><%= govuk_footer_link_to("Second", "#") %>
      </li>
      <li><%= govuk_footer_link_to("Third", "#") %>
      </li>
      <li><%= govuk_footer_link_to("Fourth", "#") %>
      </li>
      <li><%= govuk_footer_link_to("Fifth", "#") %>
      </li>
      <li><%= govuk_footer_link_to("Sixth", "#") %>
      </li>
      <li><%= govuk_footer_link_to("Seventh", "#") %>
      </li>
      <li><%= govuk_footer_link_to("Eighth", "#") %>
      </li>
      <li><%= govuk_footer_link_to("Ninth", "#") %>
      </li>
      <li><%= govuk_footer_link_to("Tenth", "#") %>
      </li>
    </ul>
  </div>
<% end; end %>

Output

<footer role="contentinfo" class="govuk-footer">
  <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">
          Section one
        </h2>
        <ul class="govuk-footer__list govuk-footer__list--columns-2">
          <li>
            <a class="govuk-footer__link" href="#">
              First
            </a>
          </li>
          <li>
            <a class="govuk-footer__link" href="#">
              Second
            </a>
          </li>
          <li>
            <a class="govuk-footer__link" href="#">
              Third
            </a>
          </li>
          <li>
            <a class="govuk-footer__link" href="#">
              Fourth
            </a>
          </li>
          <li>
            <a class="govuk-footer__link" href="#">
              Fifth
            </a>
          </li>
          <li>
            <a class="govuk-footer__link" href="#">
              Sixth
            </a>
          </li>
        </ul>
      </div>
      <div class="govuk-footer__section govuk-grid-column-two-thirds">
        <h2 class="govuk-footer__heading govuk-heading-m">
          Section two
        </h2>
        <ul class="govuk-footer__list govuk-footer__list--columns-3">
          <li>
            <a class="govuk-footer__link" href="#">
              First
            </a>
          </li>
          <li>
            <a class="govuk-footer__link" href="#">
              Second
            </a>
          </li>
          <li>
            <a class="govuk-footer__link" href="#">
              Third
            </a>
          </li>
          <li>
            <a class="govuk-footer__link" href="#">
              Fourth
            </a>
          </li>
          <li>
            <a class="govuk-footer__link" href="#">
              Fifth
            </a>
          </li>
          <li>
            <a class="govuk-footer__link" href="#">
              Sixth
            </a>
          </li>
          <li>
            <a class="govuk-footer__link" href="#">
              Seventh
            </a>
          </li>
          <li>
            <a class="govuk-footer__link" href="#">
              Eighth
            </a>
          </li>
          <li>
            <a class="govuk-footer__link" href="#">
              Ninth
            </a>
          </li>
          <li>
            <a class="govuk-footer__link" href="#">
              Tenth
            </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/">
            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>