Let users navigate to their GOV.UK One Login and sign out easily

What is it?

The GOV.UK One Login service header gives users an easy, consistent route from your service to their GOV.UK One Login and a way to sign out.

It’s different to the GOV.UK header and service navigation components from the GOV.UK Design System.

When signed in, users can navigate to their GOV.UK One Login easily so they can access the services they use with it and also change their sign in details.

When to use it

You should use this pattern if your service is using GOV.UK One Login.

When not to use it

The GOV.UK One Login service header might not be right for your service if it does not use GOV.UK branding. For example, Apply to become a registered social worker in England.

How it works

The GOV.UK One Login service header provides consistent navigation for users. It has 2 sections.

  1. A top level black section that allows your users to:
    • navigate from your service to their GOV.UK One Login
    • sign out of both your service and their GOV.UK One Login
  2. A service level grey section for your service name and navigation menu.

Our research shows that using the top black section of the header for the GOV.UK One Login menu and then displaying the service name and menu on the grey level below, clearly shows these are 2 different spaces.

Choose an option for the header

You can choose one of 3 options of the header to suit your service:

  • Option 1: Default header
  • Option 2: Header with no service menu
  • Option 3: Header with a long service name or menu

Option 1: Default header

Use this if your service name and menu links fit on one level.

For option 1, this is a banner image showing the GOV.UK logo on left and GOV.UK One login with user roundel on right, then “Sign out”. All appearing within a black banner. Under this is a light grey banner with the words “Service name”. On the right are placeholder words showing indicative service link 1, service link 2 and so on.
Desktop example
For option 1, this is a mobile phone header image showing the GOV.UK logo on left and GOV.UK One login with user roundel on right. All appearing within a black banner. Under this is a light grey banner with the words “Service name” with “menu” underneath.

Mobile menus closed

For option 1, this is a mobile phone header image showing the GOV.UK logo on left and GOV.UK One login with user roundel on right with “GOV.UK One Login” underneath and under that “signout”. All displayed within a black banner. Under this is a light grey banner with the words “Service name” with the words “Close, Service link 1 and Service link 2” underneath.

Mobile menus open

Option 2: Header with no service menu

Use this if your service has no navigation menu.

For option 2, this is a banner image showing the GOV.UK logo on left and GOV.UK One Login with user roundel on right, then “Sign out”. All appearing within a black banner. Under this is a light grey banner with the words “Service name”.
Desktop example

Option 3: Header with a long service name or menu

Use this if your service name and menu links do not fit on one level.

For option 3, this is an image of the same banner as previously described. Underneath is a light grey banner with placeholder words “Service that has a really long name that stretches far across”. Underneath are seven hyperlinks to indicate the positioning of seven indicative service names, “service link 1, service link 2, service link 3 and so on.
Desktop example

How to use the header

Show the header on every page in your service

Use the header at the top of every page in your service when a user is signed in.

This gives your users a consistent way of signing out. It also helps increase their awareness of GOV.UK One Login.

Our research shows no evidence that the header distracts users in a service journey.

Use specific menu labels

Avoid generic menu labels in your service navigation as users might think they link to their GOV.UK One Login.

For example, to link to your service homepage do not use labels such as ‘account’ or ‘home’ on their own. Instead, name the account or home it refers to such as ‘Your childcare account’ or ‘Dart charge home’. Or use a descriptive label. For example, if your service homepage gives users a list of applications they’ve submitted, you could label it ‘Your applications’ or ‘Dashboard’.

Our research shows that replacing generic service menu labels with service-specific ones helps users understand that the menu links go directly to pages within the service, not their GOV.UK One Login.

How to link to your service homepage

Do not use the service name as a link to your service’s homepage. Instead, add it as the first link in the service menu, making sure you give it a specific label. This is better for accessibility and usability, as it gives users a clear indication of where the link is going to take them.

Use complementary patterns when needed

Consider giving your users additional ways to change their sign in details, if your research or data suggests they are not sure where to go. This might be suitable if your service has a separate section for user details like email address and phone number.

If you cannot use this header

You must give your users a way to navigate from your service to their GOV.UK One Login sign in details. See additional ways or patterns to show users where to change their GOV.UK One Login credentials.

You must provide a sign out link that signs users out of both their GOV.UK One Login and your service. Read the technical documentation on signing your users out.

If you have any questions or need support, you can contact us using our support form. We aim to reply within 2 working days.

Help improve this header

If you would like to help us test the new header, or have any user insights to share, please get in touch through our support form or Slack channel.

Get started

You can get the code for the header and read the guidance on Github.

Back to top