Subnavigation
On this page
On this page
Overview
A subnavigation allows users to navigate between a small number of page links.
Edit element properties
import '@rhds/elements/rh-subnav/rh-subnav.js';<rh-subnav>
<a href="#">Users</a>
<a href="#">Containers</a>
<a href="#">Databases</a>
<a href="#" active="">Servers</a>
<a href="#">System</a>
<a href="#">Network</a>
<a href="#">Cloud</a>
</rh-subnav>
<link rel="stylesheet" href="../rh-subnav-lightdom.css">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
Customize the default aria-label on the <nav> container.
Defaults to "subnavigation" if no attribute/property is set.
Status
What do these mean?
- Figma library:
-
Ready - RH Elements:
-
Ready - RH Shared Libs:
-
Ready
When to use
- When you need to connect a group of related pages together
- When you need to offer users a more granular navigation
- When you want to allow users to browse high-level and low-level pages in the same experience
Image of a subnavigation; a horizontal row of links placed on a light gray bar
Status checklist
| Property | Status | Meaning |
|---|---|---|
| Figma library |
|
Component is available in the Figma library |
| RH Elements |
|
Component is available in the RH Elements repo |
| RH Shared Libs |
|
Component is available in the RH Shared Libs repo |
Other libraries
To learn more about our other libraries, visit this page.
Feedback
To give feedback about anything on this page, contact us.
