Header with primary navigation, global search, sign out, account navigation.

[gavinwye]

The header for HMPPS staff facing services.

This is a version of the services header from GOV.UK used in Notify and Verify

Elements used in the header:

• HMPPS logo and service name
• Username, Links to users settings page
• Sign out link
• Primary navigation

Switcher is part of another component.

[adamsilver]

All done except for the crest. Issue in frontend here: https://github.com/ministryofjustice/mojdt-frontend/issues/17

[jkosem]

What about the search?

[adamsilver]

What about the search?

See examples here: https://moj-design-system.herokuapp.com/components/primary-navigation

[EveBayram]

The MOiC HMPPS service is using this header. Our team have found some confusion with the links coming from the HMPPS logo and the Service name. Feeding back here:

We have the HMPPS logo linking to a service selection page (HMPPS Digital Services), and the Service name linking to our service homepage.

Having two different links going to different places seems confusing for users.

The alignment of the service name towards the left brings it alongside the HMPPS logo, which makes it look like a single component (and therefore a single link). If you compare this to the GOV header with Service name there is a wider visual gap so it is less confusing to have two separate links.

[Andy-Millar]

Would really like to avoid the current options for the selected state for the nav item. I've currently seen the following for the selected item:

• blue text on black background: difficult to read (worth noting the new blue is slightly lighter, but still difficult);

  

• bold text: just isn't differentiated enough and creates moving elements (the nav items switching from regular to bold text - see below)

  

Would be good to work on an alternative solution for the selected state, however we are limited with this version of the primary nav (black background, white links)

[adamsilver]

I think we should put an underline (but not border) on the selected (or unselected) state.

[Andy-Millar]

I thought of similar, but it's a bit too subtle, and looks quite odd with the blue line at the bottom of the header. Here it is with and without the blue line...

Blue line underneath would defo clash with the header blue line

[Andy-Millar]

Do we have alternatives to the black primary nav that we can use?

I suppose we just use the exact same styling in the design system for now (blue for selected)

[MalcolmVonMoJ]

Another pattern I have seen used is this.
(In spite of the ALPHA tag, it is a live service and has been for a couple of years now, this is a screenshot from my account.)

[MalcolmVonMoJ]

Also, two versions of the header as used on legalservices.gov.uk. Uploaded mainly to show the department and logo rather than the navigation. The LAA version also has blue-on-black navigation in some places, identical with the GDS design system.

[MalcolmVonMoJ]

I asked GDS on their Design System channel. They seem happy with the blue on black. Like you, I think it might be difficult to read, but the contrast is sufficient for AA and even AAA in large text - which I guess it will always be.

Do we have research that indicates that this is insufficient or is it a hunch? If the former, we could contribute to their github ticket on alphagov: govuk-frontend/issues/1133.

[Andy-Millar]

It's more of a hunch that has been expressed by several team members. This was more with the previous blue being used - the new version does improve contrast. I'd also say that best practice would suggest that differentiating by colour alone is perhaps not the best approach.

In terms of flexibility, the black nav causes an issue if we want to display the location switcher above the primary nav - above and below examples shown below...

Using the same nav that has been used in the design system (as an example) provides a lot more flexibility (above and below shown below...)

I am going to bring several examples to the next working group meeting, and we can all discuss options and agree a way to proceed.

[MalcolmVonMoJ]

The other option we have regarding the header on non-gov.uk domains is the colour bar. Other services occasionally choose to use their departmental colour. MoJ's colour is #5a5c92. I've not seen this used anywhere.

Also, as can be seen here, a 404 (or other) error can change the colour bar to red (#df3034). CCMS does this - although it probably still uses #B10E1E (old error red).

[gavinwye]

Figma file with variations and header exploration

https://www.figma.com/file/bYN8ZmgzkU5dvUcEUOFTGEaR/Departmental-Headers?node-id=0%3A1