Skip to main content Red Hat Design System logo Contribute on Github v2.0.0 Home
About About the design systemHow we buildRoadmap
Get started OverviewDesignersDevelopers
Foundations OverviewColorGridPersonalization patternsSpacingTypography
Tokens Overview Global colorBox shadowTypographyBorderOpacitySpaceLengthIconBreakpointsMedia queries
Elements All elements Accordion Alert Audio player Avatar Back to top Badge Blockquote Breadcrumb Button Call to action Card Code block Dialog Footer Health index Icon Navigation (primary)Planned Navigation (secondary) Pagination PopoverPlanned Progress stepsPlanned Site status Skip link Spinner Statistic Subnavigation Surface Switch Table Tabs Tag Tile Timestamp Tooltip Video embed
Patterns All patternsAnnouncementCardDisclosureFilterFormLinkLink with iconLogo wallSearch barSkip navigationSticky bannerSticky cardTabsTileVideo thumbnail
Accessibility FundamentalsContentDesignDevelopmentContributorsQa and testingAssistive technologiesResources
Design/code status Release notes Get support

Subnavigation

Overview Style Guidelines Code Demos Accessibility
  1. Style
  2. Theme
  3. Configuration
  4. Space
  5. Interaction states
  1. Style
  2. Theme
  3. Configuration
  4. Space
  5. Interaction states

Style

A subnavigation is visually similar to tabs, but the text labels are links instead. They are arranged horizontally on a thin bar with no other styling except for the active page accent.

Anatomy

Anatomy image showing a subnavigation with various annotation numbers
  1. Active page
  2. Active page accent
  3. Inactive page
  4. Surface
  5. Overflow button - left
  6. Overflow button - right

Theme

A subnavigation is available in the light theme only right now.

Image of light theme desktop and mobile subnavigations

Configuration

Each link container is the same height as the bar.

Image of desktop and mobile subnavigations with various specs like height, width, and more

Space

Helpful tip

To view inset spacing when a subnavigation is used below the primary navigation or a heading, go to the Guidelines page.

 Image of desktop and mobile subnavigations with spacing values in between
Example Token Description
16 --rh-space-lg 16px spacer
32 --rh-space-2xl 32px spacer

Interaction states

Interactive elements include inactive links and overflow buttons.

Hover

Inactive links and overflow buttons have the same hover state.

Image of light theme hover states

Focus

Helpful tip

The Focus state has the same styles as the Hover state.

 Image of light theme focus states

Active

Helpful tip

The Active state has the same styles as the Hover state.

 Image of light theme active states
© 2021-2024 Red Hat, Inc. Deploys by Netlify