GOV.UK header

[govuk-design-system]

Use this issue to discuss the header component in the GOV.UK Design System.

What

Header for GOV.UK, including full-width, departmental, internal and service variants.

Why

Site headers are used on all web pages. There's also a need for consistent headers for departmental and internal services.

Anything else

• Top bar in DWP design patterns
• Service header in Home Office design system
• Site header discussion on Dropbox Paper

Related patterns

• Footer #5959 Site footer

[hannalaakso]

Capturing alphagov/govuk-frontend#972 here - the extra space in the header on certain tablet breakpoint is something we should explore fixing but there is no straightforward way to do this because:

• it's possible that we should be recommending services to have the "GOV.UK" text as part of the service name as in the Design System header (linking to https://www.gov.uk/ from a service domain might not be helpful to users)
• many services have search and various navigation in the header

[lfdebrux]

It's a small thing, but we (Digital Marketplace) just noticed that the header example in Design System is slightly different to the header used for the Design System; the service name ("Design System" in this case) is in a different place.

In the header used, the service name is right next to the GOV.UK badge, and a lighter font. In the example header, the service name is in the middle of the header, and in a bold font.

As there isn't any specific guidance on where the service name should be in the header does mean that the example is not definitive?

[ghost]

Many HMRC services do not use the navigation but do have a 'Sign out' link on the right hand side of the header.

Desktop

Mobile

This would be a good thing to include in the documentation and code, assuming this would help other government departments too.

This could also be part of alphagov/govuk-design-system-backlog#95.

[dashouse]

@lfdebrux Hi Laurence, apologies for the the delay in responding to this.

The header in the Design System is to be used by services. The service name is in bold, centred within the header and has independent links to both the first page of the service and the GOV.UK home page

The header used by the Design System is the header designed for GOV.UK products. It's currently in use on GOV.UK Service Manual, GOV.UK Service Toolkit, GOV.UK Notify, GOV.UK Pay, GOV.UK Verify, GOV.UK PaaS and Registers product pages. This has the product name directly next to GOV.UK and they are grouped together as one link that takes you to the product home page.

This design was initiated for the Government as a Platform products just under two years ago. It might be that it would be the better option for Digital Marketplace too.

[murfious]

It would be great to have some padding between the ‘Menu’ link and the service name on the header seen on small screens. Having them butt up so close I think reduces readability.

[jeanesims]

This is an example (below) of how the header looks in our service.

The first iteration did not have any navigation.

User research showed users needed navigation so a later iteration (below) had navigation links in the black header. Unfortunately, we found that users did not see the links there.

We looked at other services including the Agent services account (many of our users are agents) and integrated an existing design with the navigation below the black header.

Implementation details:

• the header is consistent across all pages
• when you're within one of the sections it is highlighted as an active category

Users have found this iteration much easier to use and it has tested well.

[edwardhorsford]

It would be good if the menu collapsing could be disabled / smarter. My service has a single item in that bit of the header, so collapsing it just puts it a further click away. I wonder if it could not collapse if there's just a single item. I'd guess we can probably hack the html to do it in the short term.

Desktop:

Mobile:

[hopebristow]

I just wanted to add to this discussion to say that we also have found that users often do not see this header navigation on our service. We are working on the "Drive in a Clean Air Zone" service and we used this pattern whilst designing our check multiple vehicles service which is for business users to create an account. During our beta research found we found around 35% of a sample of 115 users did not see the navigation at all and this has been a recurring finding in just over a years worth of research. We have recently been testing a pattern with the navigation below the black header similar to HMRC's personal tax account header and have found this to be much more successful with our users. Although this does seem to be presenting us with some challenges for implementation for a mobile with JavaScript turned off.

[henocookie]

Hello! As part of discussions for the header component in the NHS digital service manual community backlog, it appears the examples and guidance for the GOV.UK Design System header component may be out of date when compared with the latest header which is live on GOV.UK

[vanitabarrett]

Hi @henocookie 👋 The header on the GOV.UK website (www.gov.uk) is different to what's in the GOV.UK Design System. At the moment we don't have plans to update the header in the Design System as the navigation links exposed in the GOV.UK header are there to expose GOV.UKs information architecture to users and that's not necessarily useful information to those completing services. Services often have their own navigational elements (log in/out) etc which that design doesn't account for.

[terrysimpson99]

For info. The service for 'Tax free childcare' has 'Sign out' on the right but below the header.

I don't know why that design was chosen. I'm showing it here just for information, not as a recommendation.

[FeyAgape]

productName | string | Product name, used when the product name follows on directly from ‘GOV.UK’. For example, GOV.UK Pay or GOV.UK Design System. In most circumstances, you should use serviceName.

Just wondering if the font weight actually offer any value to users and if testing was documented anywhere?

[CharlotteDowns]

We ran an external accessibility audit for some of the components and patterns in GOV.UK Frontend in May 2023. In that audit, we included an example of the Header component. We’re adding results from that audit here so that we can:

• document, discuss and address the findings
• inform future contributors of the findings

One usability issue raised

''Show or hide menu' label is redundant since we use 'aria-expanded'. Change label to just 'Menu'

The menu button has been provided with an ‘aria-label’ adding the phrase ‘show or hide’ to the accessible name. However, as the ‘aria-expanded’ already conveys the functionality and current state, the show or hide text may add some confusion.

More detail in this issue:

• #3696

[frankieroberto]

We have recently added a navigation bar to our service, and as part of this, we moved the "Sign out" link from the service navigation menu in the GOVUK header to the new navigation bar.

One of the advantages to this is that it means we can drop the "Menu" toggle in the GOVUK header, which currently appears on mobile.

Here’s the new design:

[36degrees]

@frankieroberto would you mind adding this as a comment to our discussion about navigation too?

[mattia-gobbo]

For 'Send an SR1 medical evidence form', the 'Header with service name and navigation' was tested with 50 users using different devices over 6 rounds of testing to understand user experience of navigating SREL journey whilst completing a set task in which they were asked to navigate into other pages. The component has consistently failed in user testing as users across the digital familiarity scale have struggled to find those pages (listed as nav item in the header). Research has shown that, as the nav bar is embed into the header and there is no clear distinction between them (the title of the service and the nav items have the same font color and background color) users struggle to find the navigation, the header is hidden on scroll - potentially a sticky navbar would work better.

We've tested an header with a different layout (second image) and this performed better as items were more visible to users and better aligned.

[frankieroberto]

@mattia-gobbo thanks for sharing! This research finding matches research that previous teams have done too (as in thread above).

You might also want to look at the proposed future header for GOV.UK services using One Login, which has the sign out link in the black bar, but the service name and navigation in a separate grey bar below.

[daniel-teanby]

A note to the Design System team that One Login are looking to include a dropdown menu in the header (image below), similar to the example found in the Layout super navigation header over on GOV.UK. Thanks!

[leedxw]

We were asked to implement the GOV.UK header banner on domains under campaign.gov.uk in June 2025.

Example: https://prepare.campaign.gov.uk

But this pattern is not one of the approved domains listed in notificiation-banner/index.md

[leedxw]

Is it possible to clarify how the header banner is expected to behave if the page is RTL <html dir="rtl" > ?

Should it it be

• a left-aligned "[crown] [GOV.UK]"
• a right-aligned "[crown] [GOV.UK]"
• a right-aligned "[GOV.UK] [crown]"

Examples on www.gov.uk have class="direction-rtl" applied to divs inside the page, not the whole page, so it's not clear if left-aligned logo is a deliberate choice.