Skip to main content Home
About About the Design SystemRoadmap
Get started OverviewDesignersDevelopers
Foundations OverviewColorGridIconographyInteractionsSpacingTypography
Tokens Overview Global colorbox shadowTypographyborderopacityspacelengthIconBreakpointsMedia Queries
Elements All elements Accordion Alert Announcement Audio player Avatar Back to top Badge Blockquote Breadcrumb Button Card Chip Code block Call to action Dialog Disclosure Footer Health index Icon Jump links Navigation (primary) Navigation (secondary) Pagination PopoverPlanned Progress stepper Scheme toggle Site status Skeleton Skip link Spinner Statistic Subnavigation Surface Switch Table Tabs Tag Tile Timestamp Tooltip Video embed
Theming OverviewColor PalettesCustomizingDevelopers
Patterns All PatternsCardFilterFormLink with iconLogo wallSearch barSticky bannerSticky cardTabsTagTile
Personalization All Personalization PatternsAnnouncement
Accessibility FundamentalsAccessibility toolsAssistive technologiesCI/CDContentContributorsDesignDevelopmentManual testingResourcesScreen readers
Design/code status Release notes Get support

Navigation (secondary)

OverviewStyleGuidelinesCodeAccessibilityDemos
UsageWriting contentExpandable menuBehaviorResponsive designBest practicesUsageWriting contentExpandable menuBehaviorResponsive designBest practices

Usage

Use a secondary navigation to propagate important or related content across a series of pages. Users can better orient themselves if they see content that is organized around a specific topic at the top of a page.

When to use a secondary navigation

A secondary navigation offers a way to propagate content that relates to a specific topic. For example, a secondary navigation can be used on a product page to organize content like use cases, variants, services, documentation, and more. This kind of content cannot live in the primary navigation because it is too specific to a product and it is also too much content in general to add to a single page. In this situation, a secondary navigation is helping content propagate across multiple pages instead of cluttering one page therefore negatively impacting the user experience.

Primary vs. secondary navigation

The primary navigation includes links to the most important pages across a domain. If content related to a specific topic needs to be organized somewhere, it should be added to a secondary navigation instead. This hierarchy can be demonstrated visually by the primary navigation being on top of a secondary navigation when a page loads.

Image of a primary navigation stacked on top of a secondary navigation

Writing content

logo slot text

If a secondary navigation is used on a product page, the logo slot should display the product name as linked text. When writing content, consider the following:

  • If product name text is long, it needs to break to two lines
  • A product name should not be so long that it breaks to three lines
  • If product name text is short and there are fewer links and menus, it can remain on one line
Image of four secondary navigations showing how stacked product name text offers more space

nav slot text

The nav slot includes inline links, menus, and sometimes external links. The order of elements is decided by content strategists. When writing content, consider the following:

  • A secondary navigation can become cluttered quickly if there are too many items
  • Try to be short and concise when writing
  • At least one menu or link should be included, but no more than five total
  • Text will expand when translated to some languages
Image of two secondary navigations comparing an acceptable amount of links and menus

cta slot text

The cta slot is optional, but it can include interactive elements like a call to action. When writing content, consider the following:

  • Try to be short and concise when writing
  • Including a call to action will reduce the amount of space for nav slot elements
  • A call to action does not stack to increase the amount of space
  • Text will expand when translated to some languages
Image of two secondary navigations comparing the character counts of a call to action

Maximum uses and character count

If there are fewer links and menus in the nav slot, text labels can be longer. If there are more links and menus, text labels need to be shorter to avoid cluttering.

Element Maximum character count
Product name text 1 55
Links and menus 5 (total) 25
Call to action 1 20

Expandable menu

Use the expandable menu to organize content in columns.

Warning

Do not use more than four columns, stack groups below other groups instead like in the examples below.

 Image of a secondary navigation with four columns of links

If content is organized in two columns, they will stretch to fill the empty space.

Image of a secondary navigation with two columns of links

Expandable menu content

The expandable menu includes content like text, links, calls to action, and more. When adding content to an expandable menu, follow these guidelines:

  • Try to be short and concise when writing
  • Do not stack lots of links in the same column
  • Use only one call to action variant
  • Put the most important content in the upper left corner because when content stacks, it will be on top
  • Be mindful of how text changes size when translated to some languages

Behavior

Current page indicator

When a user is viewing a page that is part of the secondary navigation information architecture, a red top border is visible. In the example below, a user is viewing both the Overview page and a page within the Product variants menu. External links do not display the red top border (except on hover) because they open links in a new tab or window instead.

Image of two secondary navigations with red bars on top of different menus

Scrolling with primary navigation

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

Image of primary and secondary navigations and their behaviors when scrolling

Only one menu can be expanded at a time and there is no animation when navigating from one menu to the next.

Helpful tip

The default state of the menu caret is pointing down. When a menu is expanded, the caret points up.

 Image of three secondary navigations with different menus selected

Scrolling with menu expanded

If the height of the menu is shorter than the viewport height, content should scroll underneath the backdrop.

Image of secondary navigation showing the scrolling behavior when the menu panel is shorter than the viewport height

If the height of the menu is taller than the viewport height, scroll is trapped within the panel until the menu is collapsed.

Image of secondary navigation showing the scrolling behavior when the menu panel is taller than the viewport height

Responsive design

As breakpoints get smaller, the nav slot will collapse into an accordion within a menu instead.

Image of secondary navigations; one has a menu collapsed and the other has a menu expanded, but both have the nav slot visible on large breakpoints Image of secondary navigations; the nav slot on small breakpoints is not visible unless the menu is expanded

Breakpoints

Breakpoint Range nav slot visibility Left and right padding
Desktop, large > 1680px Visible 64px
Desktop, medium 1440px - 1679px Visible 64px
Desktop, small 1200px - 1439px Visible 32px
Tablet, large 992px - 1199px Hidden, one menu only 32px
Tablet, small 768px - 991px Hidden, one menu only 32px
Mobile, large 576px - 767px Hidden, one menu only 16px
Mobile, small < 575px Hidden, one menu only 16px

Best practices

Primary navigation above a secondary navigation

The secondary navigation always appears below primary navigation when both are used.

 Secondary navigation above primary navigation

Do not position the secondary navigation above the primary navigation.

Scheme matching

Light scheme secondary navigation used on a snippet of a light scheme page

Use a light scheme secondary navigation in a light scheme environment and vice versa.

 Light scheme secondary navigation used on a snippet of a dark scheme page

Do not use a light scheme secondary navigation in a dark environment and vice versa.

Number of slots

Secondary navigation with three slots

Three is the maximum number of slots for large screen sizes.

 Secondary navigation with four slots

Do not display more slots than the three provided for large screen sizes.

Number of navigation items

Secondary navigation with five items in the nav slot

Display at least one navigation item in the nav slot and make sure that there are not too many. (A maximum of five items typically fits well.)

 Secondary navigation with seven items in the nav slot

Do not add too many navigation items in the nav slot.
Edit this page on GitHub
© 2025 Red Hat Deploys by Netlify