Navigation (primary) Planned

OverviewStyleGuidelines

Style

Elements in the primary navigation are high in contrast so they stand out to visitors and meet accessibility guidelines. The primary navigation looks similar in style to the Footer for a consistent user experience across websites.

Primary navigation - style

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.

Primary navigation - anatomy

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.

Text that triggers an expandable tray when selected. The content within is specific to one website and does not appear d 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.

Expandable tray

When menu text in Zone 2 is selected, an expandable tray will appear. It is divided into three parts and is styled the same across all primary navigation instances.

  1. Tab - visually informs a visitor of what menu they selected
  2. Tray - the area to place content, links, etc.
  3. Overlay - separates tray content from website content underneath
Primary navigation - expandable tray

Expandable tray tab

When the expandable tray tab appears, text and icon colors are reversed. A tab with a white background and red bar will also appear behind content.

Helpful tip

Menu text displays a gray arrow on hover to indicate that an expandable tray will appear when triggered.

Primary navigation - expandable tray tab

Layout

The primary navigation spans the entire width of the browser window on all breakpoints.

Primary navigation - layout (desktop) Primary navigation - layout (mobile)

Left-to-right languages

When content is translated to other left-to-right languages, the primary navigation maintains the same layout and text size.

Primary navigation - left-to-right languages

Right-to-left languages

When content is translated to a right-to-left language like Hebrew, the text size increases so visual subtleties of unique characters are easier to notice.

Primary navigation - right-to-left languages

Responsive design

Large breakpoints

Both menus and utilities are visible in the primary navigation on large breakpoints.

Primary navigation - large breakpoints

Medium breakpoints

As breakpoints become smaller, menus will collapse into a utility and accordion. This includes full-width and fixed-width expandable trays. On tablet breakpoints, a menu utility replaces the horizontal list of menus and maintains the same position for a smoother transition from large to small breakpoints.

Primary navigation - medium breakpoints

Small breakpoints

On small breakpoints, the menus and most of the utilities collapse into a menu and accordion.

Primary navigation - small breakpoints

Best practices

Content overload

Do not overload the primary navigation with too many menus and utilities.

Primary navigation - best practice 1

Using icons alone

Do not rely on icons alone to accurately represent content or actions, ambiguity will not help visitors find what they need.

Primary navigation - best practice 2

Change spacing

Do not change the spacing between menus and utilities.

Primary navigation - best practice 3

Hiding menus and utilities

Do not hide menus and utilities on large breakpoints.

Primary navigation - best practice 4

Mixing expandable trays

Do not mix the full-width and fixed-width expandable trays within the same menu group.

Primary navigation - best practice 5

Spacing

The primary navigation uses spacers to define space values between elements.

Extra large breakpoints

Primary navigation - Spacing for extra large breakpoints

Large breakpoints

Primary navigation - Spacing for large breakpoints

Medium breakpoints

Primary navigation - Spacing for medium breakpoints

Small breakpoints

Primary navigation - Spacing for small breakpoints

Fixed-width expandable tray

Primary navigation - Spacing for the fixed-width expandable tray

Other libraries

To learn more about our other libraries, visit the getting started page.