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 (#97), 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 #151 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

[CharlotteDowns]

GOV.UK Design System working group review

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

Five of the members in the group disagreed that the contribution met the criteria for usable, consistent and versatile.

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 may suggest a different mental model between GOV.UK main pages and services, users may become disorientated
• The GOV.UK header and Service header navigation components feel like they are presented as one

Guidance

• Provide suggestion of where to put things but let teams decide based on their contexts, this will include ‘switcher’ components
• Remove header guidance where we have lost historical context
• Consider suggesting when to use Navigation in relation to similar components existing in the system

Design

• Consider colour contrast and font weight of Navigation elements
• Provide conditional styling for different active states of Navigation
• Consider reviewing where the Service name is positioned

Work to resolve these concerns is being documented in Plan and determine how to release Navigation
#3888

[CharlotteDowns]

🚀 We’ve released GOV.‌UK Frontend v5.6.0 (feature release)

This release introduces a new Service navigation component. We’ve also published a new pattern to Help users to navigate a service.

We recommend service teams start using this new component and pattern to show navigation links in their service, and start updating existing services.

This work was made possible thanks to valuable input from our navigation cross-government steering group, which includes colleagues from:

• The Charity Commission
• Department for Education
• DWP (Department for Work & Pensions) Digital
• Government Digital Service, GOV.‌UK
• Scottish Government

As always, thank you to everyone who contributes to the GOV.UK Design System. 👏👏👏

📖 Read the full release notes to see what’s changed.
⏭ Find out how to update to the latest version

[Marat-Faizov]

Maybe placing navigation below the service name help people to identify it easier? People generally scan the page top to bottom.
People who rely on screen magnification might not be aware there is more content on the right of the service name

[LydiaValtindOC]

Generally really like the consistency, as I've seen lots of services try this out in different ways (e.g. Business Tax Account, Personal Tax Account).

I saw the sign out button within the navigation pattern on the GOV.UK monthly meetup today - would like to see more guidance on this within the design system pattern, as many services will require a user to be signed in. Is there a reason sign out wouldn't be a link? e.g. https://design.tax.service.gov.uk/hmrc-design-patterns/sign-out/

It's a big change to all existing services to update their header, would expect this to be a trickle of updates over time.