Generic header

[timpaul]

What

Unbranded header for services that aren't on GOV.UK.

Why

There are a large number of government services that aren't on GOV.UK, but that could make use of the components and patterns in the Design System. For example - admin systems, case working tools and intranets.

We currently provide no guidance on how to style these. As a result, each team or department has created it's own templates, resulting in a large amount of inconsistency and duplication of effort. This makes it harder for staff to learn new systems when they move departments or teams.

Examples and links

Examples of headers taken from https://cross-gov-caseworking.herokuapp.com/

Home Office is rolling out page templates for it's staff services, and has invited other departments to make use of them. There has been some update at MoJ and DWP already.

HMRC has it's own pattern library, which uses similar page templates.

[timpaul]

Dropbox Paper audit

On 29 Jan 2019 the Design System team reviewed a Dropbox Paper document discussing admin system headers.

The aim was to reduce the number of places containing guidance and code by:

• migrating relevant, useful content into the Design System itself
• recording important research findings in the community backlog
• removing the original Dropbox Paper page

Below is a record of the outcomes of that review.

If you need to, you can see the original Dropbox Paper content in the internet archive.

Review outcomes

The following research and examples were the result of a x-gov internal systems meetup on 14th and 15th Jan 2016.

Context of use of internal Government systems

• Internal staff systems are sometimes seen by end users, for example if they visit a job centre or another face-to-face touchpoint.

• Many staff spend their entire working days using internal tools, and jump between multiple systems as they have to use multiple ones simultaneous to do their job. E.g. case workers may have to consult/enter data into 3 or 4 systems to complete one case.  


• Note that when working between different systems, some users arrange the systems on their screen in specific ways to maximise either efficiency and utilise screen real estate, for example having one system in a window on one side of the screen and another on the other side to speed up cut and paste or cross referencing 


• The tool will be accessed from a variety of screen sizes and device types (mobile, tablet). 


• Many tools are used frequently by users who become expert in the system, but other tools are only used very occasionally, so it cannot be assumed that users are familiar with the form and function of an internal system.


User needs

• 
As a gov employee I need to quickly find the functionality I need in the tools I use, so that I can be efficient in my job
 - “Where is the search box here?" 


• As a gov employee I need to be able to quickly identify which tool I am looking at when I glance at the page, so that I am efficient and reduce mistakes

• As a gov employee I need to have trust in the internal tool that I am using, so that I can be confident using it and showing it to citizens when necessary 


Types of content in current internal tool header’s:

• Primary nav and Secondary nav

• Department name

• Service name 

• Navigation elements - pattern that top left includes link back to dashboard/top of the tool 

• Breadcrumb trail

• Page name 

• Search box

• Page controls 


Questions

• Can internal tools that are not on Gov.uk be allowed to use Transport and Crest? Currently not, but we discussed the value of trust these element bring, and the assurance 'the thing' meets a certain standard

Summary of thoughts / recommendations from the day:

• there may be a few variations of header needed

• trust is just as important for gov users (and when they share screen with non gov users)

• header / systems should feel part of the gov 'family' - a continuum within a digital service, and across different services.  What the external user sees and the internal user sees, in service delivery are part of a whole

• Follow 'norms' for header layout - home page/name of the thing to the left.  user settings to the right.

• use words not icons

• use type not images

• dept logos? hmm maybe?  Text is better.

• search?  probably not - unless it truly searches everything

• put as little as possible / as needed in the header.  users miss navigation and other elements in the header

• use a secondary header - no recommendation on how this should look/feel.  But used for navigation, search, breadcrumbs, info that need to 'stick' to top of page, etc


[MalcolmVonMoJ]

The pattern used by some MoJ services hosted on legalservices.gov.uk

The LAA's Client & Cost Management System uses this header:

Some services use their own departmental colour like Civil Service Learning

[EveBayram]

Example
Header for an internal MoJ service:

This service is using the MoJ header pattern: https://moj-design-system.herokuapp.com/components/header

In this example, the header includes two links:

1. crest + HMPPS (this link is a way out of the service - it takes you to a navigation page listing other internal services that you have access to)
2. Service name (this is a homepage link within the service)

Observations

When observing users on the service, they are not confident navigating with these two links. I've observed confusion caused by the two links going to different places during testing sessions.

Thoughts

1. The MoJ header pattern has these two links aligned left, whereas the GOV design pattern has the first aligned left and the second link aligned centre. My first untested thought is that the lack of spacial distancing and the mental association that this service is part of HMPPS makes it difficult for users to predict that these are two separate links that will take them to different places.

2. Unlike GOV.UK, internal case management services don't always have a clear 'home'. So if you are using the organisation name (or crest) as a link it's harder for user's to know where this will take them.

[karypun]

We've just launched our HO page templates last week, combining internal headers and footers which were originally separate elements in our design system. There's still a bit of work to do on the code snippet but you can see what we've done here: https://design.homeoffice.gov.uk/styles/templates

[owenatgov]

We have published the Generic header component

Overview

The GOV.UK Design System published the Generic header component on 23 June 2026 in GOV.UK Frontend v6.3.0.

We’ve paired this component with technical guidance on how to remove the GOV.UK branding from GOV.UK Frontend.

Issues

We worked on the Generic header in the following cycle briefs:

• Explore how non-GOV.UK services can use the black header #5206
• Publish generic header and related guidance #5313

Pull requests

The Generic header was added to GOV.UK Frontend in alphagov/govuk-frontend#7061

Further technical exploration was carried out in:

• [SPIKE] Make the header extensible govuk-frontend#7026
• [SPIKE] Un-brand the website #5274

Why did we make it?

The GOV.UK brand refresh (shipped in Frontend v6, 2026) included an updated header component. The original header component had a black background, while the refreshed component uses the GOV.UK brand blue. This meant that the new header was considered more of a brand element and less generic.

It was decided by the team leads and GOV.UK leadership that a generic header would be useful to users who were not technically GOV.UK, but GOV.UK adjacent. For example: HM Land Registry.

Design considerations

The Generic header is based on the branded GOV.UK header

• This is to allow some level of visual consistency between GOV.UK and non-GOV.UK domains
• This is also so that the two components have enough parity to mitigate the work needed to maintain both
• It was also decided that the generic header should not include more features than the branded header, to avoid users ‘hacking’ the generic header to look like the branded header but with extra features

The Generic header’s background is GOV.UK black because

• This is considered ‘neutral’ enough for non-GOV.UK services to use, as opposed to the GOV.UK brand blue (which is protected under the brand and will likely clash with a non-GOV.UK domain branding)
• The original GOV.UK header had a black background, which means there are many domains already using the black (as they did not update to Frontend 6.0 or later)

The Generic header is intended to be 60px high. This is to match the GOV.UK branded header

• The height of the header is calculated by adding the height of the logo, plus the top and bottom padding of the logo
  If users change the logo and their logo is shorter or taller, this will affect the height of the header
• The example logo SVG used in our component guidance is 30px high
• Our guidance recommends 60px as the height because this fits nicely with the service navigation component