This is an internal development app.
To learn how to use the GOV.UK Design System in your project, see Get started.

Skip to main content
  1. GOV.UK Frontend
  2. All components
  3. Footer

Footer

Footer

Open this example in a new tab: footer

Code

Markup

<footer class="govuk-footer">
  <div class="govuk-width-container">
    <div class="govuk-footer__meta">
      <div class="govuk-footer__meta-item govuk-footer__meta-item--grow">
        <svg
          aria-hidden="true"
          focusable="false"
          class="govuk-footer__licence-logo"
          xmlns="http://www.w3.org/2000/svg"
          viewBox="0 0 483.2 195.7"
          height="17"
          width="41"
        >
          <path
            fill="currentColor"
            d="M421.5 142.8V.1l-50.7 32.3v161.1h112.4v-50.7zm-122.3-9.6A47.12 47.12 0 0 1 221 97.8c0-26 21.1-47.1 47.1-47.1 16.7 0 31.4 8.7 39.7 21.8l42.7-27.2A97.63 97.63 0 0 0 268.1 0c-36.5 0-68.3 20.1-85.1 49.7A98 98 0 0 0 97.8 0C43.9 0 0 43.9 0 97.8s43.9 97.8 97.8 97.8c36.5 0 68.3-20.1 85.1-49.7a97.76 97.76 0 0 0 149.6 25.4l19.4 22.2h3v-87.8h-80l24.3 27.5zM97.8 145c-26 0-47.1-21.1-47.1-47.1s21.1-47.1 47.1-47.1 47.2 21 47.2 47S123.8 145 97.8 145"
          />
        </svg>
        <span class="govuk-footer__licence-description">
          All content is available under the
          <a
            class="govuk-footer__link"
            href="https://www.nationalarchives.gov.uk/doc/open-government-licence/version/3/"
            rel="license"
          >Open Government Licence v3.0</a>, except where otherwise stated
        </span>
      </div>
      <div class="govuk-footer__meta-item">
        <a
          class="govuk-footer__link govuk-footer__copyright-logo"
          href="https://www.nationalarchives.gov.uk/information-management/re-using-public-sector-information/uk-government-licensing-framework/crown-copyright/"
        >
          © Crown copyright
        </a>
      </div>
    </div>
  </div>
</footer>

Macro

{% from "govuk/components/footer/macro.njk" import govukFooter %}

{{ govukFooter({}) }}

Footer with custom HTML content licence and copyright notice

Open this example in a new tab: footer with custom html content licence and copyright notice

Open Government Licence and Crown copyright notice translated into Welsh

Code

Markup

<footer class="govuk-footer">
  <div class="govuk-width-container">
    <div class="govuk-footer__meta">
      <div class="govuk-footer__meta-item govuk-footer__meta-item--grow">
        <svg
          aria-hidden="true"
          focusable="false"
          class="govuk-footer__licence-logo"
          xmlns="http://www.w3.org/2000/svg"
          viewBox="0 0 483.2 195.7"
          height="17"
          width="41"
        >
          <path
            fill="currentColor"
            d="M421.5 142.8V.1l-50.7 32.3v161.1h112.4v-50.7zm-122.3-9.6A47.12 47.12 0 0 1 221 97.8c0-26 21.1-47.1 47.1-47.1 16.7 0 31.4 8.7 39.7 21.8l42.7-27.2A97.63 97.63 0 0 0 268.1 0c-36.5 0-68.3 20.1-85.1 49.7A98 98 0 0 0 97.8 0C43.9 0 0 43.9 0 97.8s43.9 97.8 97.8 97.8c36.5 0 68.3-20.1 85.1-49.7a97.76 97.76 0 0 0 149.6 25.4l19.4 22.2h3v-87.8h-80l24.3 27.5zM97.8 145c-26 0-47.1-21.1-47.1-47.1s21.1-47.1 47.1-47.1 47.2 21 47.2 47S123.8 145 97.8 145"
          />
        </svg>
        <span class="govuk-footer__licence-description">
          Mae’r holl gynnwys ar gael dan <a class="govuk-footer__link" href="https://www.nationalarchives.gov.uk/doc/open-government-licence-cymraeg/version/3/" rel="license">Drwydded y Llywodraeth Agored v3.0</a>, ac eithrio lle nodir yn wahanol
        </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/"
        >
          <span>Hawlfraint y Goron</span>
        </a>
      </div>
    </div>
  </div>
</footer>

Macro

{% from "govuk/components/footer/macro.njk" import govukFooter %}

{{ govukFooter({
  contentLicence: {
    html: 'Mae’r holl gynnwys ar gael dan <a class="govuk-footer__link" href="https://www.nationalarchives.gov.uk/doc/open-government-licence-cymraeg/version/3/" rel="license">Drwydded y Llywodraeth Agored v3.0</a>, ac eithrio lle nodir yn wahanol'
  },
  copyright: {
    html: "<span>Hawlfraint y Goron</span>"
  }
}) }}

Footer with custom text content licence and copyright notice

Open this example in a new tab: footer with custom text content licence and copyright notice

Open Government Licence and Crown copyright notice translated into Welsh

Code

Markup

<footer class="govuk-footer">
  <div class="govuk-width-container">
    <div class="govuk-footer__meta">
      <div class="govuk-footer__meta-item govuk-footer__meta-item--grow">
        <svg
          aria-hidden="true"
          focusable="false"
          class="govuk-footer__licence-logo"
          xmlns="http://www.w3.org/2000/svg"
          viewBox="0 0 483.2 195.7"
          height="17"
          width="41"
        >
          <path
            fill="currentColor"
            d="M421.5 142.8V.1l-50.7 32.3v161.1h112.4v-50.7zm-122.3-9.6A47.12 47.12 0 0 1 221 97.8c0-26 21.1-47.1 47.1-47.1 16.7 0 31.4 8.7 39.7 21.8l42.7-27.2A97.63 97.63 0 0 0 268.1 0c-36.5 0-68.3 20.1-85.1 49.7A98 98 0 0 0 97.8 0C43.9 0 0 43.9 0 97.8s43.9 97.8 97.8 97.8c36.5 0 68.3-20.1 85.1-49.7a97.76 97.76 0 0 0 149.6 25.4l19.4 22.2h3v-87.8h-80l24.3 27.5zM97.8 145c-26 0-47.1-21.1-47.1-47.1s21.1-47.1 47.1-47.1 47.2 21 47.2 47S123.8 145 97.8 145"
          />
        </svg>
        <span class="govuk-footer__licence-description">
          Mae’r holl gynnwys ar gael dan Drwydded y Llywodraeth Agored v3.0, ac eithrio lle nodir yn wahanol
        </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/"
        >
          © Hawlfraint y Goron
        </a>
      </div>
    </div>
  </div>
</footer>

Macro

{% from "govuk/components/footer/macro.njk" import govukFooter %}

{{ govukFooter({
  contentLicence: {
    text: "Mae’r holl gynnwys ar gael dan Drwydded y Llywodraeth Agored v3.0, ac eithrio lle nodir yn wahanol"
  },
  copyright: {
    text: "© Hawlfraint y Goron"
  }
}) }}

Footer with meta

Open this example in a new tab: footer with meta

Secondary navigation with meta information relating to the site

Code

Markup

<footer class="govuk-footer">
  <div class="govuk-width-container">
    <div class="govuk-footer__meta">
      <div class="govuk-footer__meta-item govuk-footer__meta-item--grow">
        <h2 class="govuk-visually-hidden">Items</h2>
        <ul class="govuk-footer__inline-list">
          <li class="govuk-footer__inline-list-item">
            <a class="govuk-footer__link" href="#1">
              Item 1
            </a>
          </li>
          <li class="govuk-footer__inline-list-item">
            <a class="govuk-footer__link" href="#2">
              Item 2
            </a>
          </li>
          <li class="govuk-footer__inline-list-item">
            <a class="govuk-footer__link" href="#3">
              Item 3
            </a>
          </li>
        </ul>
        <svg
          aria-hidden="true"
          focusable="false"
          class="govuk-footer__licence-logo"
          xmlns="http://www.w3.org/2000/svg"
          viewBox="0 0 483.2 195.7"
          height="17"
          width="41"
        >
          <path
            fill="currentColor"
            d="M421.5 142.8V.1l-50.7 32.3v161.1h112.4v-50.7zm-122.3-9.6A47.12 47.12 0 0 1 221 97.8c0-26 21.1-47.1 47.1-47.1 16.7 0 31.4 8.7 39.7 21.8l42.7-27.2A97.63 97.63 0 0 0 268.1 0c-36.5 0-68.3 20.1-85.1 49.7A98 98 0 0 0 97.8 0C43.9 0 0 43.9 0 97.8s43.9 97.8 97.8 97.8c36.5 0 68.3-20.1 85.1-49.7a97.76 97.76 0 0 0 149.6 25.4l19.4 22.2h3v-87.8h-80l24.3 27.5zM97.8 145c-26 0-47.1-21.1-47.1-47.1s21.1-47.1 47.1-47.1 47.2 21 47.2 47S123.8 145 97.8 145"
          />
        </svg>
        <span class="govuk-footer__licence-description">
          All content is available under the
          <a
            class="govuk-footer__link"
            href="https://www.nationalarchives.gov.uk/doc/open-government-licence/version/3/"
            rel="license"
          >Open Government Licence v3.0</a>, except where otherwise stated
        </span>
      </div>
      <div class="govuk-footer__meta-item">
        <a
          class="govuk-footer__link govuk-footer__copyright-logo"
          href="https://www.nationalarchives.gov.uk/information-management/re-using-public-sector-information/uk-government-licensing-framework/crown-copyright/"
        >
          © Crown copyright
        </a>
      </div>
    </div>
  </div>
</footer>

Macro

{% from "govuk/components/footer/macro.njk" import govukFooter %}

{{ govukFooter({
  meta: {
    visuallyHiddenTitle: "Items",
    items: [
      {
        href: "#1",
        text: "Item 1"
      },
      {
        href: "#2",
        text: "Item 2"
      },
      {
        href: "#3",
        text: "Item 3"
      }
    ]
  }
}) }}

Footer with custom meta

Open this example in a new tab: footer with custom meta

Custom meta section

Code

Markup

<footer class="govuk-footer">
  <div class="govuk-width-container">
    <div class="govuk-footer__meta">
      <div class="govuk-footer__meta-item govuk-footer__meta-item--grow">
        <h2 class="govuk-visually-hidden">Support links</h2>
        <div class="govuk-footer__meta-custom">
          GOV.UK Prototype Kit v7.0.1
        </div>
        <svg
          aria-hidden="true"
          focusable="false"
          class="govuk-footer__licence-logo"
          xmlns="http://www.w3.org/2000/svg"
          viewBox="0 0 483.2 195.7"
          height="17"
          width="41"
        >
          <path
            fill="currentColor"
            d="M421.5 142.8V.1l-50.7 32.3v161.1h112.4v-50.7zm-122.3-9.6A47.12 47.12 0 0 1 221 97.8c0-26 21.1-47.1 47.1-47.1 16.7 0 31.4 8.7 39.7 21.8l42.7-27.2A97.63 97.63 0 0 0 268.1 0c-36.5 0-68.3 20.1-85.1 49.7A98 98 0 0 0 97.8 0C43.9 0 0 43.9 0 97.8s43.9 97.8 97.8 97.8c36.5 0 68.3-20.1 85.1-49.7a97.76 97.76 0 0 0 149.6 25.4l19.4 22.2h3v-87.8h-80l24.3 27.5zM97.8 145c-26 0-47.1-21.1-47.1-47.1s21.1-47.1 47.1-47.1 47.2 21 47.2 47S123.8 145 97.8 145"
          />
        </svg>
        <span class="govuk-footer__licence-description">
          All content is available under the
          <a
            class="govuk-footer__link"
            href="https://www.nationalarchives.gov.uk/doc/open-government-licence/version/3/"
            rel="license"
          >Open Government Licence v3.0</a>, except where otherwise stated
        </span>
      </div>
      <div class="govuk-footer__meta-item">
        <a
          class="govuk-footer__link govuk-footer__copyright-logo"
          href="https://www.nationalarchives.gov.uk/information-management/re-using-public-sector-information/uk-government-licensing-framework/crown-copyright/"
        >
          © Crown copyright
        </a>
      </div>
    </div>
  </div>
</footer>

Macro

{% from "govuk/components/footer/macro.njk" import govukFooter %}

{{ govukFooter({
  meta: {
    text: "GOV.UK Prototype Kit v7.0.1"
  }
}) }}

Footer with meta links and meta content

Open this example in a new tab: footer with meta links and meta content

Secondary navigation links and custom meta text

Code

Markup

<footer class="govuk-footer">
  <div class="govuk-width-container">
    <div class="govuk-footer__meta">
      <div class="govuk-footer__meta-item govuk-footer__meta-item--grow">
        <h2 class="govuk-visually-hidden">Support links</h2>
        <ul class="govuk-footer__inline-list">
          <li class="govuk-footer__inline-list-item">
            <a class="govuk-footer__link" href="#1">
              Bibendum Ornare
            </a>
          </li>
          <li class="govuk-footer__inline-list-item">
            <a class="govuk-footer__link" href="#2">
              Nullam
            </a>
          </li>
          <li class="govuk-footer__inline-list-item">
            <a class="govuk-footer__link" href="#3">
              Tortor Fringilla
            </a>
          </li>
          <li class="govuk-footer__inline-list-item">
            <a class="govuk-footer__link" href="#4">
              Tellus
            </a>
          </li>
          <li class="govuk-footer__inline-list-item">
            <a class="govuk-footer__link" href="#5">
              Egestas Nullam
            </a>
          </li>
          <li class="govuk-footer__inline-list-item">
            <a class="govuk-footer__link" href="#6">
              Euismod Etiam
            </a>
          </li>
          <li class="govuk-footer__inline-list-item">
            <a class="govuk-footer__link" href="#7">
              Fusce Sollicitudin
            </a>
          </li>
          <li class="govuk-footer__inline-list-item">
            <a class="govuk-footer__link" href="#8">
              Ligula Nullam Ultricies
            </a>
          </li>
        </ul>
        <div class="govuk-footer__meta-custom">
          Built by the <a href="#" class="govuk-footer__link">Department of Magical Law Enforcement</a>
        </div>
        <svg
          aria-hidden="true"
          focusable="false"
          class="govuk-footer__licence-logo"
          xmlns="http://www.w3.org/2000/svg"
          viewBox="0 0 483.2 195.7"
          height="17"
          width="41"
        >
          <path
            fill="currentColor"
            d="M421.5 142.8V.1l-50.7 32.3v161.1h112.4v-50.7zm-122.3-9.6A47.12 47.12 0 0 1 221 97.8c0-26 21.1-47.1 47.1-47.1 16.7 0 31.4 8.7 39.7 21.8l42.7-27.2A97.63 97.63 0 0 0 268.1 0c-36.5 0-68.3 20.1-85.1 49.7A98 98 0 0 0 97.8 0C43.9 0 0 43.9 0 97.8s43.9 97.8 97.8 97.8c36.5 0 68.3-20.1 85.1-49.7a97.76 97.76 0 0 0 149.6 25.4l19.4 22.2h3v-87.8h-80l24.3 27.5zM97.8 145c-26 0-47.1-21.1-47.1-47.1s21.1-47.1 47.1-47.1 47.2 21 47.2 47S123.8 145 97.8 145"
          />
        </svg>
        <span class="govuk-footer__licence-description">
          All content is available under the
          <a
            class="govuk-footer__link"
            href="https://www.nationalarchives.gov.uk/doc/open-government-licence/version/3/"
            rel="license"
          >Open Government Licence v3.0</a>, except where otherwise stated
        </span>
      </div>
      <div class="govuk-footer__meta-item">
        <a
          class="govuk-footer__link govuk-footer__copyright-logo"
          href="https://www.nationalarchives.gov.uk/information-management/re-using-public-sector-information/uk-government-licensing-framework/crown-copyright/"
        >
          © Crown copyright
        </a>
      </div>
    </div>
  </div>
</footer>

Macro

{% from "govuk/components/footer/macro.njk" import govukFooter %}

{{ govukFooter({
  meta: {
    items: [
      {
        href: "#1",
        text: "Bibendum Ornare"
      },
      {
        href: "#2",
        text: "Nullam"
      },
      {
        href: "#3",
        text: "Tortor Fringilla"
      },
      {
        href: "#4",
        text: "Tellus"
      },
      {
        href: "#5",
        text: "Egestas Nullam"
      },
      {
        href: "#6",
        text: "Euismod Etiam"
      },
      {
        href: "#7",
        text: "Fusce Sollicitudin"
      },
      {
        href: "#8",
        text: "Ligula Nullam Ultricies"
      }
    ],
    html: 'Built by the <a href="#" class="govuk-footer__link">Department of Magical Law Enforcement</a>'
  }
}) }}

Footer with custom meta

Open this example in a new tab: footer with custom meta

Custom meta section

Code

Markup

<footer class="govuk-footer">
  <div class="govuk-width-container">
    <div class="govuk-footer__meta">
      <div class="govuk-footer__meta-item govuk-footer__meta-item--grow">
        <h2 class="govuk-visually-hidden">Support links</h2>
        <div class="govuk-footer__meta-custom">
          GOV.UK Prototype Kit v7.0.1
        </div>
        <svg
          aria-hidden="true"
          focusable="false"
          class="govuk-footer__licence-logo"
          xmlns="http://www.w3.org/2000/svg"
          viewBox="0 0 483.2 195.7"
          height="17"
          width="41"
        >
          <path
            fill="currentColor"
            d="M421.5 142.8V.1l-50.7 32.3v161.1h112.4v-50.7zm-122.3-9.6A47.12 47.12 0 0 1 221 97.8c0-26 21.1-47.1 47.1-47.1 16.7 0 31.4 8.7 39.7 21.8l42.7-27.2A97.63 97.63 0 0 0 268.1 0c-36.5 0-68.3 20.1-85.1 49.7A98 98 0 0 0 97.8 0C43.9 0 0 43.9 0 97.8s43.9 97.8 97.8 97.8c36.5 0 68.3-20.1 85.1-49.7a97.76 97.76 0 0 0 149.6 25.4l19.4 22.2h3v-87.8h-80l24.3 27.5zM97.8 145c-26 0-47.1-21.1-47.1-47.1s21.1-47.1 47.1-47.1 47.2 21 47.2 47S123.8 145 97.8 145"
          />
        </svg>
        <span class="govuk-footer__licence-description">
          All content is available under the
          <a
            class="govuk-footer__link"
            href="https://www.nationalarchives.gov.uk/doc/open-government-licence/version/3/"
            rel="license"
          >Open Government Licence v3.0</a>, except where otherwise stated
        </span>
      </div>
      <div class="govuk-footer__meta-item">
        <a
          class="govuk-footer__link govuk-footer__copyright-logo"
          href="https://www.nationalarchives.gov.uk/information-management/re-using-public-sector-information/uk-government-licensing-framework/crown-copyright/"
        >
          © Crown copyright
        </a>
      </div>
    </div>
  </div>
</footer>

Macro

{% from "govuk/components/footer/macro.njk" import govukFooter %}

{{ govukFooter({
  meta: {
    text: "GOV.UK Prototype Kit v7.0.1"
  }
}) }}

Footer with default width navigation (one column)

Open this example in a new tab: footer with default width navigation (one column)

Code

Markup

<footer class="govuk-footer">
  <div class="govuk-width-container">
      <div class="govuk-footer__navigation">
          <div class="govuk-footer__section govuk-grid-column-full">
            <h2 class="govuk-footer__heading govuk-heading-m">Navigation section</h2>
              <ul class="govuk-footer__list">
                    <li class="govuk-footer__list-item">
                      <a class="govuk-footer__link" href="#1">
                        Navigation item 1
                      </a>
                    </li>
                    <li class="govuk-footer__list-item">
                      <a class="govuk-footer__link" href="#2">
                        Navigation item 2
                      </a>
                    </li>
                    <li class="govuk-footer__list-item">
                      <a class="govuk-footer__link" href="#3">
                        Navigation item 3
                      </a>
                    </li>
                    <li class="govuk-footer__list-item">
                      <a class="govuk-footer__link" href="#4">
                        Navigation item 4
                      </a>
                    </li>
                    <li class="govuk-footer__list-item">
                      <a class="govuk-footer__link" href="#5">
                        Navigation item 5
                      </a>
                    </li>
                    <li class="govuk-footer__list-item">
                      <a class="govuk-footer__link" href="#6">
                        Navigation item 6
                      </a>
                    </li>
              </ul>
          </div>
      </div>
      <hr class="govuk-footer__section-break">
    <div class="govuk-footer__meta">
      <div class="govuk-footer__meta-item govuk-footer__meta-item--grow">
        <svg
          aria-hidden="true"
          focusable="false"
          class="govuk-footer__licence-logo"
          xmlns="http://www.w3.org/2000/svg"
          viewBox="0 0 483.2 195.7"
          height="17"
          width="41"
        >
          <path
            fill="currentColor"
            d="M421.5 142.8V.1l-50.7 32.3v161.1h112.4v-50.7zm-122.3-9.6A47.12 47.12 0 0 1 221 97.8c0-26 21.1-47.1 47.1-47.1 16.7 0 31.4 8.7 39.7 21.8l42.7-27.2A97.63 97.63 0 0 0 268.1 0c-36.5 0-68.3 20.1-85.1 49.7A98 98 0 0 0 97.8 0C43.9 0 0 43.9 0 97.8s43.9 97.8 97.8 97.8c36.5 0 68.3-20.1 85.1-49.7a97.76 97.76 0 0 0 149.6 25.4l19.4 22.2h3v-87.8h-80l24.3 27.5zM97.8 145c-26 0-47.1-21.1-47.1-47.1s21.1-47.1 47.1-47.1 47.2 21 47.2 47S123.8 145 97.8 145"
          />
        </svg>
        <span class="govuk-footer__licence-description">
          All content is available under the
          <a
            class="govuk-footer__link"
            href="https://www.nationalarchives.gov.uk/doc/open-government-licence/version/3/"
            rel="license"
          >Open Government Licence v3.0</a>, except where otherwise stated
        </span>
      </div>
      <div class="govuk-footer__meta-item">
        <a
          class="govuk-footer__link govuk-footer__copyright-logo"
          href="https://www.nationalarchives.gov.uk/information-management/re-using-public-sector-information/uk-government-licensing-framework/crown-copyright/"
        >
          © Crown copyright
        </a>
      </div>
    </div>
  </div>
</footer>

Macro

{% from "govuk/components/footer/macro.njk" import govukFooter %}

{{ govukFooter({
  navigation: [
    {
      title: "Navigation section",
      items: [
        {
          href: "#1",
          text: "Navigation item 1"
        },
        {
          href: "#2",
          text: "Navigation item 2"
        },
        {
          href: "#3",
          text: "Navigation item 3"
        },
        {
          href: "#4",
          text: "Navigation item 4"
        },
        {
          href: "#5",
          text: "Navigation item 5"
        },
        {
          href: "#6",
          text: "Navigation item 6"
        }
      ]
    }
  ]
}) }}

Footer with default width navigation (two columns)

Open this example in a new tab: footer with default width navigation (two columns)

Code

Markup

<footer class="govuk-footer">
  <div class="govuk-width-container">
      <div class="govuk-footer__navigation">
          <div class="govuk-footer__section govuk-grid-column-full">
            <h2 class="govuk-footer__heading govuk-heading-m">Navigation section</h2>
              <ul class="govuk-footer__list govuk-footer__list--columns-2">
                    <li class="govuk-footer__list-item">
                      <a class="govuk-footer__link" href="#1">
                        Navigation item 1
                      </a>
                    </li>
                    <li class="govuk-footer__list-item">
                      <a class="govuk-footer__link" href="#2">
                        Navigation item 2
                      </a>
                    </li>
                    <li class="govuk-footer__list-item">
                      <a class="govuk-footer__link" href="#3">
                        Navigation item 3
                      </a>
                    </li>
                    <li class="govuk-footer__list-item">
                      <a class="govuk-footer__link" href="#4">
                        Navigation item 4
                      </a>
                    </li>
                    <li class="govuk-footer__list-item">
                      <a class="govuk-footer__link" href="#5">
                        Navigation item 5
                      </a>
                    </li>
                    <li class="govuk-footer__list-item">
                      <a class="govuk-footer__link" href="#6">
                        Navigation item 6
                      </a>
                    </li>
              </ul>
          </div>
      </div>
      <hr class="govuk-footer__section-break">
    <div class="govuk-footer__meta">
      <div class="govuk-footer__meta-item govuk-footer__meta-item--grow">
        <svg
          aria-hidden="true"
          focusable="false"
          class="govuk-footer__licence-logo"
          xmlns="http://www.w3.org/2000/svg"
          viewBox="0 0 483.2 195.7"
          height="17"
          width="41"
        >
          <path
            fill="currentColor"
            d="M421.5 142.8V.1l-50.7 32.3v161.1h112.4v-50.7zm-122.3-9.6A47.12 47.12 0 0 1 221 97.8c0-26 21.1-47.1 47.1-47.1 16.7 0 31.4 8.7 39.7 21.8l42.7-27.2A97.63 97.63 0 0 0 268.1 0c-36.5 0-68.3 20.1-85.1 49.7A98 98 0 0 0 97.8 0C43.9 0 0 43.9 0 97.8s43.9 97.8 97.8 97.8c36.5 0 68.3-20.1 85.1-49.7a97.76 97.76 0 0 0 149.6 25.4l19.4 22.2h3v-87.8h-80l24.3 27.5zM97.8 145c-26 0-47.1-21.1-47.1-47.1s21.1-47.1 47.1-47.1 47.2 21 47.2 47S123.8 145 97.8 145"
          />
        </svg>
        <span class="govuk-footer__licence-description">
          All content is available under the
          <a
            class="govuk-footer__link"
            href="https://www.nationalarchives.gov.uk/doc/open-government-licence/version/3/"
            rel="license"
          >Open Government Licence v3.0</a>, except where otherwise stated
        </span>
      </div>
      <div class="govuk-footer__meta-item">
        <a
          class="govuk-footer__link govuk-footer__copyright-logo"
          href="https://www.nationalarchives.gov.uk/information-management/re-using-public-sector-information/uk-government-licensing-framework/crown-copyright/"
        >
          © Crown copyright
        </a>
      </div>
    </div>
  </div>
</footer>

Macro

{% from "govuk/components/footer/macro.njk" import govukFooter %}

{{ govukFooter({
  navigation: [
    {
      title: "Navigation section",
      columns: 2,
      items: [
        {
          href: "#1",
          text: "Navigation item 1"
        },
        {
          href: "#2",
          text: "Navigation item 2"
        },
        {
          href: "#3",
          text: "Navigation item 3"
        },
        {
          href: "#4",
          text: "Navigation item 4"
        },
        {
          href: "#5",
          text: "Navigation item 5"
        },
        {
          href: "#6",
          text: "Navigation item 6"
        }
      ]
    }
  ]
}) }}

Footer with navigation

Open this example in a new tab: footer with navigation

Code

Markup

<footer class="govuk-footer">
  <div class="govuk-width-container">
      <div class="govuk-footer__navigation">
          <div class="govuk-footer__section govuk-grid-column-two-thirds">
            <h2 class="govuk-footer__heading govuk-heading-m">Two column list</h2>
              <ul class="govuk-footer__list govuk-footer__list--columns-2">
                    <li class="govuk-footer__list-item">
                      <a class="govuk-footer__link" href="#1">
                        Navigation item 1
                      </a>
                    </li>
                    <li class="govuk-footer__list-item">
                      <a class="govuk-footer__link" href="#2">
                        Navigation item 2
                      </a>
                    </li>
                    <li class="govuk-footer__list-item">
                      <a class="govuk-footer__link" href="#3">
                        Navigation item 3
                      </a>
                    </li>
                    <li class="govuk-footer__list-item">
                      <a class="govuk-footer__link" href="#4">
                        Navigation item 4
                      </a>
                    </li>
                    <li class="govuk-footer__list-item">
                      <a class="govuk-footer__link" href="#5">
                        Navigation item 5
                      </a>
                    </li>
                    <li class="govuk-footer__list-item">
                      <a class="govuk-footer__link" href="#6">
                        Navigation item 6
                      </a>
                    </li>
              </ul>
          </div>
          <div class="govuk-footer__section govuk-grid-column-one-third">
            <h2 class="govuk-footer__heading govuk-heading-m">Single column list</h2>
              <ul class="govuk-footer__list">
                    <li class="govuk-footer__list-item">
                      <a class="govuk-footer__link" href="#1">
                        Navigation item 1
                      </a>
                    </li>
                    <li class="govuk-footer__list-item">
                      <a class="govuk-footer__link" href="#2">
                        Navigation item 2
                      </a>
                    </li>
                    <li class="govuk-footer__list-item">
                      <a class="govuk-footer__link" href="#3">
                        Navigation item 3
                      </a>
                    </li>
              </ul>
          </div>
      </div>
      <hr class="govuk-footer__section-break">
    <div class="govuk-footer__meta">
      <div class="govuk-footer__meta-item govuk-footer__meta-item--grow">
        <svg
          aria-hidden="true"
          focusable="false"
          class="govuk-footer__licence-logo"
          xmlns="http://www.w3.org/2000/svg"
          viewBox="0 0 483.2 195.7"
          height="17"
          width="41"
        >
          <path
            fill="currentColor"
            d="M421.5 142.8V.1l-50.7 32.3v161.1h112.4v-50.7zm-122.3-9.6A47.12 47.12 0 0 1 221 97.8c0-26 21.1-47.1 47.1-47.1 16.7 0 31.4 8.7 39.7 21.8l42.7-27.2A97.63 97.63 0 0 0 268.1 0c-36.5 0-68.3 20.1-85.1 49.7A98 98 0 0 0 97.8 0C43.9 0 0 43.9 0 97.8s43.9 97.8 97.8 97.8c36.5 0 68.3-20.1 85.1-49.7a97.76 97.76 0 0 0 149.6 25.4l19.4 22.2h3v-87.8h-80l24.3 27.5zM97.8 145c-26 0-47.1-21.1-47.1-47.1s21.1-47.1 47.1-47.1 47.2 21 47.2 47S123.8 145 97.8 145"
          />
        </svg>
        <span class="govuk-footer__licence-description">
          All content is available under the
          <a
            class="govuk-footer__link"
            href="https://www.nationalarchives.gov.uk/doc/open-government-licence/version/3/"
            rel="license"
          >Open Government Licence v3.0</a>, except where otherwise stated
        </span>
      </div>
      <div class="govuk-footer__meta-item">
        <a
          class="govuk-footer__link govuk-footer__copyright-logo"
          href="https://www.nationalarchives.gov.uk/information-management/re-using-public-sector-information/uk-government-licensing-framework/crown-copyright/"
        >
          © Crown copyright
        </a>
      </div>
    </div>
  </div>
</footer>

Macro

{% from "govuk/components/footer/macro.njk" import govukFooter %}

{{ govukFooter({
  navigation: [
    {
      title: "Two column list",
      width: "two-thirds",
      columns: 2,
      items: [
        {
          href: "#1",
          text: "Navigation item 1"
        },
        {
          href: "#2",
          text: "Navigation item 2"
        },
        {
          href: "#3",
          text: "Navigation item 3"
        },
        {
          href: "#4",
          text: "Navigation item 4"
        },
        {
          href: "#5",
          text: "Navigation item 5"
        },
        {
          href: "#6",
          text: "Navigation item 6"
        }
      ]
    },
    {
      title: "Single column list",
      width: "one-third",
      items: [
        {
          href: "#1",
          text: "Navigation item 1"
        },
        {
          href: "#2",
          text: "Navigation item 2"
        },
        {
          href: "#3",
          text: "Navigation item 3"
        }
      ]
    }
  ]
}) }}

Footer Full GDS example

Open this example in a new tab: footer full gds example

A full example based on GOV.UK's current footer

Code

Markup

<footer class="govuk-footer">
  <div class="govuk-width-container">
      <div class="govuk-footer__navigation">
          <div class="govuk-footer__section govuk-grid-column-two-thirds">
            <h2 class="govuk-footer__heading govuk-heading-m">Coronavirus (COVID-19)</h2>
              <ul class="govuk-footer__list">
                    <li class="govuk-footer__list-item">
                      <a class="govuk-footer__link" href="/coronavirus">
                        Coronavirus (COVID-19): guidance and support
                      </a>
                    </li>
              </ul>
          </div>
          <div class="govuk-footer__section govuk-grid-column-one-third">
            <h2 class="govuk-footer__heading govuk-heading-m">Brexit</h2>
              <ul class="govuk-footer__list">
                    <li class="govuk-footer__list-item">
                      <a class="govuk-footer__link" href="/brexit">
                        Check what you need to do
                      </a>
                    </li>
              </ul>
          </div>
          <div class="govuk-footer__section govuk-grid-column-two-thirds">
            <h2 class="govuk-footer__heading govuk-heading-m">Services and information</h2>
              <ul class="govuk-footer__list govuk-footer__list--columns-2">
                    <li class="govuk-footer__list-item">
                      <a class="govuk-footer__link" href="/browse/benefits">
                        Benefits
                      </a>
                    </li>
                    <li class="govuk-footer__list-item">
                      <a class="govuk-footer__link" href="/browse/births-deaths-marriages">
                        Births, deaths, marriages and care
                      </a>
                    </li>
                    <li class="govuk-footer__list-item">
                      <a class="govuk-footer__link" href="/browse/business">
                        Business and self-employed
                      </a>
                    </li>
                    <li class="govuk-footer__list-item">
                      <a class="govuk-footer__link" href="/browse/childcare-parenting">
                        Childcare and parenting
                      </a>
                    </li>
                    <li class="govuk-footer__list-item">
                      <a class="govuk-footer__link" href="/browse/citizenship">
                        Citizenship and living in the UK
                      </a>
                    </li>
                    <li class="govuk-footer__list-item">
                      <a class="govuk-footer__link" href="/browse/justice">
                        Crime, justice and the law
                      </a>
                    </li>
                    <li class="govuk-footer__list-item">
                      <a class="govuk-footer__link" href="/browse/disabilities">
                        Disabled people
                      </a>
                    </li>
                    <li class="govuk-footer__list-item">
                      <a class="govuk-footer__link" href="/browse/driving">
                        Driving and transport
                      </a>
                    </li>
                    <li class="govuk-footer__list-item">
                      <a class="govuk-footer__link" href="/browse/education">
                        Education and learning
                      </a>
                    </li>
                    <li class="govuk-footer__list-item">
                      <a class="govuk-footer__link" href="/browse/employing-people">
                        Employing people
                      </a>
                    </li>
                    <li class="govuk-footer__list-item">
                      <a class="govuk-footer__link" href="/browse/environment-countryside">
                        Environment and countryside
                      </a>
                    </li>
                    <li class="govuk-footer__list-item">
                      <a class="govuk-footer__link" href="/browse/housing-local-services">
                        Housing and local services
                      </a>
                    </li>
                    <li class="govuk-footer__list-item">
                      <a class="govuk-footer__link" href="/browse/tax">
                        Money and tax
                      </a>
                    </li>
                    <li class="govuk-footer__list-item">
                      <a class="govuk-footer__link" href="/browse/abroad">
                        Passports, travel and living abroad
                      </a>
                    </li>
                    <li class="govuk-footer__list-item">
                      <a class="govuk-footer__link" href="/browse/visas-immigration">
                        Visas and immigration
                      </a>
                    </li>
                    <li class="govuk-footer__list-item">
                      <a class="govuk-footer__link" href="/browse/working">
                        Working, jobs and pensions
                      </a>
                    </li>
              </ul>
          </div>
          <div class="govuk-footer__section govuk-grid-column-one-third">
            <h2 class="govuk-footer__heading govuk-heading-m">Departments and policy</h2>
              <ul class="govuk-footer__list">
                    <li class="govuk-footer__list-item">
                      <a class="govuk-footer__link" href="/government/how-government-works">
                        How government works
                      </a>
                    </li>
                    <li class="govuk-footer__list-item">
                      <a class="govuk-footer__link" href="/government/organisations">
                        Departments
                      </a>
                    </li>
                    <li class="govuk-footer__list-item">
                      <a class="govuk-footer__link" href="/world">
                        Worldwide
                      </a>
                    </li>
                    <li class="govuk-footer__list-item">
                      <a class="govuk-footer__link" href="/government/policies">
                        Policies
                      </a>
                    </li>
                    <li class="govuk-footer__list-item">
                      <a class="govuk-footer__link" href="/government/publications">
                        Publications
                      </a>
                    </li>
                    <li class="govuk-footer__list-item">
                      <a class="govuk-footer__link" href="/government/announcements">
                        Announcements
                      </a>
                    </li>
              </ul>
          </div>
      </div>
      <hr class="govuk-footer__section-break">
    <div class="govuk-footer__meta">
      <div class="govuk-footer__meta-item govuk-footer__meta-item--grow">
        <h2 class="govuk-visually-hidden">Support links</h2>
        <ul class="govuk-footer__inline-list">
          <li class="govuk-footer__inline-list-item">
            <a class="govuk-footer__link" href="/help">
              Help
            </a>
          </li>
          <li class="govuk-footer__inline-list-item">
            <a class="govuk-footer__link" href="/help/cookies">
              Cookies
            </a>
          </li>
          <li class="govuk-footer__inline-list-item">
            <a class="govuk-footer__link" href="/contact">
              Contact
            </a>
          </li>
          <li class="govuk-footer__inline-list-item">
            <a class="govuk-footer__link" href="/help/terms-conditions">
              Terms and conditions
            </a>
          </li>
          <li class="govuk-footer__inline-list-item">
            <a class="govuk-footer__link" href="/cymraeg">
              Rhestr o Wasanaethau Cymraeg
            </a>
          </li>
        </ul>
        <div class="govuk-footer__meta-custom">
          Built by the <a class="govuk-footer__link" href="#">Government Digital Service</a>
        </div>
        <svg
          aria-hidden="true"
          focusable="false"
          class="govuk-footer__licence-logo"
          xmlns="http://www.w3.org/2000/svg"
          viewBox="0 0 483.2 195.7"
          height="17"
          width="41"
        >
          <path
            fill="currentColor"
            d="M421.5 142.8V.1l-50.7 32.3v161.1h112.4v-50.7zm-122.3-9.6A47.12 47.12 0 0 1 221 97.8c0-26 21.1-47.1 47.1-47.1 16.7 0 31.4 8.7 39.7 21.8l42.7-27.2A97.63 97.63 0 0 0 268.1 0c-36.5 0-68.3 20.1-85.1 49.7A98 98 0 0 0 97.8 0C43.9 0 0 43.9 0 97.8s43.9 97.8 97.8 97.8c36.5 0 68.3-20.1 85.1-49.7a97.76 97.76 0 0 0 149.6 25.4l19.4 22.2h3v-87.8h-80l24.3 27.5zM97.8 145c-26 0-47.1-21.1-47.1-47.1s21.1-47.1 47.1-47.1 47.2 21 47.2 47S123.8 145 97.8 145"
          />
        </svg>
        <span class="govuk-footer__licence-description">
          All content is available under the
          <a
            class="govuk-footer__link"
            href="https://www.nationalarchives.gov.uk/doc/open-government-licence/version/3/"
            rel="license"
          >Open Government Licence v3.0</a>, except where otherwise stated
        </span>
      </div>
      <div class="govuk-footer__meta-item">
        <a
          class="govuk-footer__link govuk-footer__copyright-logo"
          href="https://www.nationalarchives.gov.uk/information-management/re-using-public-sector-information/uk-government-licensing-framework/crown-copyright/"
        >
          © Crown copyright
        </a>
      </div>
    </div>
  </div>
</footer>

Macro

{% from "govuk/components/footer/macro.njk" import govukFooter %}

{{ govukFooter({
  navigation: [
    {
      title: "Coronavirus (COVID-19)",
      width: "two-thirds",
      items: [
        {
          href: "/coronavirus",
          text: "Coronavirus (COVID-19): guidance and support"
        }
      ]
    },
    {
      title: "Brexit",
      width: "one-third",
      items: [
        {
          href: "/brexit",
          text: "Check what you need to do"
        }
      ]
    },
    {
      title: "Services and information",
      width: "two-thirds",
      columns: 2,
      items: [
        {
          href: "/browse/benefits",
          text: "Benefits"
        },
        {
          href: "/browse/births-deaths-marriages",
          text: "Births, deaths, marriages and care"
        },
        {
          href: "/browse/business",
          text: "Business and self-employed"
        },
        {
          href: "/browse/childcare-parenting",
          text: "Childcare and parenting"
        },
        {
          href: "/browse/citizenship",
          text: "Citizenship and living in the UK"
        },
        {
          href: "/browse/justice",
          text: "Crime, justice and the law"
        },
        {
          href: "/browse/disabilities",
          text: "Disabled people"
        },
        {
          href: "/browse/driving",
          text: "Driving and transport"
        },
        {
          href: "/browse/education",
          text: "Education and learning"
        },
        {
          href: "/browse/employing-people",
          text: "Employing people"
        },
        {
          href: "/browse/environment-countryside",
          text: "Environment and countryside"
        },
        {
          href: "/browse/housing-local-services",
          text: "Housing and local services"
        },
        {
          href: "/browse/tax",
          text: "Money and tax"
        },
        {
          href: "/browse/abroad",
          text: "Passports, travel and living abroad"
        },
        {
          href: "/browse/visas-immigration",
          text: "Visas and immigration"
        },
        {
          href: "/browse/working",
          text: "Working, jobs and pensions"
        }
      ]
    },
    {
      title: "Departments and policy",
      width: "one-third",
      items: [
        {
          href: "/government/how-government-works",
          text: "How government works"
        },
        {
          href: "/government/organisations",
          text: "Departments"
        },
        {
          href: "/world",
          text: "Worldwide"
        },
        {
          href: "/government/policies",
          text: "Policies"
        },
        {
          href: "/government/publications",
          text: "Publications"
        },
        {
          href: "/government/announcements",
          text: "Announcements"
        }
      ]
    }
  ],
  meta: {
    items: [
      {
        href: "/help",
        text: "Help"
      },
      {
        href: "/help/cookies",
        text: "Cookies"
      },
      {
        href: "/contact",
        text: "Contact"
      },
      {
        href: "/help/terms-conditions",
        text: "Terms and conditions"
      },
      {
        href: "/cymraeg",
        text: "Rhestr o Wasanaethau Cymraeg"
      }
    ],
    html: 'Built by the <a class="govuk-footer__link" href="#">Government Digital Service</a>'
  }
}) }}

Footer Three equal columns

Open this example in a new tab: footer three equal columns

A full example to demonstrate three equal width columns

Code

Markup

<footer 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">Single column list 1</h2>
              <ul class="govuk-footer__list govuk-footer__list--columns-1">
                    <li class="govuk-footer__list-item">
                      <a class="govuk-footer__link" href="#1">
                        Navigation item 1
                      </a>
                    </li>
                    <li class="govuk-footer__list-item">
                      <a class="govuk-footer__link" href="#2">
                        Navigation item 2
                      </a>
                    </li>
                    <li class="govuk-footer__list-item">
                      <a class="govuk-footer__link" href="#3">
                        Navigation item 3
                      </a>
                    </li>
                    <li class="govuk-footer__list-item">
                      <a class="govuk-footer__link" href="#4">
                        Navigation item 4
                      </a>
                    </li>
                    <li class="govuk-footer__list-item">
                      <a class="govuk-footer__link" href="#5">
                        Navigation item 5
                      </a>
                    </li>
                    <li class="govuk-footer__list-item">
                      <a class="govuk-footer__link" href="#6">
                        Navigation item 6
                      </a>
                    </li>
              </ul>
          </div>
          <div class="govuk-footer__section govuk-grid-column-one-third">
            <h2 class="govuk-footer__heading govuk-heading-m">Single column list 2</h2>
              <ul class="govuk-footer__list govuk-footer__list--columns-1">
                    <li class="govuk-footer__list-item">
                      <a class="govuk-footer__link" href="#1">
                        Navigation item 1
                      </a>
                    </li>
                    <li class="govuk-footer__list-item">
                      <a class="govuk-footer__link" href="#2">
                        Navigation item 2
                      </a>
                    </li>
                    <li class="govuk-footer__list-item">
                      <a class="govuk-footer__link" href="#3">
                        Navigation item 3
                      </a>
                    </li>
                    <li class="govuk-footer__list-item">
                      <a class="govuk-footer__link" href="#4">
                        Navigation item 4
                      </a>
                    </li>
                    <li class="govuk-footer__list-item">
                      <a class="govuk-footer__link" href="#5">
                        Navigation item 5
                      </a>
                    </li>
                    <li class="govuk-footer__list-item">
                      <a class="govuk-footer__link" href="#6">
                        Navigation item 6
                      </a>
                    </li>
              </ul>
          </div>
          <div class="govuk-footer__section govuk-grid-column-one-third">
            <h2 class="govuk-footer__heading govuk-heading-m">Single column list 3</h2>
              <ul class="govuk-footer__list govuk-footer__list--columns-1">
                    <li class="govuk-footer__list-item">
                      <a class="govuk-footer__link" href="#1">
                        Navigation item 1
                      </a>
                    </li>
                    <li class="govuk-footer__list-item">
                      <a class="govuk-footer__link" href="#2">
                        Navigation item 2
                      </a>
                    </li>
                    <li class="govuk-footer__list-item">
                      <a class="govuk-footer__link" href="#3">
                        Navigation item 3
                      </a>
                    </li>
                    <li class="govuk-footer__list-item">
                      <a class="govuk-footer__link" href="#4">
                        Navigation item 4
                      </a>
                    </li>
                    <li class="govuk-footer__list-item">
                      <a class="govuk-footer__link" href="#5">
                        Navigation item 5
                      </a>
                    </li>
                    <li class="govuk-footer__list-item">
                      <a class="govuk-footer__link" href="#6">
                        Navigation item 6
                      </a>
                    </li>
              </ul>
          </div>
      </div>
      <hr class="govuk-footer__section-break">
    <div class="govuk-footer__meta">
      <div class="govuk-footer__meta-item govuk-footer__meta-item--grow">
        <svg
          aria-hidden="true"
          focusable="false"
          class="govuk-footer__licence-logo"
          xmlns="http://www.w3.org/2000/svg"
          viewBox="0 0 483.2 195.7"
          height="17"
          width="41"
        >
          <path
            fill="currentColor"
            d="M421.5 142.8V.1l-50.7 32.3v161.1h112.4v-50.7zm-122.3-9.6A47.12 47.12 0 0 1 221 97.8c0-26 21.1-47.1 47.1-47.1 16.7 0 31.4 8.7 39.7 21.8l42.7-27.2A97.63 97.63 0 0 0 268.1 0c-36.5 0-68.3 20.1-85.1 49.7A98 98 0 0 0 97.8 0C43.9 0 0 43.9 0 97.8s43.9 97.8 97.8 97.8c36.5 0 68.3-20.1 85.1-49.7a97.76 97.76 0 0 0 149.6 25.4l19.4 22.2h3v-87.8h-80l24.3 27.5zM97.8 145c-26 0-47.1-21.1-47.1-47.1s21.1-47.1 47.1-47.1 47.2 21 47.2 47S123.8 145 97.8 145"
          />
        </svg>
        <span class="govuk-footer__licence-description">
          All content is available under the
          <a
            class="govuk-footer__link"
            href="https://www.nationalarchives.gov.uk/doc/open-government-licence/version/3/"
            rel="license"
          >Open Government Licence v3.0</a>, except where otherwise stated
        </span>
      </div>
      <div class="govuk-footer__meta-item">
        <a
          class="govuk-footer__link govuk-footer__copyright-logo"
          href="https://www.nationalarchives.gov.uk/information-management/re-using-public-sector-information/uk-government-licensing-framework/crown-copyright/"
        >
          © Crown copyright
        </a>
      </div>
    </div>
  </div>
</footer>

Macro

{% from "govuk/components/footer/macro.njk" import govukFooter %}

{{ govukFooter({
  navigation: [
    {
      title: "Single column list 1",
      width: "one-third",
      columns: 1,
      items: [
        {
          href: "#1",
          text: "Navigation item 1"
        },
        {
          href: "#2",
          text: "Navigation item 2"
        },
        {
          href: "#3",
          text: "Navigation item 3"
        },
        {
          href: "#4",
          text: "Navigation item 4"
        },
        {
          href: "#5",
          text: "Navigation item 5"
        },
        {
          href: "#6",
          text: "Navigation item 6"
        }
      ]
    },
    {
      title: "Single column list 2",
      width: "one-third",
      columns: 1,
      items: [
        {
          href: "#1",
          text: "Navigation item 1"
        },
        {
          href: "#2",
          text: "Navigation item 2"
        },
        {
          href: "#3",
          text: "Navigation item 3"
        },
        {
          href: "#4",
          text: "Navigation item 4"
        },
        {
          href: "#5",
          text: "Navigation item 5"
        },
        {
          href: "#6",
          text: "Navigation item 6"
        }
      ]
    },
    {
      title: "Single column list 3",
      width: "one-third",
      columns: 1,
      items: [
        {
          href: "#1",
          text: "Navigation item 1"
        },
        {
          href: "#2",
          text: "Navigation item 2"
        },
        {
          href: "#3",
          text: "Navigation item 3"
        },
        {
          href: "#4",
          text: "Navigation item 4"
        },
        {
          href: "#5",
          text: "Navigation item 5"
        },
        {
          href: "#6",
          text: "Navigation item 6"
        }
      ]
    }
  ]
}) }}