Components

GOV.UK header

The GOV.UK header component tells users they’re using a service on GOV.UK and lets them use GOV.UK-wide tools. Also known as the GOV.UK masthead.

Rendering...
<Header organisationHref="#" />
Props
NameTypeDefaultDescription
idstring-'id' attribute to place on the base HTML element
classBlockstring-Block name override in BEM style classes applied to all elements
classModifiersModifiers-BEM style modifiers to apply to the base HTML element
classNamestring-Extra classes to apply to the base HTML element
maxContentsWidthnumber-Maximum width of the contents in px units (-1 for full width)
organisationHrefstring"https://www.gov.uk/"Organisation link URL
serviceHrefstring"/"Service link URL
serviceNamestring-Service link text

If you use the GovUKPage component, you’ll also get a GOV.UK header without having to add it, as it’s included by default.

When to use this component

If your service is being hosted on one of these domains, use the GOV.UK header component:

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

You must use the GOV.UK header component at the top of every page. This is to maintain user trust as they move around the GOV.UK website and other government websites and services.

The Service Manual explains why it’s important for you to make your service look like GOV.UK.

When not to use this component

If your service is not hosted on one of the gov.uk domains outlined, you must not use the GOV.UK header component as it’s not considered part of GOV.UK.

Use the Generic header component instead to show your own organisation’s branding.

How it works

Together, the GOV.UK header and Service navigation component both ensure users get a consistent experience on GOV.UK.

This also assures users that they're in the right place to use your service and to understand that GOV.UK functions as one website.

For guidance on how to plan your header and navigation, see the Help users navigate a service pattern.

Default GOV.UK header

Most services on GOV.UK should use the default GOV.UK header.

It should only show the GOV.UK logo and any GOV.UK-wide links and tools to help your users. Do not add the menu of GOV.UK topic links to your service’s GOV.UK header.

Rendering...
<Header />

Do not show service name or navigation links in the GOV.UK header

You can no longer use the GOV.UK header to show service name or navigation links. Use the Service navigation component instead.

The Help users navigate a service pattern shows how the GOV.UK header and Service navigation components work together to help users know they’re using your service and navigate around it.

We do provide support for providing a product/service name, but it should not usually be used.

Rendering...
Rendering...

GOV.UK header with One Login

IMPLEMENT ME.

Stories

Full width

A header that does NOT restrict the width on wide screens.

Rendering...
Rendering...