Utility navigation

Problem Context

• A product or service has recurring support, account, session, search, language, notification, or switcher controls needed from many pages.
• Primary navigation already represents destinations such as Dashboard, Projects, Reports, or service sections.
• Some utilities open transient panels while others navigate to account or support areas, so scope and state must be explicit.

Selection Rules

• Choose utility navigation for controls whose primary job is session management, account access, support, search entry, notifications, language, product switching, or global tools.
• Keep utility controls out of primary or service navigation unless the label and placement make their different scope obvious.
• Right-align, group, or layer utilities separately from destination links, and give the group a distinct navigation or toolbar label.
• Use badges only for meaningful utility state such as unread notifications, pending approvals, or account attention, and update the badge after inspection.
• Open utility panels from buttons with expanded state when the user needs a quick view; use normal links only when the utility truly goes to a full utility page.
• Preserve the active primary or service destination while utilities open, close, or update.
• For destructive session utilities such as sign out, explain the boundary and confirm or provide a clear final session state.
• On small screens, collapse utilities into a labelled utility overflow or account menu without merging them into service destinations or page anchors.

Required States

• Default state with destination navigation and a separated utility group.
• Utility panel open state for notifications, account, help, search, or switcher controls.
• Badge state before and after inspecting notifications or pending account items.
• Signed-in and signed-out or sign-out-confirmed states.
• Keyboard dismissal state where Escape closes an open utility panel and returns focus to the trigger.
• Mobile utility overflow state that preserves utility labels and grouping.
• Current destination preserved state while a utility is open.

Interaction Contract

• Activating a utility button opens the corresponding panel, menu, tray, or inline search surface without changing the current primary destination.
• Only one transient utility panel is open at a time unless the shell explicitly supports pinned utilities.
• The utility trigger exposes expanded state while its panel is open and returns focus on Escape or close.
• Notification, message, and attention badges update when the utility has been inspected or resolved.
• Sign out, account switching, and permission-changing utilities clearly communicate scope and prevent accidental loss of unsaved work.
• Utility links that navigate to full pages do not masquerade as current product or service sections.
• Mobile utility overflow exposes the same utility set or an intentionally reduced, documented signed-out utility set.

Implementation Checklist

• Inventory every header item and classify it as primary destination, service destination, current-view action, local page link, or utility before placing it.
• Give the utility group an accessible label such as Utilities, Account tools, or GOV.UK-wide tools.
• Choose button semantics for utilities that open panels and link semantics for utilities that navigate.
• Implement expanded state, Escape dismissal, outside-click close, and focus return for utility panels.
• Keep badges synchronized with underlying notification or account state.
• Handle sign-out, account switching, and language changes with explicit state preservation, warning, or final confirmation.
• Test desktop and mobile layouts to make sure utilities remain distinct from global, service, and page-level navigation.

Common Generated-UI Mistakes

• Treating help, search, profile, notifications, and sign out as primary navigation destinations.
• Using unlabeled utility icons whose purpose is not obvious.
• Leaving utility panels open across route changes or focus changes with no dismissal path.
• Showing stale unread counts after users inspect notifications.
• Hiding sign out so deeply that users cannot end the session confidently.
• Letting mobile menus merge account utilities, service navigation, breadcrumbs, and page anchors into one undifferentiated list.
• Using utility navigation for rare destructive commands that belong in a settings or confirmation flow.

Critique Questions

• Which header items are destinations, and which are utilities?
• Can users tell whether activating this control will change section, open a panel, search, or affect the session?
• Does opening a utility preserve the current page, form draft, filter, and selected section?
• How do badges, account state, or signed-out state change after the utility is used?
• On mobile, are utilities still grouped and labelled separately from service or primary links?