Components

Generic header

Use this generic version of the header to tell users they’re using a government service that’s not part of the GOV.UK website.

This implementation adds explicit support for governmental departments through adding the appropriate departmental colour and providing a default crest as a logo.

Rendering...
Rendering...
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
departmentstring-Department branding to use (e.g. home-office)
maxContentsWidthnumber-Maximum width of the contents in px units (-1 for full width)
organisationHrefstring-Organisation link URL
organisationTextstring-Organisation link text
serviceHrefstring"/"Service link URL
serviceNamestring-Service link text
logoReactNode-Custom logo, use null to remove

When to use this component

Use the Generic header component if your service is both:

  • a public-facing government service
  • not on the GOV.UK website (meaning that your service is not part of the GOV.UK proposition)

This is to bring consistency and maintain user trust in journeys that move between the GOV.UK website and other government websites and services.

This component also helps ensure your non-GOV.UK service does not:

  • identify itself as being part of GOV.UK
  • use the crown or GOV.UK logotype in the header
  • use the GDS Transport typeface
  • use the GOV.UK brand colours

See the guidance on if your service is not on GOV.UK in the Service manual.

When not to use this component

If your service is hosted on one of these gov.uk domains, you must use the GOV.UK header component instead:

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

Using your own brand logo

Follow your organisation’s guidelines and best practice to show your brand logo.

To make your logo image as accessible and optimised as possible, also see:

Rendering...
Rendering...

Homepage link

By default, the homepage link points to /, which is the top level of your service’s domain. You should customise the link to point to wherever makes the most sense for your service.

Do not show navigation links in the Generic header component

As with the GOV.UK header component, you should not use the Generic header component to show navigation links. Use the Service navigation component instead to let users navigate to different parts of your service and find useful links and tools.

Stories

Standard

A standard Header.

Rendering...
<GenericHeader />

Header with service name

Unofficial
Rendering...
Rendering...

Full width

Unofficial

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

Rendering...
Rendering...

Department colours

Unofficial

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

DBT

Rendering...
<GenericHeader department="department-for-business-trade" />

DCMS

Rendering...
<GenericHeader department="department-for-culture-media-sport" />

DEFRA

Rendering...
<GenericHeader department="department-for-environment-food-rural-affairs" />

DHSC

Rendering...
<GenericHeader department="department-of-health-social-care" />

DWP

Rendering...
<GenericHeader department="department-for-work-pensions" />

FCDO

Rendering...
<GenericHeader department="foreign-commonwealth-development-office" />

Home Office

Rendering...
<GenericHeader department="home-office" />

HMRC

Rendering...
<GenericHeader department="hm-revenue-customs" />

HM Treasury

Rendering...
<GenericHeader department="hm-treasury" />

MHCLG

Rendering...
<GenericHeader department="ministry-of-housing-communities-local-government" />

MoJ

Rendering...
<GenericHeader department="ministry-of-justice" />

Office of the leader of the House of lords

Rendering...
<GenericHeader department="office-of-the-leader-of-the-house-of-lords" />

Scotland office

Rendering...
<GenericHeader department="scotland-office" />

Wales office

Rendering...
<GenericHeader department="wales-office" />