Skip to main content Red Hat Design System logo Contribute on Github

Subnavigation

Overview Style Guidelines Code Demos Accessibility

Usage

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

When to use a subnavigation

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.

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

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.

Image of three desktop and one mobile subnavigations with various inset values

Writing content

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.

Image of a desktip and mobile subnavigation showing with the current page indicator visible

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 primary navigation

Image of a subnavigation and how it behaves when scrolling under the primary navigation

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.

Image of a desktop subnavigation with no overflow buttons and two mobile subnavigations with overflow buttons visible

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.

Large breakpoints

Image of subnavigations on large breakpoints

Small breakpoints

Image of subnavigations on small breakpoints

Best practices

Incorrect ordering

Do not position the subnavigation above the primary navigation.

Image of a subnavigation above the primary navigation, which is incorrect usage

There should be at least two links minimum.

Image of a subnavigation with only one link, which is incorrect usage

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

Image of a subnavigation with seven links and overflow buttons, which is incorrect usage

Extra spacing

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

Image of a subnavigation with stretched links, which is incorrect usage

Overflow buttons

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

Image of a subnavigation with only two links and overflow buttons, which is incorrect usage
© 2021-2024 Red Hat, Inc. Deploys by Netlify