Beta This is new guidance. Complete our quick 5-question survey to help us improve it.

  1. Service manual
  2. Design
  3. Add the GOV.UK header and footer

To add the GOV.UK header and footer to your service, you need to download the GOV.UK template from GitHub. This provides all the code and assets you need.

Before adding them, find out about making your service look like GOV.UK.

Meeting the Service Standard

To pass point 13 (make the user experience consistent with GOV.UK) in your service assessments, you must show how your team is using the GOV.UK header and footer correctly.

Choosing the right header

Whenever you use the GOV.UK header, you must:

  • link the GOV.UK logotype back to the GOV.UK homepage
  • set the blue bar and content area to the same width (the default is 960px at full width)
  • set the blue bar to $govuk-blue (#005ea5)

Adapting the header

You can customise the template depending on the type of header you need. This is determined by how long or complex it is and whether you want to include navigation.

See auto-generated examples of the header using the current version of the GOV.UK template.

Simple services

Use the GOV.UK standard header if your service is just a few pages long:

Screen Shot 2016-11-07 at 15.49.58.png

Get the standard header code on GitHub.

Header with service name

Add the standard header with service title if your service is more than 5 pages long - this can help users understand where they are:

Screen Shot 2016-11-07 at 15.50.09.png

Get the service title code on GitHub.

Header with navigation

Use the standard header with propositional navigation if you need to include basic navigation, contact or account management links:

Screen Shot 2016-11-07 at 15.50.19.png

Use the standard header with a propositional link if you only need to add one link:

Screen Shot 2016-11-07 at 16.05.09.png

Get the service title and propositional navigation code on GitHub.

You can download the GOV.UK template from GitHub. This provides all the code and assets you need to add the GOV.UK footer to your service.

All services must use the standard GOV.UK footer with the browse links removed:

Screen Shot 2016-11-07 at 15.50.28.png

You can add links to:

  • your department’s page on GOV.UK
  • other language options
  • terms and conditions
  • privacy policy

Keeping your service up to date

You should check the GOV.UK template repository regularly and incorporate changes to keep your service up to date and consistent with the rest of GOV.UK.

This is updated frequently in response to feedback, research and evolving best practice.

To find out more about working with headers, footers and templates you can:

Published by:
Technology community (frontend development)
Last update:

Guidance first published