Service navigation

Problem Context

• A service is used repeatedly or supports several tasks that do not follow one fixed order.
• Users can enter the service from email, search, or saved links and need reassurance that they are in the right service.
• The page also has general header controls, account or login tools, local side navigation, breadcrumbs, or page-specific actions that must not be confused with service-level navigation.

Selection Rules

• Choose service navigation when one named service needs persistent identity and a small set of service-level destinations across multiple pages.
• Show the service name in the service navigation and link it to the service home, GOV.UK start page, or first question when no service home exists.
• Keep navigation links to the most important top-level service sections that help users understand what the service contains and where they can go next.
• Place GOV.UK-wide or platform-wide tools in the general header, then service-wide tools in service navigation, then page-specific elements near the main content.
• Group external links after in-service links, warn when they open a new window when possible, or put them in the page body instead.
• Avoid service navigation for a single end-to-end transaction with a clear task order; use a task list, step navigation, or page-level links instead.
• Use side navigation or in-page anchors when users need hierarchy within one service area rather than top-level movement around the whole service.

Required States

• Default state with general header, visible service name, service-home link, and service navigation links.
• Current page or current section state that matches the main heading and route.
• Active group state for a service area when a child page belongs under that service link.
• Mobile collapsed state with a Menu button connected to the service link list.
• Service-level tool state for language, search-within-service, account, or contact controls placed after the service name.
• External-link state where links leaving the service are grouped, warned, or moved into page content.

Interaction Contract

• Activating a service navigation link changes to the named service section and updates current or active service state.
• The service name link returns to the service home, GOV.UK start page, or first service question according to the service's information architecture.
• General site or platform controls do not change the highlighted service section unless they navigate to an actual service section.
• The mobile Menu button exposes the same service links, announces expanded state, and can be dismissed without losing page state.
• Service-level tools such as language selection or service search remain scoped to the service and do not appear as peer sections unless they are true destinations.
• Switching service sections preserves drafts, filters, and case context where possible or warns before losing progress.

Implementation Checklist

• Define the service name and canonical service-home destination before adding navigation links.
• Choose service links from repeated user tasks and top-level service sections, not from the full route table or organization chart.
• Render the general header first, service navigation second, service-level messages or phase banners next, and page-specific navigation near the main content.
• Mark current and active service states from route data and verify that they match the page heading.
• Separate GOV.UK-wide, product-wide, account-wide, and service-wide tools by scope and position.
• Design mobile collapse so the Menu control exposes the same service links and returns focus predictably.
• Review external links and decide whether they belong grouped after service links or inside page content.

Common Generated-UI Mistakes

• Using service navigation as a site map for every page in the service.
• Putting GOV.UK topic menus, whole-product destinations, sign-out, and local page anchors into one service link row.
• Showing a current service link that does not match the content heading.
• Hiding the service name on deep-linked pages.
• Adding service navigation to a short linear transaction where users should complete steps in order.
• Letting mobile service navigation expose fewer links or different labels than desktop.

Critique Questions

• Can a deep-linked user identify the service name before reading the page heading?
• Are these links the most important top-level service areas, or a complete list of routes?
• Which controls are GOV.UK-wide, service-wide, local to one section, or page-specific?
• Would a task list or step indicator better support this journey because the tasks have a clear order?
• What happens to a draft, selected case, or filter when the user switches service sections?