Navigation (secondary)
On this page
On this page
Installation
We recommend import maps when building pages with RHDS. Learn more about how to install on our getting started docs.
<script type="importmap">
{
"imports": {
"@rhds/elements/": "https://www.redhatstatic.com/dx/v1-alpha/@rhds/elements@2.1.1/elements/",
}
}
</script>npm install @rhds/elements<script type="importmap">
{
"imports": {
"@rhds/elements/rh-navigation-secondary/rh-navigation-secondary.js": "https://ga.jspm.io/npm:@rhds/elements@2.1.1/rh-navigation-secondary/rh-navigation-secondary.js"
},
"scopes": {
"https://ga.jspm.io/": {
"@floating-ui/core": "https://ga.jspm.io/npm:@floating-ui/core@1.6.9/dist/floating-ui.core.mjs",
"@floating-ui/dom": "https://ga.jspm.io/npm:@floating-ui/dom@1.6.13/dist/floating-ui.dom.mjs",
"@floating-ui/utils": "https://ga.jspm.io/npm:@floating-ui/utils@0.2.9/dist/floating-ui.utils.mjs",
"@floating-ui/utils/dom": "https://ga.jspm.io/npm:@floating-ui/utils@0.2.9/dist/floating-ui.utils.dom.mjs",
"@lit/context": "https://ga.jspm.io/npm:@lit/context@1.1.3/development/index.js",
"@lit/reactive-element": "https://ga.jspm.io/npm:@lit/reactive-element@2.0.4/development/reactive-element.js",
"@lit/reactive-element/decorators/": "https://ga.jspm.io/npm:@lit/reactive-element@2.0.4/development/decorators/",
"@patternfly/pfe-core": "https://ga.jspm.io/npm:@patternfly/pfe-core@4.0.4/core.js",
"@patternfly/pfe-core/": "https://ga.jspm.io/npm:@patternfly/pfe-core@4.0.4/",
"@patternfly/pfe-core/ssr-shims.js": "https://ga.jspm.io/npm:@patternfly/pfe-core@4.0.4/core.js",
"@rhds/elements/lib/": "https://ga.jspm.io/npm:@rhds/elements@2.1.1/lib/",
"@rhds/elements/": "https://ga.jspm.io/npm:@rhds/elements@2.1.1/elements/",
"@rhds/icons": "https://ga.jspm.io/npm:@rhds/icons@1.1.2/icons.js",
"@rhds/icons/ui/": "https://ga.jspm.io/npm:@rhds/icons@1.1.2/ui/",
"@rhds/tokens/css/": "https://ga.jspm.io/npm:@rhds/tokens@2.1.1/css/",
"@rhds/tokens/media.js": "https://ga.jspm.io/npm:@rhds/tokens@2.1.1/js/media.js",
"lit": "https://ga.jspm.io/npm:lit@3.2.1/index.js",
"lit-element/lit-element.js": "https://ga.jspm.io/npm:lit-element@4.1.1/development/lit-element.js",
"lit-html": "https://ga.jspm.io/npm:lit-html@3.2.1/development/lit-html.js",
"lit-html/": "https://ga.jspm.io/npm:lit-html@3.2.1/development/",
"lit/": "https://ga.jspm.io/npm:lit@3.2.1/",
"prism-esm": "https://ga.jspm.io/npm:prism-esm@1.29.0-fix.6/prism.js",
"prism-esm/components/": "https://ga.jspm.io/npm:prism-esm@1.29.0-fix.6/components/",
"tslib": "https://ga.jspm.io/npm:tslib@2.8.1/tslib.es6.mjs"
}
}
}
</script>Add it to your page with this import statement
<script type="module">
import '@rhds/elements/rh-navigation-secondary/rh-navigation-secondary.js';
</script>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-navigation-secondary/rh-navigation-secondary-lightdom.css">Usage
<rh-navigation-secondary>
<a href="#" slot="logo" id="logo-id" aria-current="page">
Logo/Title
</a>
<ul slot="nav" aria-labelledby="logo-id">
<li>
<rh-navigation-secondary-dropdown>
<a href="#dropdown-fallback-url" slot="link">Dropdown</a>
<rh-navigation-secondary-menu slot="menu">
<rh-navigation-secondary-menu-section>
<h3 slot="header">Section</h3>
<ul slot="links">
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>
<rh-cta slot="cta" href="#">Section CTA</rh-cta>
</rh-navigation-secondary-menu-section>
<rh-navigation-secondary-menu-section>
<h3 slot="header">Section</h3>
<ul slot="links">
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>
<rh-cta slot="cta" href="#">Section CTA</rh-cta>
</rh-navigation-secondary-menu-section>
</rh-navigation-secondary-menu>
</rh-navigation-secondary-dropdown>
</li>
<li>
<rh-navigation-secondary-dropdown>
<a href="#dropdown-fallback-url" slot="link">Dropdown</a>
<rh-navigation-secondary-menu slot="menu">
<ul>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>
</rh-navigation-secondary-menu>
</rh-navigation-secondary-dropdown>
</li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>
<rh-cta slot="cta" href="#">Call to Action</rh-cta>
</rh-navigation-secondary>
<link rel="stylesheet" href="../rh-navigation-secondary-lightdom.css">
<script type="module">
import '@rhds/elements/rh-navigation-secondary/rh-navigation-secondary.js';
import '@rhds/elements/rh-cta/rh-cta.js';
</script>System Integration
Current page indicator
When a user is viewing a page that is part of the secondary navigation information architecture, a red top border is visible. If the current active page is part of a dropdown menu, that dropdown is highlighted with the same top border to indicate it contains the current page. For more details on how to use this current page indicator, refer to the design guidelines for current page indicator.
To enable this indicator style, implementation should apply the
aria-current="page" attribute to the current page link.
<a href="/" aria-current="page">Current page being viewed</a>The rh-navigation-secondary element does not apply the
aria-current="page" attribute itself. The responsibility for
keeping track of which link is currently active falls on the content management
system or application. The element checks for the presence of this attribute
and applies the current page indicator style to nav links and dropdown menus
when the active page is within a dropdown menu.
rh-navigation-secondary
The Secondary navigation is used to connect a series of pages together. It displays wayfinding content and links relevant to the page it is placed on. It should be used in conjunction with the [primary navigation](../navigation-primary).
| Slot Name | Description |
|---|---|
logo |
Logo added to the main nav bar, expects |
nav |
Navigation list added to the main nav bar, expects |
cta |
Nav bar level CTA, expects |
mobile-menu |
Text label for the mobile menu button, for l10n. Defaults to "Menu" |
| Event Name | Description |
|---|---|
overlay-change |
Fires when an dropdown is opened or closed in desktop view or when the mobile menu button is toggled in mobile view. |
| Part Name | Description |
|---|---|
nav |
container, |
container |
container, |
cta |
container, |
| CSS Property | Description | Default |
|---|---|---|
--rh-navigation-secondary-z-index |
z-index of the navigation-secondary |
102
|
--rh-navigation-secondary-overlay-z-index |
z-index of the navigation-secondary-overlay |
-1
|
| Token | Copy |
|---|---|
--rh-border-width-lg
|
|
--rh-border-width-sm
|
|
--rh-box-shadow-sm
|
|
--rh-color-border-subtle
|
|
--rh-color-border-subtle-on-dark
|
|
--rh-color-border-subtle-on-light
|
|
--rh-color-brand-red
|
|
--rh-color-brand-red-on-dark
|
|
--rh-color-brand-red-on-light
|
|
--rh-color-interactive-primary-default-on-light
|
|
--rh-color-interactive-primary-hover-on-light
|
|
--rh-color-surface
|
|
--rh-color-surface-dark
|
|
--rh-color-surface-lighter
|
|
--rh-color-surface-lightest
|
|
--rh-color-text-brand-on-light
|
|
--rh-color-text-primary
|
|
--rh-color-text-primary-on-dark
|
|
--rh-color-text-primary-on-light
|
|
--rh-font-family-body-text
|
|
--rh-font-family-heading
|
|
--rh-font-size-body-text-lg
|
|
--rh-font-size-body-text-md
|
|
--rh-font-weight-heading-medium
|
|
--rh-line-height-heading
|
|
--rh-space-2xl
|
|
--rh-space-4xl
|
|
--rh-space-lg
|
|
--rh-space-md
|
|
--rh-space-xl
|
|
rh-navigation-secondary-dropdown
Upgrades a top level nav link to include dropdown functionality
| Slot Name | Description |
|---|---|
link |
Link for dropdown, expects |
menu |
Menu for dropdown, expects |
| Event Name | Description |
|---|---|
change |
Fires when a dropdown is clicked |
| Token | Copy |
|---|---|
--rh-border-width-lg
|
|