Navigation (secondary)

Guidelines

Usage

The Secondary navigation is used to connect a series of pages together. It should be used as a supporting navigation component and not on its own.

Product name text stacking

If the secondary navigation is used to connect product-like pages, Zone 1 should display the product name in the form of linked text. If this text is short enough and there are fewer menus and links, it can remain on one line.

In some rare cases, if product name text is extremely long, it will naturally break to three lines on small breakpoints.

This extremely small breakpoint example is 320px.

Navigation slots

Use Zone 2 to place navigation elements like menus and links. Typically, they are positioned on the left side next to Zone 1. The specific order of menus and links is up to content strategists.

Writing navigation content

Navigation elements provide options for visitors to browse through relevant content. Be aware of the following when writing content for Zone 2:

• At least one menu or link should be included
• A maximum of five menus and links can be included if the text is short
• It is best to write all text as short as possible
• If product name text or a call to action is included, they can sometimes have lots of characters
• If a call to action is included, it will not stack to make room for more text
• Text will more than likely expand when translated to other languages

*If there are fewer menus and links in Zone 2, more characters can be written; if there are more menus and links, fewer characters can be written

Expandable tray

Use the expandable tray to organize content in two, three, or four columns. Positioning a call to action under a column of text will ensure that both elements will remain in the same arrangement when stacked on small breakpoints.

If content is organized in fewer than four columns, the containers will stretch to fill the empty space.

Writing expandable tray content

The expandable tray allows visitors to see a larger amount of relevant content. Elements that may be used include text, links, calls to action, and horizontal rules. Be aware of the following when writing content for the expandable tray:

• It is best to write all text as short as possible
• Do not stack lots of links in the same column
• Do not use too many different call to action variants
• Text will more than likely expand when translated to other languages
• All text will stack on small breakpoints, so content positioned towards the left will be on top

Best practices

Incorrect ordering

Do not position the secondary navigation above the primary navigation.

Theme mismatch

Do not use the dark theme secondary navigation in environments with light elements and vice versa.

Content overload

Do not place too many navigation elements in Zone 2.

Adding or removing zones

Do not add more zones than provided.

Product name text on three lines

Do not allow product name text to break to three lines on large breakpoints.