Subnavigation

Use a subnavigation when you want to provide users with granular navigation using only links.

A subnavigation allows users to navigate between four or five related pages maximum. It is different than tabs because tabs allow users to switch between views on the same page whereas subnavigation links send users to other pages. A user might use the primary navigation or secondary navigation to access a high-level page and then use a subnavigation to browse through lower-level pages.

A subnavigation is a flat hierarchy whereas other navigations have deeper hierarchies with levels. Therefore, a subnavigation cannot include menus, only links. If your content requires a structure with more levels, use another navigation.

To reduce cognitive load and a cluttered user interface, avoid using more than four or five links.

An inset is used to ensure consistent alignment and padding between headings, text labels, and overflow buttons.

Link text labels should be concise, scannable, and descriptive. They should not exceed more than two or three short words. If they do, work with a content strategist to shorten them.

A subnavigation should have four or five links maximum. Text labels should be short but descriptive. The recommended maximum character count for the elements of a subnavigation are listed below and include spaces.

A subnavigation can be placed below the primary navigation or a heading.

When a user is viewing a page, a red bottom border is visible. It will move as a user moves from page to page.

A subnavigation is positioned below the primary navigation or a heading when the page loads. Similar to other navigations, when a user scrolls down, the primary navigation or heading disappears and the subnavigation becomes fixed to the top of the browser window. When a user scrolls back up, the subnavigation is positioned under the primary navigation or heading again.

If the number of links exceeds the container width or breakpoint, overflow buttons with chevron icons are added to each side so users can horizontally scroll to reveal hidden links.

When the first link is active, the left overflow button is disabled. When the last link is active, the right overflow button is disabled. When a link that is cut off is selected, the list of links shifts so the selected link is in full view.

Overflow buttons will appear within a subnavigation as soon as the width of links exceeds the width of the breakpoint. It is possible for overflow buttons to be hidden on small breakpoints if there are two links with very short text labels.

Do not position the subnavigation above the primary navigation.

There should be at least two links minimum.

Be careful about displaying too many links, some of them will become hidden even at large breakpoints.

Do not add extra spacing or stretch the width of links.

Overflow buttons should not be visible if all links are visible.