The GOV.UK One Login service header is a new navigation component for government services connected to GOV.UK One Login.
It provides a way for users to:
The One Login header has been adapted from the standard service header in the GOV.UK Design System.
It's a 'beta' component and we're interested to hear from service teams about how it performs with your users.
The header works best if your service uses GOV.UK Frontend.
You can preview the header in your browser.
Cross-Government Slack: use the #govuk-one-login channel
Within GDS: use the #di-one-login-home channel
The header contains two distinct navigation menus - one for GOV.UK One Login links and another for internal service navigation.
On smaller screens, both menus collapse and can be shown and hidden using Javascript.
You’ll need to adapt the internal service navigation so that it includes content specific to your service. This includes adapting the accessibility markup in the internal service navigation.
The header contains two links:
The header has space to optionally add links to different parts of your service, just as the current ‘service header’ component from the Design System does. Follow the same patterns for internal service navigation links as you do with the Design System service header.
Instructions on how the header can be installed in your Prototype Kit project are available here.
This repository contains:
/dist/html
directoryThis is all the code necessary to render the header, but you will need to make additional changes to your service and to the header code for it to function correctly.
You will need to:
The header should only be displayed when your users are signed in. There’s no ‘signed out state’ version of the header for the time being.
You’ll need to build the logic for only showing the header to signed in users within your service.
The code for the header is currently available in HTML and the Nunjucks templating language. You will need to adapt the HTML or Nunjucks for the templating language your service uses.
The Nunjucks code will work with the GOV.UK Prototype Kit, which uses Nunjucks as its templating language.
Contact the GOV.UK One Login team if you would like to share your templating implementation in this repository for other teams to use.
You'll need to modify the internal service navigation part of the header in order to:
You can visually highlight the page the user is currently on in the navigation menu by adding the service-header__nav-list-item--active
modifier class to the relevant li
element in the internal service navigation menu. You’ll need to implement this in the code you’re using to render your pages.
The header is designed to work for users of screen readers and contains some visually hidden text and ARIA attributes which you will need to edit to make it specific to your service.
You’ll need to edit the markup for the:
The menu button is used to show or hide the internal service navigation menu of the header on small devices.
You’ll need to adapt the screen reader text for the following attributes of the menu button element:
aria-label
data-label-for-show
data-label-for-hide
In this repository, the values for these attributes refer to the “service navigation menu”. You should adapt this text to describe your service’s navigation menu. For example, you could update data-label-for-show
to have the value “Show Juggling Licence service navigation menu”.
This is to help users understand which navigation menu they are opening and closing.
The service navigation menu contains links to help users navigate your service. It’s distinct from the One Login navigation menu which lets users access One Login and sign out.
You’ll need to adapt the screen reader text for the aria-label
attribute of the service navigation menu element.
In this repository, the value for this attribute refers to the “Service menu”. You should adapt this text to be specific to your service. For example, you could set the text to “Juggling Licence service navigation menu”.
This is to help users understand which navigation menu they are using. It also helps meet the WCAG requirement that navigation landmarks must be labelled when there is more than one nav
element on the page, to describe the navigation to users who may be navigating the site using landmarks.
You can visually highlight the page the user is currently on in the navigation menu.
In addition to this, set the aria-current="page"
attribute on the relevant <a>
element.
This is to indicate the user’s position in the navigation if they can’t perceive the visual highlight styling.
The One Login header contains a ‘Sign out’ link. You’ll need to update this so that it calls the endpoint your service uses to sign users out.
There’s documentation about how to sign users out in the main GOV.UK One Login technical documentation. It covers how to:
How you use the styles for the header will be different depending on whether you:
Copy the Sass files from this repository into your service's Sass implementation.
Make sure you have added node_modules/govuk-frontend/dist
to your Sass loadpath. The header code uses this to simplify its Sass import paths.
Alternatively, you can edit the header’s Sass import paths to specify node_modules/govuk-frontend/dist
for each import.
Copy the pre-compiled CSS files from this repository into your service's pre-compiled CSS.
The pre-compiled CSS files in this repository duplicate some code from the GOV.UK Frontend CSS files. The header will still be styled correctly but your CSS files will be slightly larger than they need to be.
Copy the pre-compiled CSS files from this repository into your service's CSS.
The pre-compiled CSS files contain all the CSS you need to style the header.
You must use the GDS Transport font with the header if your service is on the service.gov.uk subdomain.
However, this repository does not include the GDS Transport font. You’ll need to install it separately using GOV.UK Frontend.
There’s more information about using GDS Transport in the GOV.UK Design System.
The GOV.UK One Login service header uses Javascript to enable 'drop down' behaviour for the header on small screen sizes. The header doesn't rely on Javascript to do anything else.
Copy the code from one of this repository's Javascript files into your service's Javascript implementation.
You will only need one of the files:
service-header.js
contains the JS required for the header, but leaves initialisation to you. This is so you can run other Javascript functions before initialisation of the header dropdown functionality if you need to. service-header-with-init.js
automatically initialises the header component. All you need to do is include this fileChoose one or the other depending on your needs.
The recommendation is to import service-header.js
and run the initialisation function at a point in your code where it makes sense.
If you choose to use service-header.js
, you will need to initialise the header by importing the initCrossServiceHeader
function from the file and running initCrossServiceHeader()
in your code.
A basic working example using service-header.js
can be seen on the header preview page.
The header degrades gracefully in the absence of Javascript (for example, if a user has turned Javascript off or the code does not load). Without Javascript:
The content for the header is currently only provided in English. A Welsh translation will be available soon.
If you need to translate the header into other languages, please consider sharing your translation with the GOV.UK One Login team so it can be used by other services.