Red Hat design system

Usage

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.

Subnavigation vs. other navigations

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.

Image of the primary navigation, secondary navigation, and subnavigation being compared

Number of links

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

Image of a subnavigation with five short link text labels

Inset

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

Writing content

Link text labels

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.

Image of two subnavigations; one with short text labels and one with long text labels

Character count

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.

Element	Character count	Word count
Link	20	2 to 3

Layout

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

Image of subnavigations positioned below the primary navigation and a heading

Behavior

Current page indicator

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

Scrolling

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.

With heading

Image of a subnavigation and how it behaves when scrolling under a heading

Overflow

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.

Navigating overflow 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.

Image of selecting a cut off link and the list of links shifting to reveal the selected link in full view

Responsive design

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.