Navigation (primary)

Overview

The Primary navigation is a container of menus and utilities, it allows visitors to orient themselves and move through a website. It is persistent on every page to ensure a consistent user experience across websites.

Sample element

Demos

View a live version of this component to see how it can be customized.

View this component in action

---

Anatomy

The primary navigation is divided into three zones where content can be placed. Each zone may include custom content and elements in certain zones will collapse or become hidden completely as breakpoints get smaller. It is required to use all three zones.

• Zone 1 - Website logo
• Zone 2 - Menus
• Zone 3 - Utilities

Helpful tip

The website logo in Zone 1 should direct visitors to a home page when selected.

-### Website logo A branded logo corresponding to the website in which the primary navigation is used. It will direct a visitor to the website home page when selected. -### Menus Text that triggers an expandable tray when selected. The content within is specific to one website and does not appear in the same format on other websites. -### Utilities Actions or tools that display content within an expandable tray when triggered or function as links. They can be unique to one website or global across many websites.