Skip to main content

Footer examples

  • # default

    Open this example in a new tab: button 
    {}
    
{% from "govuk/components/footer/macro.njk" import govukFooter %}

{{ govukFooter({}) }}

  • # with custom HTML content licence and copyright notice

    Open this example in a new tab: button 
    {
  "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>"
  }
}
    
{% 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>"
  }
}) }}

  • # with custom text content licence and copyright notice

    Open this example in a new tab: button
    Mae’r holl gynnwys ar gael dan Drwydded y Llywodraeth Agored v3.0, ac eithrio lle nodir yn wahanol 
    {
  "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"
  }
}
    
{% 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"
  }
}) }}

  • # with custom meta

    Open this example in a new tab: button 
    {
  "meta": {
    "text": "GOV.UK Prototype Kit v7.0.1"
  }
}
    
{% from "govuk/components/footer/macro.njk" import govukFooter %}

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

  • # with meta links and meta content

    Open this example in a new tab: button 
    {
  "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>"
  }
}
    
{% 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>"
  }
}) }}

  • # with default width navigation (one column)

    Open this example in a new tab: button 
    {
  "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"
        }
      ]
    }
  ]
}
    
{% 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"
        }
      ]
    }
  ]
}) }}

  • # with default width navigation (two columns)

    Open this example in a new tab: button 
    {
  "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"
        }
      ]
    }
  ]
}
    
{% 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"
        }
      ]
    }
  ]
}) }}

  • # with navigation

    Open this example in a new tab: button 
    {
  "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"
        }
      ]
    }
  ]
}
    
{% 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"
        }
      ]
    }
  ]
}) }}

  • # Full GDS example

    Open this example in a new tab: button 
    {
  "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>"
  }
}
    
{% 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>"
  }
}) }}

  • # Three equal columns

    Open this example in a new tab: button 
    {
  "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"
        }
      ]
    }
  ]
}
    
{% 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"
        }
      ]
    }
  ]
}) }}

  • # attributes

    Open this example in a new tab: button 
    {
  "attributes": {
    "data-test-attribute": "value",
    "data-test-attribute-2": "value-2"
  }
}
    
{% from "govuk/components/footer/macro.njk" import govukFooter %}

{{ govukFooter({
  "attributes": {
    "data-test-attribute": "value",
    "data-test-attribute-2": "value-2"
  }
}) }}

  • # classes

    Open this example in a new tab: button 
    {
  "classes": "app-footer--custom-modifier"
}
    
{% from "govuk/components/footer/macro.njk" import govukFooter %}

{{ govukFooter({
  "classes": "app-footer--custom-modifier"
}) }}

  • # with container classes

    Open this example in a new tab: button 
    {
  "containerClasses": "app-width-container"
}
    
{% from "govuk/components/footer/macro.njk" import govukFooter %}

{{ govukFooter({
  "containerClasses": "app-width-container"
}) }}

  • # with HTML passed as text content

    Open this example in a new tab: button
    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 
    {
  "contentLicence": {
    "text": "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": {
    "text": "<span>Hawlfraint y Goron</span>"
  }
}
    
{% from "govuk/components/footer/macro.njk" import govukFooter %}

{{ govukFooter({
  "contentLicence": {
    "text": "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": {
    "text": "<span>Hawlfraint y Goron</span>"
  }
}) }}

  • # with empty meta

    Open this example in a new tab: button 
    {
  "meta": {}
}
    
{% from "govuk/components/footer/macro.njk" import govukFooter %}

{{ govukFooter({
  "meta": {}
}) }}

  • # with empty meta items

    Open this example in a new tab: button 
    {
  "meta": {
    "items": []
  }
}
    
{% from "govuk/components/footer/macro.njk" import govukFooter %}

{{ govukFooter({
  "meta": {
    "items": []
  }
}) }}

  • # with meta

    Open this example in a new tab: button 
    {
  "meta": {
    "visuallyHiddenTitle": "Items",
    "items": [
      {
        "href": "#1",
        "text": "Item 1"
      },
      {
        "href": "#2",
        "text": "Item 2"
      },
      {
        "href": "#3",
        "text": "Item 3"
      }
    ]
  }
}
    
{% 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"
      }
    ]
  }
}) }}

  • # meta html as text

    Open this example in a new tab: button 
    {
  "meta": {
    "text": "GOV.UK Prototype Kit <strong>v7.0.1</strong>"
  }
}
    
{% from "govuk/components/footer/macro.njk" import govukFooter %}

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

  • # with meta html

    Open this example in a new tab: button 
    {
  "meta": {
    "html": "GOV.UK Prototype Kit <strong>v7.0.1</strong>"
  }
}
    
{% from "govuk/components/footer/macro.njk" import govukFooter %}

{{ govukFooter({
  "meta": {
    "html": "GOV.UK Prototype Kit <strong>v7.0.1</strong>"
  }
}) }}

  • # with meta item attributes

    Open this example in a new tab: button 
    {
  "meta": {
    "items": [
      {
        "href": "#1",
        "text": "meta item 1",
        "attributes": {
          "data-attribute": "my-attribute",
          "data-attribute-2": "my-attribute-2"
        }
      }
    ]
  }
}
    
{% from "govuk/components/footer/macro.njk" import govukFooter %}

{{ govukFooter({
  "meta": {
    "items": [
      {
        "href": "#1",
        "text": "meta item 1",
        "attributes": {
          "data-attribute": "my-attribute",
          "data-attribute-2": "my-attribute-2"
        }
      }
    ]
  }
}) }}

  • # with empty navigation

    Open this example in a new tab: button 
    {
  "navigation": []
}
    
{% from "govuk/components/footer/macro.njk" import govukFooter %}

{{ govukFooter({
  "navigation": []
}) }}

  • # with navigation item attributes

    Open this example in a new tab: button 
    {
  "navigation": [
    {
      "title": "Single column list 1",
      "items": [
        {
          "href": "#1",
          "text": "Navigation item 1",
          "attributes": {
            "data-attribute": "my-attribute",
            "data-attribute-2": "my-attribute-2"
          }
        }
      ]
    }
  ]
}
    
{% from "govuk/components/footer/macro.njk" import govukFooter %}

{{ govukFooter({
  "navigation": [
    {
      "title": "Single column list 1",
      "items": [
        {
          "href": "#1",
          "text": "Navigation item 1",
          "attributes": {
            "data-attribute": "my-attribute",
            "data-attribute-2": "my-attribute-2"
          }
        }
      ]
    }
  ]
}) }}

  • # rebrand

    Open this example in a new tab: button 
    {
  "rebrand": true
}
    
{% from "govuk/components/footer/macro.njk" import govukFooter %}

{{ govukFooter({
  "rebrand": true
}) }}