Subnavigation
Importing
Add rh-subnav to your page with this import statement:
<script type="module">
import '@rhds/elements/rh-subnav/rh-subnav.js';
</script>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>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.
Theming
This element uses Red Hat design system theming and can be used in themable contexts.
This element is a
color palette
container and supports all color palettes via
the color-palette attribute.
Slots
| Slot Name | Summary | Description |
|---|---|---|
Sub navigation links |
Expects a collection of |
Attributes
| Attribute | DOM Property | Description | Type | Default |
|---|---|---|---|---|
|
|
accessibleLabel |
Customize the default |
|
|
|
|
labelScrollLeft |
Label for the scroll back button |
|
|
|
|
labelScrollRight |
Label for the scroll forward button |
|
|
Deprecated Attributes
| 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 |
|
|
Methods
None
Events
None
CSS Shadow Parts
| Part Name | Summary | Description |
|---|---|---|
|
|
The nav container wrapping the link list |
|
|
|
The scrollable link list container |
CSS Custom Properties
None
Design Tokens
| 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 Applies a 2px border width to at least 1 side of a container. It should be used to add emphasis or visual separation beyond a 1px border. Recommended for elements needing extra thickness like Alert or Progress stepper. It must be used to ensure hover, focus, and active states are discernible by more than color alone per WCAG. Applying to all 4 sides at once is optional. |
|
--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 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
|
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 |
|
Other libraries
To learn more about our other libraries, visit this page.
Feedback
To give feedback about anything on this page, contact us.
