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

Subnavigation

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">

Usage 

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

<link rel="stylesheet" href="../rh-subnav-lightdom.css">
<script type="module">
  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; authors should avoid slotting bare <a> elements, which are deprecated. 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.

Slots 1

Slot Name Summary Description
[default]

Sub navigation links

Expects a collection of <rh-navigation-link> or <a> elements. Each link must have text content for screen readers. Slotting <a> elements is deprecated; use <rh-navigation-link> instead.
Note: [default] unnamed slots do not have a slot="name" attribute.

Attributes 4 1

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'
Attribute DOM Property Description Type Default
color-palette colorPalette

Sets color palette, which affects the element's styles as well as descendants' color theme. Overrides parent color context. Your theme will influence these colors so check there first if you are seeing inconsistencies. See CSS Custom Properties for default values

 
'light' | 'lighter' | 'lightest' | 'dark' | 'darker' | 'darkest'
 
unknown

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 0

None

Design Tokens 14

Token Description Copy
--rh-color-surface

Theme surface color token for subnav background
--rh-color-accent-brand

Brand accent design token for current page
--rh-border-width-md

Focus outline width

2px border width: Example: Alert
--rh-color-border-interactive

Focus outline color
--rh-space-xs

Navigation link gap between text and icon

4px spacer
--rh-space-2xl

Link inline padding

Navigation link inline padding

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

Link block padding

Navigation link block padding

Scroll button inline padding

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

Theme secondary text token for inactive links

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

Theme primary text token for active links

Theme primary text token for visited links

Navigation link text color

Navigation link hover text color

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

Link state indicator border block end width

Navigation link state indicator border block

Scroll button state border block end width

3px border width: Example: Expanded Accordion panel
--rh-border-width-sm

Previous button border inline end width

Next button border inline start width

Scroll button border block end width

1px border width; Example: Secondary CTA or Button
--rh-color-border-subtle

Subtle border on hover and focus

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