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 stepsPlanned Site status Skip link Spinner Statistic Subnavigation Surface Switch Table Tabs Tag Tile Timestamp Tooltip Video embed
Theming OverviewColor PalettesCustomizingDevelopers
Patterns All PatternsCardTabsFilterFormLink with iconLogo wallSearch barSticky bannerSticky cardTile
Personalization All Personalization PatternsAnnouncement
Accessibility FundamentalsAccessibility toolsAssistive technologiesCI/CDContentContributorsDesignDevelopmentManual testingResourcesScreen readers
Design/code status Release notes Get support

Navigation (primary)

OverviewStyleGuidelinesCodeAccessibilityDemos
StyleColor schemeMenusSpaceInteraction statesStyleColor schemeMenusSpaceInteraction states

Style

Primary navigation includes our brand logo or hat and groups of menus and links in a container that spans the width of the browser window.

Anatomy

Anatomy of primary navigation with numbered annotations pointing to various parts. Top left is the logo. The primary nav items follow on the right. then the secondary items are right aligned.
  1. Hat or logo
  2. Primary menus
  3. Cross-domain links
  4. Utility menus

Color scheme

Primary navigation is available in both light and dark color schemes.

Helpful tip

It is recommended to match color schemes. For example, if you use lots of dark scheme elements, use the dark scheme primary navigation.

Light scheme

Primary nav in a light scheme which means it has a white background

Dark scheme

Primary nav in a dark scheme which means it has a dark or black background

Primary menus

Primary menus organize high-level topics into sections. When expanded, all menu backgrounds span the width of the browser window. Content is then organized within a fixed width container.

A primary nav with a full width expanded primary menu with a placeholder showing where end users would put menu content.

Utility menus

Utility menus organize secondary content like important user actions. The height and width of each menu is determined by the content inside. Some menus may have a different size than others.

A primary nav with a one-third width expanded utility nav showing where content should be placed.

Space

Primary nav has 32px of inline padding, 24 px of padding-block, 32px between each link. On mobile, the horizontal padding decreases to 16px. Expanded dropdown menus have 32px of padding on the top and bottom of the expanded menu.

Interaction states

Hover

Certain elements have specific hover states.

  • The primary menu bottom border changes to gray
  • Links change color and display a dashed underline
  • The utility menu background changes to gray
  • The utility menu border changes to a Hybrid style gradient
Two navigations. The first shows a cursor hovering over the first item and a gray border underneath. The second shows two hover states. A link with an underline and a utility nav trigger with a darker background and hybrid style border.

Focus

There is one difference between hover and focus states.

  • The primary menu bottom border changes to a Hybrid style gradient
All interactive items on focus recieve the hover state plus a blue focus ring surrounding the entire trigger.

Active

Primary and utility menus display subtle visual changes.

  • The caret icon rotates and points up instead of down
  • The utility menu border becomes 1px thicker
Two navs showing active states. The blue focus ring exists alongside the points outlined above.

Hybrid style

Some interaction state properties leverage Hybrid style, our new system of visual elements.

Learn more about Hybrid style in the Brand standards section.

Edit this page on GitHub
© 2025 Red Hat Deploys by Netlify