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

Navigation (primary)

OverviewStyleGuidelinesCodeAccessibilityDemos
GuidelinesWriting contentLayoutBehaviorResponsive designBest PracticesGuidelinesWriting contentLayoutBehaviorResponsive designBest Practices

Guidelines

Use the primary navigation to organize high-level content and important user actions.

Primary vs. secondary navigation

Here is guidance on when to use the primary vs. secondary navigation.

Element When to use
Primary navigation
  • Provide persistent access to high-level content across domains
  • Outline the fundamental structure of a website
  • Organize the most important user actions
Secondary navigation
  • If more space is needed for content without cluttering the Primary Navigation
  • Offer more content pertinent to a section that users are exploring
  • Allow users to dig deeper into a specific topic

Writing content

Text labels

Text labels need to quickly describe what content users can expect to see when something is selected. Try to write short and concise text labels.

Element Max number of items Character count
Primary Menu 5 20
Cross-domain link 3 15

Layout

Primary menus

Primary menus organize high-level topics into sections. When expanded, each menu background spans the width of the browser window. Content is then organized into a maximum of 4 columns.

A primary nav with an expanded menu showing four different columns to place content.

If the layout in a menu has been set to display 4 columns of content, even if 3 are visible, they will have the same width as if there are 4 columns of content visible.

A primary nav with an expanded menu showing three different columns and a blank placeholder for the fourth column.

When including a Card or Tile, it will be arranged last.

A primary nav with an expanded menu showing three columns and a placeholder for a tile or card in the fourth column

Utility menus

Utility menus organize secondary content like important user actions. The height and width of each menu is determined by the content inside. Content in utility menus can have a flexible size and layout, but should not occupy more than 3 grid columns.

A primary nav with an expanded utility menu showing three columns taking up equal widths.

Behavior

Expanding menus

Expanded menus are visually identified by a 4px thick red accent border. When users hover over other collapsed menus, the accent border is gray. When a collapsed menu is selected, the caret icon rotates quickly and the previously expanded menu collapses. Only 1 menu can be expanded at a time.

Two navs showing hover interactions (red underlines under menu buttons) of various elements

Collapsing menus

Menus can be collapsed by doing the following.

  • Selecting the same primary or utility menu again
  • Selecting anywhere inside of the overlay under the menu
  • Pressing the Escape key
A nav with an expanded menu with X's over the menu triggers and backdrop denoting what will close a menu.

When users land on or refresh a page and then press the Tab key, the Skip link will appear on top of the primary navigation.

A primary nav with a skip link centered over top of the navigation.

Sticky scrolling

The Primary navigation is always sticky on scroll on every page it is used on.

Responsive design

Some elements disappear and the bar gets shorter as the Primary navigation gets smaller. To see more, go to the Demos page.

Four primary navigations shown at various viewport sizes from large to small

Best Practices

Amount of content

A primary nav with a skip link centered over top of the navigation.

For all domains, use a comfortable amount of primary menus, cross-domain links, and utility menus so the Primary navigation does not feel cramped.

Do not overload the Primary navigation with tons of primary menus or other elements.
Edit this page on GitHub
© 2026 Red Hat Deploys by Netlify