UX Patterns Guide
UI + UX Navigation And Wayfinding established

Global navigation

Provide persistent, scoped top-level navigation that names the product or service, shows the current section, separates utility actions, and adapts overflow without hiding the user's place.

Open in lab Compare alternatives
Decision first

Choose this pattern when the problem matches

Use when

  • Users revisit several top-level product or service areas.
  • The service is non-linear or supports multiple recurring tasks.
  • Deep-linked users still need persistent service identity and major destinations.

Avoid when

  • The flow has a single ordered transaction where navigation would distract or cause abandonment.
  • The information architecture has only one or two obvious pages.
  • The destination set is local to one area and belongs in side navigation, tabs, or page links.
  • Navigation would expose private, unauthorized, or unavailable areas without permission handling.

Problem it prevents

Users need a stable way to understand where they are and move between the most important product, site, or service sections without losing orientation.

Pattern anatomy

What a strong implementation has to make clear

User need

A product, service, or site has multiple top-level areas that users revisit.

Pattern promise

Provide persistent, scoped top-level navigation that names the product or service, shows the current section, separates utility actions, and adapts overflow without hiding the user's place.

Required state

Default state with product or service identity and top-level links.

Recovery path

Current section not synchronized with content.

Access contract

Use a labeled navigation landmark for primary navigation.

Quality bar

The difference between expert and weak execution

Strong implementation

Specific, visible, recoverable

  • A header shows the product name, Dashboard, Projects, Reports, Billing, a More overflow, and separate Help and account controls.
  • The active destination has text and semantic current state, while utility controls sit apart from destination links.
  • Users switch from Projects to Reports, return to Projects, and find their project draft count preserved.
  • If switching away would discard a task, the route warns or saves state before changing sections.
Weak implementation

Vague, hidden, hard to recover from

  • A crowded row mixes every page, account action, language selector, and sign-out link.
  • The active link says Reports while the page heading is Billing.
  • Switching top-level sections clears filters or drafts without notice.
  • Navigation opens external or utility destinations as if they were service sections.
UI guidance
  • Render product or service identity, a compact set of top-level destination links, current-section state, separate utility controls, and responsive overflow behavior.
  • Keep global navigation visually persistent and higher in hierarchy than breadcrumbs, local side navigation, tabs, and page-specific actions.
UX guidance
  • Help users move between major product or service areas while preserving orientation, local state, and confidence that they are in the right service.
  • Use global navigation only for non-linear, repeated top-level movement; simplify the journey or use task progress patterns when users should complete an ordered flow.
Implementation contract

What the implementation must handle

States

  • Default state with product or service identity and top-level links.
  • Current section state that matches the page or route.
  • Overflow or narrow viewport state where hidden links remain reachable.
  • Utility state for account, help, search, language, or switcher controls separated from main links.

Interaction

  • Activating a global navigation item changes to the named top-level section and updates current-state semantics.
  • The visible navigation state always agrees with the main content heading or route.
  • Overflow controls reveal hidden top-level destinations without covering the current page irrecoverably.
  • Utility actions do not appear as peer destinations unless they are true top-level sections.

Accessibility

  • Use a labeled navigation landmark for primary navigation.
  • Expose the current page or section programmatically, not only with color.
  • Ensure overflow menus, drawers, or panels have clear expanded state and keyboard dismissal.
  • Keep skip links before repeated navigation so users can bypass global links.

Review

  • Can users identify the product or service and the current top-level section from any page?
  • Are these links the most important destinations, or are they a complete site map?
  • Are utilities and account actions visually and semantically separated from navigation destinations?
  • What happens to the user's local state when they switch sections and come back?
Interactive lab

Inspect the states before you copy the pattern

Switch product sections

Move between top-level sections, open overflow, and check whether current state and local drafts are preserved.

Global navigation
Interactive demo is ready

Launch the live UI/UX lab when you want to inspect states, keyboard behavior, and common failure modes.

State To Inspect

Default state with product or service identity and top-level links.

Keyboard / Access

Tab reaches the navigation landmark, each visible link, overflow trigger, utility controls, and then page content in a predictable order.

Avoid Generating

Listing every page or admin object in the global nav.
Evidence trail

Source-backed claims behind this guidance

Help users to Navigate a service

GOV.UK Design System - checked

GOV.UK Navigate a service guidance defines when services need navigation links, service identity, top-level links, utility separation, and ordering from global to page-specific elements.

Carbon Global Header pattern

IBM Carbon Design System - checked

Carbon global header guidance documents persistent global navigation, system versus product link placement, responsive movement to panels, and state preservation.

USWDS Header component

U.S. Web Design System - checked

USWDS header guidance supports primary navigation in a site header with simple, megamenu, and extended variants.

Full agent/debug reference

Problem Context

  • A product, service, or site has multiple top-level areas that users revisit.
  • Users may enter deep links and still need to recognize the service and move to another major area.
  • The navigation has to share space with account, search, switcher, language, or other utility controls.

Selection Rules

  • Choose global navigation when users need repeated access to a small set of top-level product or service sections.
  • Keep the link set limited to the most useful top-level destinations; global navigation is not a site map.
  • Show a clear current section that remains synchronized with page content and route changes.
  • Separate product or service navigation from account, help, search, language, switcher, sign-out, and other utility controls.
  • Use responsive overflow, drawer, side panel, or bottom navigation behavior only when the same top-level destinations remain discoverable and current state remains clear.
  • Avoid global navigation in a strictly linear transaction where task list, step navigation, or page-level links better preserve the journey.

Required States

  • Default state with product or service identity and top-level links.
  • Current section state that matches the page or route.
  • Overflow or narrow viewport state where hidden links remain reachable.
  • Utility state for account, help, search, language, or switcher controls separated from main links.
  • External-link state with warning or grouping when navigation leaves the service.
  • State-preserved return after switching away and back to a section.

Interaction Contract

  • Activating a global navigation item changes to the named top-level section and updates current-state semantics.
  • The visible navigation state always agrees with the main content heading or route.
  • Overflow controls reveal hidden top-level destinations without covering the current page irrecoverably.
  • Utility actions do not appear as peer destinations unless they are true top-level sections.
  • When switching sections would lose unsaved progress, the UI preserves state, restores state, or warns before leaving.
  • Keyboard and screen-reader users can identify the navigation landmark, current section, and overflow state.

Implementation Checklist

  • Define the small set of top-level destinations from user tasks, not the organization chart.
  • Render global navigation in a labeled navigation landmark with product or service identity nearby.
  • Mark the current section using route-driven state and appropriate current-page or current-section semantics.
  • Group utility controls separately from primary destinations.
  • Design responsive overflow so links move predictably to a menu, drawer, rail, or panel rather than disappearing.
  • Preserve or warn about section-specific draft, filter, and scroll state when users pivot across areas.
  • Keep breadcrumbs, side navigation, and page-specific links visually subordinate to global navigation.

Common Generated-UI Mistakes

  • Listing every page or admin object in the global nav.
  • Mixing account settings, sign out, help, and language controls into the same row as product destinations.
  • Highlighting a nav item that does not match the displayed content.
  • Using a hamburger menu on desktop to hide primary destinations without a strong space or complexity reason.
  • Replacing breadcrumbs or local side navigation with global links.
  • Losing form drafts, filters, or scroll context when users switch sections and return.

Critique Questions

  • Can users identify the product or service and the current top-level section from any page?
  • Are these links the most important destinations, or are they a complete site map?
  • Are utilities and account actions visually and semantically separated from navigation destinations?
  • What happens to the user's local state when they switch sections and come back?
Accessibility
  • Use a labeled navigation landmark for primary navigation.
  • Expose the current page or section programmatically, not only with color.
  • Ensure overflow menus, drawers, or panels have clear expanded state and keyboard dismissal.
  • Keep skip links before repeated navigation so users can bypass global links.
  • Do not use hover-only dropdowns for essential destinations.
Keyboard Behavior
  • Tab reaches the navigation landmark, each visible link, overflow trigger, utility controls, and then page content in a predictable order.
  • Enter or Space activates buttons such as overflow triggers; Enter activates links.
  • Escape closes an open overflow menu or drawer and returns focus to its trigger.
  • Focus remains visible and current-state styling is not the only way to identify location.
  • After navigation, focus should land at the new page or main heading according to app routing conventions.
Variants
  • Header global navigation
  • Service navigation
  • Responsive global navigation
  • Global header with left panel
  • Global navigation with utility area
  • Global navigation with product switcher

Verification

Last verified: