Navigation (primary)

Use the primary navigation to organize high-level content and important user actions.

Here is guidance on when to use the primary vs. secondary navigation.

Menus need to quickly describe to users what content they can expect to see when expanded. Try to write short and concise menu text labels.

Users can expand and collapse any menu whenever they want. Every menu is collapsed by default and users are only able to expand one menu at a time.

Content in primary menus is organized using a 4-column grid within a fixed width container.

When using a card or tile, it should be arranged last.

Grid column width does not change if there are less than 4 columns of content.

Content in utility menus can have a flexible size and layout, but should not occupy more than 3 grid columns.

The primary navigation is always sticky on scroll on every page it is used on.

Expanded menus are indicated by a Hybrid style gradient border. When users hover over another menu, there are subtle visual changes (see Interaction states). When another menu is selected, the caret icon rotates, and the previously expanded menu collapses. Only 1 menu can be expanded at a time.

Menus can be collapsed by doing the following.

• Selecting the same primary or utility menu again
• Selecting anywhere inside of the overlay
• Pressing the Escape key

Some elements collapse or disappear as the primary navigation gets smaller.

When users land on or refresh a page and then press the Tab key, the Skip link will appear on top of the primary navigation.

Limit the amount of primary menus to 5 or 6 max and the number of utility menus to 3 max.

Do not overload the primary navigation with additional primary and utility menus.