Components

Header

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

This implementation also supports websites not hosted on GOV.UK by replacing the crown logo. It also provides explicit support for individual government departments by through the use of the appropriate departmental colours.

Props
NameTypeDefaultDescription
idother'id' attribute to place on the base HTML element
classBlockotherBlock name override in BEM style classes applied to all elements
classModifiersotherBEM style modifiers to apply to the base HTML element
classNameotherExtra classes to apply to the base HTML element
departmentotherDepartment branding to use (e.g. home-office)
govUKotherWhether to add the standard Gov.UK content
maxContentsWidthotherMaximum width of the contents in px units (-1 for full width)
navigationotherNavigation links
organisationHrefotherOrganisation link URL
organisationTextotherOrganisation link text
serviceHrefotherService link URL
serviceNameotherService link text
signOutHrefotherSign out link URL
signOutTextotherSign out link text
logootherCustom logo, use null to remove

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

It can be used elsewhere as long as govUK mode is NOT enabled.

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. However, you can still use this component if you disable govUK mode which will remove GDS' crown logo.

Stories

Standard

A standard Header. This does not include GDS' crown logo and is suitable for use outside of GOV.UK including internal application and websites of local councils.

Default GOV.UK header

Use the default GOV.UK header if your service is hosted on GOV.UK and has 5 pages or fewer.

Header with service name

Header with service name and navigation

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

Header with service name and sign-out link

A sign-out link can be provided and added to the end of the list of navigation links.

Full width

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

Custom logo

A custom logo can be provided, via the logo prop.

No logo

The logo can be removed entirely by passing null to the logo prop.

Department colours

If you are building an internal application you can supply the name of your department in order to use their colours.

DBT

DCMS

DEFRA

DWP

FCO

Home Office

HMRC

HM Treasury

MHCLG

MoJ

Office of the leader of the House of lords

Scotland office

Wales office