What the person is doing
A product, service, or site has multiple top-level areas that users revisit.
Foundation · lesson 1 of 21 · Navigation And Wayfinding
Global navigation
Underlying principle: Navigation exposes the site's structure at the moment a person needs to move. A useful route has a recognizable label, a predictable destination, and an orientation cue after arrival.
Help users move between major product or service areas while preserving orientation, local state, and confidence that they are in the right service.
Study the interaction
Follow the task before choosing the component
Navigation exposes the site's structure at the moment a person needs to move. A useful route has a recognizable label, a predictable destination, and an orientation cue after arrival.
What the interface must communicate
Help users move between major product or service areas while preserving orientation, local state, and confidence that they are in the right service.
Default state with product or service identity and top-level links.
What to look for
Can users identify the product or service and the current top-level section from any page?
Activating a global navigation item changes to the named top-level section and updates current-state semantics.
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.
Problem it prevents
A product, service, or site has multiple top-level areas that users revisit.
Test the behavior
Open the interactive example when you need it
The full lab is intentionally loaded on request. That keeps this reading page fast while preserving the strong and weak states, keyboard checks, and failure scenarios.
In the lab you can
Launch Global navigation in the lab - switch between strong UI, weak UI, strong UX, and weak UX;
- trigger required, empty, loading, error, and recovery states;
- inspect keyboard and accessibility expectations beside the demo.
Pattern anatomy
What a strong implementation has to make clear
A product, service, or site has multiple top-level areas that users revisit.
Help users move between major product or service areas while preserving orientation, local state, and confidence that they are in the right service.
Default state with product or service identity and top-level links.
Too many links competing for top-level attention.
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.
- On narrow screens, hidden product links move into a labeled More menu rather than disappearing.
- Users switch from Projects to Reports, return to Projects, and find their project draft count preserved.
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.
- Navigation opens external or utility destinations as if they were service sections.
- A linear application journey includes global links that invite users to abandon required steps.
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.
- 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.
Accessibility
- Use a labeled navigation landmark for primary navigation.
- 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.
- Tab reaches the navigation landmark, each visible link, overflow trigger, utility controls, and then page content in a predictable order.
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?
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
Source trail checked: