Components

Header

The GOV.UK header shows users that they are on GOV.UK and which service they are using.

WCAG 2.2

New WCAG 2.2 criteria affects this component

To use the ‘Header’ and meet the new Web Content Accessibility Guidelines (WCAG) 2.2 criteria, make sure that users can successfully:

• see all page content when interacting with a dropdown menu
• find help links in a consistent place on each page

See the full list of components and patterns affected by WCAG 2.2.

Open this example in a new tab

If you use the page template, you’ll also get the header without having to add it, as it’s included by default. However, if you want to customise the default header, read the page template guidance about customising components.

When to use this component

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

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

When not to use this component

You must not use the GOV.UK header if your service is not being hosted on one of the above domains.

How it works

Default header

Use the default header if your service has 5 pages or fewer.

Open this example in a new tab

Header with service name

Use the header with a service name if your service is more than 5 pages long - this can help users understand which service they are using.

Open this example in a new tab

Header with service name and navigation

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

WCAG 2.2

Do not make header elements, like dropdown menus, ‘sticky’ to the top of the page by using `position: fixed` or any other method. In other words, avoid any implementations that cause menus to sit on top of page content.

This is to make sure it does not hide or obscure any content which has a focus applied and comply with WCAG 2.2 success criterion 2.4.11 Focus not Obscured (minimum).

In November 2021, the GOV.UK homepage introduced a menu bar that avoids obscuring content by shifting the page down.

Open this example in a new tab

WCAG 2.2

You can add a link to a ‘help’ page in your service’s header. If you do, the link must be positioned consistently within the header, and must always link to the same place.

For example, a header link to “Get help with this service” must go to the same place as similar header links elsewhere in your service. This is to comply with WCAG 2.2 success criterion 3.2.6 Consistent Help.

Help improve this component

To help make sure that this page is useful, relevant and up to date, you can:

• take part in the ‘Header’ discussion on GitHub and share your research
• propose a change – read more about how to propose changes in GitHub

Tell us if your service uses this component

Take part in our usage survey (opens in a new tab) to help us improve this component to better meet the needs of the services that use it.

Need help?

If you’ve got a question about the GOV.UK Design System, contact the team.