Service navigation

[govuk-design-system]

What

Help users navigate sections in your service.

Why

Services that use this pattern:

• gov.uk/government
• GOV.UK Notify Admin
• GOV.UK Pay Admin

Anything else

• Home Office has an example of Sub-navigation links: Home Office design system
• HMRC removed and labeled "not a thing" to their example of Navigation: HMRC design system
• Digital Market Place Frontend toolkit has a component for previous/next navigation

Related items:

• Breadcrumbs
• Navigation bar
• Tabbed navigation

[ignaciaorellana]

As discussed with some designers in the past xgov design system workshop, this pattern could just be general 'Navigation' which has different applications (Primary, secondary, account navigation, content list, etc.) @timpaul @joelanman thoughts?

[timpaul]

Yeah, I think we could have a general 'Navigation' pattern, but we might need to also make some more specific navigation components to go with it.

[penx]

Related to site header (#5958), which frequently contains navigation elements

[penx]

please consider whether there is value in supporting optional icons next to key navigation items for a site, e.g. "Search, Home, Help"

[joelanman]

@penx do you know of any government services that have done this?

[penx]

@joelanman we have an internal system at the Home Office, that was originally not using govuk styles, but now does. We have a bespoke nav that includes icons. This isn't exactly how it looks but I have done a mockup of the kind of thing I mean:

[penx]

the icons above are from the home office design system https://home-office-digital-patterns.herokuapp.com/components/icons

[joelanman]

Thanks, good to know!

[peternunn101]

We care currently designing an application that provides a number of services/forms/reports. The end user can be required to re-visit and make edit/additions to these services/forms/reports - so all need to be available after sumbission. Additionally there may be a number of different user settings that require administration. Finally we also require a section that provides secure messaging and uploading. We were hoping create a navigation system with both a primary and secondary navigation - similar to that provided here: https://design-system.service.gov.uk/components/ . After some investigation we have been advised that this pattern is not recommended for service. Are there any navigation patterns that can be used that are similar

[andyjones81]

Just wanted to share some feedback for vertical navs and what we learnt on a service we are working on at the moment. We've gone with a vertical as horizontal tabs didn't work well with the content we have and users completely missed them.

We looked at vertical tabs, and tried link lists but they didn't work well with users. So we adapted the vertical nav thats in the design system. This worked really well with our uses and we have created a pattern for it in our design system. It worked well with screen readers and users with assistive tech. We had one user who said they were very surprised it was easy to navigate the pages.

Using tags for the counts, with some hidden descriptive text also helped with screenreaders, similar to the "Change" link in the CYA/Summary pattern.

[titlescreen]

This is something we have recently been looking at DfE, we have gone through #5906 for reference to try and get something consistent with other top navigation bars.

I think the only thing really to highlight is the sign out link on the right.

[calvin-lau-sig7]

We’ve chosen to prioritise ‘Navigation’ as one of our Upcoming components and patterns.

If you’d like to help, join the GitHub discussion page for Navigation. We’ve created it to make it easier for the community to discuss issues and options.

[CharlotteDowns]

We've just added some guidance on how to 'share findings about your users' with us 📝. This will help us learn more about how your users navigate within your service.

[CharlotteDowns]

Hi folks, for anyone who missed or wants a recap of our Navigation: help us define our next component kick off workshop, on 18 April 2024, we've posted a summary to the discussion thread Navigation - related research and resources #3661

[CharlotteDowns]

GOV.UK Design System working group review

Representatives from the GOV.UK Design System working group reviewed a 'navigation’ contribution in April 2024.

Four of the members in the group agreed that the component met the criteria for a useful and unique contribution to the Design System. One member disagreed that the contribution met the criteria.

The working group also made the following recommendations.

Scope of the contribution

There was a range of feedback on the scope of the component and how it relates to other components in the Design System.

The main themes were that:

• Navigation needs to be more than an extension to the header component
• End users need to have a consistent (not necessarily uniform) experience across GOV.UK pages
• Services need to know how flexible the Navigation contribution will be, and understand (as early as possible) how future versions of GOV.UK Frontend will affect them

Guidance

• Restructure guidance based upon our decisions on how many components/patterns it should be
• Help teams understand other headers in GOV.UK and when and why to use ours

Design

• Explore how to show a greater visual distinction between a service name with and without a link
• Revisit the impact of reducing space within the header, service name and navigation proposals
• Investigate organisation switchers and location of Phase banner in relation to service name and navigation
• Investigate whether or not the main navigation takes a vertical position instead of horizontal beneath the header
• Consider One Login Header users that may not operate a service, for example, GOV.UK email notifications
• Consider colour contrast and font weight of Navigation elements

Code

• Explore the feasibility of ‘slots’ to insert additional html and whether we should keep all these slots full width

[kr8n3r]

yes one can

[owenatgov]

I should've mentioned: the DS team did some investigation into service nav on the tech docs gem a few months ago and there's a plan to soon-ish aka before v6, maybe even this quarter, to implement it as a feature in the tech docs gem properly.

[SKSruthi]

Hello Team,

I had a quick question regarding the service navigation links. Is there a specific reason why these links do not include an underline text decoration?
Many users rely on assistive technologies or tools designed for individuals with visual impairments, such as color blindness or low vision. These tools often strip away color and render content in high-contrast black-and-white modes. In such cases, the current styling may not be enough to distinguish hyperlinks from regular text. Using an underline helps clearly identify hyperlinks, making the experience more accessible for all users.
Would it be possible to consider underlining the navigation links to support better accessibility?

[owenatgov]

Hi @SKSruthi

That's a reasonable point, however this is intentional. We made this decision because the context of the content being words or phrases in a UI element such as in the service navigation, under the header, communicate that they are links in that context without the need for an underline style. We mention this in our links guidance under links without underlines:

For example, links in a header or side navigation might not need underlines. Users will understand that they’re links because of where they are on the page.

This is a common convention across the web so the likelihood of a user confusing a link in service nav for text is low. This was consistent with our investigations into findings from early versions of the component from other departments.

[SKSruthi]

Hi @SKSruthi

That's a reasonable point, however this is intentional. We made this decision because the context of the content being words or phrases in a UI element such as in the service navigation, under the header, communicate that they are links in that context without the need for an underline style. We mention this in our links guidance under links without underlines:

For example, links in a header or side navigation might not need underlines. Users will understand that they’re links because of where they are on the page.

This is a common convention across the web so the likelihood of a user confusing a link in service nav for text is low. This was consistent with our investigations into findings from early versions of the component from other departments.

Hi @owenatgov
Thanks for your quick response.
In our application, we currently have a Back link and a set of service navigation links positioned just below the header. I've noticed that the Back link includes an underline, whereas the service navigation links do not.
Is there an intentional design distinction here? Are we expecting to treat the Back link and the service navigation links as elements belonging to separate sections or categories?
Just looking to clarify the design intent so we can ensure consistency and accessibility.

[lalexander12]

What

Help users navigate sections in your service.

Why

Services that use this pattern:

• gov.uk/government
• GOV.UK Notify Admin
• GOV.UK Pay Admin

Anything else

• Home Office has an example of Sub-navigation links: Home Office design system
• HMRC removed and labeled "not a thing" to their example of Navigation: HMRC design system
• Digital Market Place Frontend toolkit has a component for previous/next navigation

Related items:

• Breadcrumbs
• Navigation bar
• Tabbed navigation

the links in the Anything else section are all broken

[darlojo]

Hi @SKSruthi
That's a reasonable point, however this is intentional. We made this decision because the context of the content being words or phrases in a UI element such as in the service navigation, under the header, communicate that they are links in that context without the need for an underline style. We mention this in our links guidance under links without underlines:

For example, links in a header or side navigation might not need underlines. Users will understand that they’re links because of where they are on the page.

This is a common convention across the web so the likelihood of a user confusing a link in service nav for text is low. This was consistent with our investigations into findings from early versions of the component from other departments.

Hi @owenatgov Thanks for your quick response. In our application, we currently have a Back link and a set of service navigation links positioned just below the header. I've noticed that the Back link includes an underline, whereas the service navigation links do not. Is there an intentional design distinction here? Are we expecting to treat the Back link and the service navigation links as elements belonging to separate sections or categories? Just looking to clarify the design intent so we can ensure consistency and accessibility.

Hi there - I came to ask the same thing. Have just done an accessibility audit on my service, and removing the underlining on links in the top navigation feels like a step backwards for accessibility, but at the same time will make it more inkeeping with the design system.

[joelanman]

On back links vs service navigation, I think the design thinking is that the navigation links are visually inside the navigation section, therefore they don't need underlines. The back links are visually in the 'content' area where there is other non-link text, so it helps to have an underline to differentiate it.

[darlojo]

OK, thanks for the clarification!

[steve-oconnor]

Updated version of the initial descriptive comment @joelanman

What

Help users navigate sections in your service.

Why

Services that use this pattern:

gov.uk/government
GOV.UK Notify Admin (Does it still?)
GOV.UK Pay Admin (Does it still?)

Examples of similar components

• Bristol City Council header with sub-nav
• Digital Land Sub-nav tabs
• DWP Horizontal navigation
• Home Office Design System header
• MOD Header
• MOJ primary navigation
• National Archives header
• National Archives secondary navigation
• NHS Header
• NICE Horizontal nav
• ONS Header with sub-navigation
• Transport for West Midlands header puts the service navigation in the top bar.
• Scottish Government site navigation

Anything else

HMRC decided it was "not a thing" for them in a HMRC GitHub navigation discussion

Related items:

https://github.com/alphagov/govuk-design-system-backlog/issues/33
#5906
#5916

[taylor-la]

Hello, we did some testing of the service navigation component during UR and we found all 5 participants struggled to figure out how to get to the service homepage using the service navigation bar. They didn't realise that the service name was clickable (possibly because it's black text?). We experimented with adding a 'home' link next to the service name and this tested much better. However, this creates repetitive links which isn't great from a screen reader accessibility point of view. Has this come up for any other services?

[alrobboOC]

To Mark's point above, this service nav with a long service name makes the design look really weird!

Hey folks

We recently had an interesting discussion around this new component within our design community.

These are a few of the keys points

* have we considered how this looks with a long service name? An example given of a long service name was ‘’Apply for and manage your customs and excise authorisations”

* Someone pointed out that with cookie banner and phase banner, it pushes a lot of the key content quite far down page

* With the One Login component and the new service navigation we have a double dropdown menu on mobile

I thought it would be good to feed our community thoughts and discussion into the wider design community

[NickColley]

Heya @alrobboOC, thanks for raising!

There's an issue about this over on GOV.UK Frontend to look into this:
alphagov/govuk-frontend#6525

[CharlotteDowns]

Hi folks,

I thought I'd used this thread to summarise a few improvements we think we could make to the Service navigation component and see if these issues are shared by the wider community. Maybe some of you have even come up with fixes for them 🤞🏻.

The issues we have noticed are:

1. when the Service navigation has a lot of content it wraps to two lines with wide spacing - Improve it's responsiveness
2. that the inverse component doesn't have a hover colour compared to similar inverse components like the button
3. the above issue about long service names, which relates to 1.
4. increase the interactive area of links inside the service navigation

Hearing from you all will help us determine whether we can prioritise over other things.

[mia-allers-gds]

I also have a proposed improvement to make on the nav:

• Design the links with enough affordance that the underline on hover isn't necessary