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="#" 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">
<script type="module">
import '@rhds/elements/rh-subnav/rh-subnav.js';
</script>rh-subnav
A subnavigation allows users to navigate between a small number of page links.
| Slot Name | Summary | Description |
|---|---|---|
|
Navigation links, expects collection of |
| 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 |
|
|
accessible-label |
accessibleLabel |
Customize the default |
|
|
| Part Name | Summary | Description |
|---|---|---|
container |
container, |
|
links |
|
| Token | Copy |
|---|---|
--rh-space-2xl
|
|
--rh-color-accent-brand
|
|
--rh-border-width-md
|
|
--rh-color-border-interactive
|
|
--rh-space-lg
|
|
--rh-color-text-secondary
|
|
--rh-color-text-primary
|
|
--rh-border-width-lg
|
|
--rh-border-width-sm
|
|
--rh-color-border-subtle
|
|
Other libraries
To learn more about our other libraries, visit this page.
Feedback
To give feedback about anything on this page, contact us.
