Global navigation

Under ReviewUpdated May 12, 2026

Description

The Global navigation pattern consists of a container and the Sage logo.
It's permanently located at the top of the screen and is a distinctive feature of all Sage Cloud products.
The Global navigation pattern can include notifications, functions, and menus.
It must always be used in dark mode.

Figma library

Anatomy

Global navigation

Layout

Desktop layout

Small screen layout

Dos and don'ts

Warning

Products without a notification centre should plan to implement one. In the meantime, they may continue using their current notification approach

Technical example

Global header component implemented in Carbon.

How it works

The global header is a powerful navigation component. Make sure it is easy to use with a keyboard and that each part of the component is clearly labelled.

Accessibility requirements

Label

If a global header includes a menu, use a descriptive label for the parent menu item that clearly explains what the menu contains.

Use manual activation for a menu on the global header. The list of menu items is displayed only when a user selects the parent menu item using Space or Enter on the keyboard, or a mouse click. It is not activated on hover.

Focus

When a user activates a menu on the global header using Enter or Space, focus moves directly to the first menu item in the menu. The user can use Enter or Space to select the menu item and close the menu.

ARIA

Warning

Use ARIA with caution.

Use the nav role so assistive technologies announce the global header as a navigation component.

Keyboard commands

Key	Function
Tab	Moves to the next top level element.
Space	Opens the highlighted element.
Enter	Opens the highlighted element.
Esc	Close the highlighted element.

Key	Function
Up	Changes the selected menu item to the item above the currently selected item.If no menu item is currently selected, selects the top menu item.If the top menu item is currently selected, does nothing.
Down	Changes the selected menu item to the item below the currently selected item.If no menu item is currently selected, selects the top menu item.If the bottom menu item is currently selected, does nothing.
Space	Closes the menu.
Enter	Closes the menu.
End (Windows) or Command and Down arrow (Mac)	Selects the last menu item.
Home (Windows) or Command and Up arrow (Mac)	Selects the first menu item.
Escape	Closes the menu and moves focus to the global header.
Tab	Closes the menu. Moves focus to the next focusable element on the global header.

Testing

We tested the component using the following software.

Computer

Operating System	Version
MacOS Ventura	13.2
---	---
Safari	16.1
Chrome	105.0.5195.102

Assistive technology

Type	Name
Screen reader	VoiceOver (Mac)
Screen reader	NVDA (Windows)
Speech recognition	Voice Control (Mac)

Resources

Date	Changes
September 2025	Added guidance for using badges to indicate important notifications to Dos and dont's.
28 February 2025	Update Dos and dont's with guidance on notifications.
September 2024	New version created. Previous version archived in the frozen Product design system.