Use service navigation for one named service and its top-level service tasks, global navigation for whole-product or whole-site destinations, and side navigation for a local hierarchy inside one section.
Use service navigation for one named service and its top-level service tasks, global navigation for whole-product or whole-site destinations, and side navigation for a local hierarchy inside one section.
Practice the judgment: Imagine this situation: Service navigation duplicates global navigation and makes the service boundary ambiguous. Write the person's goal, choose one of these patterns, and show the state that helps the person continue. Use the decision rules and source trail below to explain your choice.
Review the underlying principle →| Dimension | Service navigation | Global navigation | Side navigation |
|---|---|---|---|
| UI or UX | UI + UX - Service-scoped identity and navigation strip | UI + UX - Persistent top-level navigation shell | UI + UX - Persistent local hierarchy at the side of content |
| UI guidance | Render the service name, service-home link, a compact set of service-level links, current or active service state, and any service-level tools in a navigation strip below the general site or platform header. | Render product or service identity, a compact set of top-level destination links, current-section state, separate utility controls, and responsive overflow behavior. | Render a vertical navigation region beside the main content that exposes the current area's parent, child, and optional grandchild pages with a clear active indicator. |
| UX guidance | Use service navigation to reassure users that they are inside the right service and to let repeated or multi-task users move among the most important service areas. | Help users move between major product or service areas while preserving orientation, local state, and confidence that they are in the right service. | Help the person reach a clear task outcome. |
| Good UI | A benefits service shows the GOV.UK header above a light service strip with 'Apply for support', Overview, Applications, Messages, and a Welsh language link. | A header shows the product name, Dashboard, Projects, Reports, Billing, a More overflow, and separate Help and account controls. | A settings page shows Account, Billing, Team, and Security in a left rail with Security expanded and Audit log marked as current. |
| Bad UI | The service strip mixes GOV.UK topics, start-page links, sign out, Help, local page anchors, and admin tools as equal destinations. | A crowded row mixes every page, account action, language selector, and sign-out link. | The side navigation highlights Settings while the page heading is Audit log. |
| Good UX | A caseworker switches from Applications to Messages and returns to Applications with draft progress and filters preserved. | Users switch from Projects to Reports, return to Projects, and find their project draft count preserved. | Users open Billing, switch to Invoices, then return to Security and see the Security group still expanded. |
| Bad UX | A linear eligibility check exposes service navigation that invites users to leave before completing the required questions. | Navigation opens external or utility destinations as if they were service sections. | Users must reopen a drawer every time they move between sibling pages in the same desktop section. |
| Best fit | A named service is used repeatedly by some users. | Users revisit several top-level product or service areas. | A product area has several related pages arranged in a visible hierarchy. |
| Avoid when | The journey is a simple end-to-end transaction with a clear sequence. | The flow has a single ordered transaction where navigation would distract or cause abandonment. | The destinations are top-level product areas that belong in global navigation. |
| Required state | Default state with general header, visible service name, service-home link, and service navigation links. | Default state with product or service identity and top-level links. | Default state with the local section hierarchy visible beside content. |
| Accessibility burden | Use a correctly labelled service information region or navigation landmark that reflects the service name and link list. | Use a labeled navigation landmark for primary navigation. | Use a labeled navigation landmark that distinguishes local side navigation from primary navigation. |
| Common misuse | Using service navigation as a site map for every page in the service. | Listing every page or admin object in the global nav. | Duplicating global navigation links in the side navigation. |