Header

The Home Office header shows users that they are on an internal Home Office service and indicates which service they are using.

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
accountHrefotherHRef for the account link
navigationotherNavigation links
serviceHrefotherService link URL
serviceNameotherService link text
signOutHrefotherHRef for the sign-out link
signOutTextotherText for the sign-out link
usernameotherUsername of the person who is logged in

When to use this component

You must use the Home Office header if your service:

  • is internal, such as a caseworking system or admin service, and
  • sits on a homeoffice.gov.uk domain

When not to use this component

You must not use the Home Office header if your service:

  • is public-facing and transactional, and
  • sits on a gov.uk or service.gov.uk domain

How it works

Standard header

Header with service name

Header with option to sign out

Header with navigation

Accessibility

If your service uses this component, let us know of any insights you have on accessibility considerations.

Research

The header is used by:

  • Atlas caseworking system
  • Central Operations Platform

If your service uses this component, let us know of any insights you have on research.

Help improve this component

This component needs improving. We need evidence about:

  • how to write for this component
  • which services are using this component

To contribute, add your thoughts and research findings to our GitHub discussion, or follow our contribute guidance.