| 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. | Use side navigation to help users move within a complex section without losing the current page's position in that section. |
| 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. | A sidebar mixes Dashboard, Reports, Sign out, Help, Team, API, Billing, and Marketing with no section grouping. |
| 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. | Switching top-level sections clears filters or drafts without notice. | 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 product only has a few pages and does not need a hierarchy. |
| 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. |