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 dropdown Scheme toggle Select Site status Skeleton Skip link Spinner Statistic Subnavigation Surface Switch Table Tabs Tag Tile Timestamp Tooltip Video embed How to useProject FeltColor PalettesCustomizingDevelopers All PatternsAccordionAlertCall to ActionCardFilterFormLink with iconLogo wallSearch barSticky bannerSticky cardTabsTagTile AI design principlesLegal requirementsTransparency noticesIconographyColorChatbot avatarsAnimation All Personalization PatternsAnnouncement FundamentalsAccessibility toolsAssistive technologiesCI/CDContentContributorsDesignDevelopmentManual testingResourcesScreen readers Design/code status Release notes Get support

Subnavigation Since v1.0.0

OverviewStyleGuidelinesCodeAccessibilityDemos
ImportingUsagerh-subnavImportingUsagerh-subnav

Importing

Add rh-subnav to your page with this import statement:

<script type="module">
  import '@rhds/elements/rh-subnav/rh-subnav.js';
</script>
Copy to Clipboard Wrap lines

To learn more about installing RHDS elements on your site using an import map read our getting started docs.

Lightdom CSS

This element requires you to load "Lightdom CSS" stylesheets for styling deeply slotted elements.

Note

Replace /path/to/ with path to the CSS file, whether local or CDN.

 
<link rel="stylesheet" href="/path/to/rh-subnav/rh-subnav-lightdom.css">

Lightdom undefined CSS

Warning

This optional stylesheet provides styles while the element is not yet defined (:not(:defined)), which can reduce CLS. Learn more about lightdom undefined CSS .

 
<link rel="stylesheet" href="/path/to/rh-subnav/rh-subnav-lightdom-undefined.css">

Note

Replace /path/to/ with path to the CSS file, whether local or CDN.

Usage 

<rh-subnav>
  <rh-navigation-link href="#">Users</rh-navigation-link>
  <rh-navigation-link href="#">Containers</rh-navigation-link>
  <rh-navigation-link href="#">Databases</rh-navigation-link>
  <rh-navigation-link href="#" current-page="">Servers</rh-navigation-link>
  <rh-navigation-link href="#">System</rh-navigation-link>
  <rh-navigation-link href="#">Network</rh-navigation-link>
  <rh-navigation-link href="#">Cloud</rh-navigation-link>
</rh-subnav>

<link rel="stylesheet" href="../rh-subnav-lightdom.css">
<script type="module">
  import '@rhds/elements/rh-navigation-link/rh-navigation-link.js';
  import '@rhds/elements/rh-subnav/rh-subnav.js';
</script>
Copy to Clipboard Wrap lines

rh-subnav

A subnavigation provides a horizontal list of links for navigating related pages. Authors should slot <rh-navigation-link> elements as children. Each link must have visible text content for accessibility. When more than one subnav appears on a page, authors should set accessible-label so screen readers can distinguish them.

Overflow scroll buttons appear when links exceed the available space. All links are keyboard accessible via Tab and Enter.

Theming

Themable

This element uses Red Hat design system theming and can be used in themable contexts.

Slots 1

Slot Name Summary Description
[default]

undefined
Note: [default] unnamed slots do not have a slot="name" attribute.

Attributes 3

Attribute DOM Property Description Type Default
accessible-label accessibleLabel

Customize the default aria-label on the <nav> container. Defaults to "subnavigation" if no attribute/property is set.

 
string
 
'subnavigation'
label-scroll-left labelScrollLeft

Label for the scroll back button

 
string
 
'Scroll back'
label-scroll-right labelScrollRight

Label for the scroll forward button

 
string
 
'Scroll forward'

Methods 0

None

Events 0

None

CSS Shadow Parts 2

Part Name Summary Description
container

The nav container wrapping the link list
links

The scrollable link list container

CSS Custom Properties 4

CSS Property Description Default
--rh-subnav-link-padding-block

Navigation link block padding

 var(--rh-space-lg, 16px)
--rh-subnav-link-padding-inline

Navigation link inline padding

 var(--rh-space-2xl, 32px)
--rh-subnav-scroll-buttons-padding 0 var(--rh-space-lg, 16px)
--rh-subnav-scroll-buttons-border-block-end var(--rh-border-width-sm, 1px) solid var(--rh-color-border-subtle)

Design Tokens 10

Token Description Copy
--rh-space-xs

Navigation link gap between text and icon

4px spacer
--rh-space-2xl

32px spacer
--rh-font-size-body-text-md

Navigation link font size

16px font size
--rh-color-brand-red

Current page border block end color
--rh-space-lg

Scroll button inline padding

16px spacer
--rh-color-text-secondary

Scroll buttons text color
--rh-color-text-primary

Navigation link text color

Navigation link hover text color

Scroll button hover text color
--rh-border-width-lg

Navigation link state indicator border block

Scroll button state border block end width

Applies a 3px border width to 1 side of a container. It should be used for strong directional emphasis like indicating a current page, expanded, or selected state. Recommended for elements needing heavy visual weight like Accordion, Navigation, or Tabs. It must also be used for the focus indicator border per WCAG. Except for the focus indicator, it should not be applied to all 4 sides at once.
--rh-border-width-sm

Previous button border inline end width

Next button border inline start width

Scroll button border block end width

Applies a 1px border width to at least 1 side of a container. This shall be the default width for all borders and lines. It should be used to establish baseline thickness or visual separation with a container or thin line. It must not be used for strong directional emphasis like indicating a selected state. Recommended for elements like Button, Card, or Field. Applying to all 4 sides at once is optional.
--rh-color-border-subtle

Navigation link hover subtle border block end color

Disabled scroll buttons text color

Scroll button hover border block end color

Previous button border inline end color

Next button border inline start color

Scroll button border block end color
Edit this page on GitHub
© 2026 Red Hat Deploys by Netlify