Navigation (secondary)
Installation
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
| 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" |
None
None
| 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
|
None
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 |
None
None
| Event Name | Description |
|---|---|
change |
Fires when a dropdown is clicked |
None
None
None
rh-navigation-secondary-menu
Dropdown menu for secondary nav, available in full-width and fixed-with sizes
| Slot Name | Description |
|---|---|
|
Optional |
| DOM Property | Description | Type | Default |
|---|---|---|---|
colorPalette |
Color palette (default: lightest) Secondary nav menus are always represented on the lightest color palette. |
|
|
layout |
Layout (default: full-width) Secondary nav menus by default are always full-width, but can be set to fixed-width for special cases. |
|
|
visible |
|
|
|
None
None
| Part Name | Description |
|---|---|
container |
container - |
full-width |
container - |
fixed-width |
container - |
sections |
container - |
| CSS Property | Description | Default |
|---|---|---|
--rh-navigation-secondary-menu-section-grid |
grid-template-columns for menu sections |
repeat(auto-fit, minmax(15.5rem, 1fr))
|
--rh-navigation-secondary-menu-section-grid-gap |
grid-gap for menu sections |
32px
|
--rh-navigation-secondary-menu-content-max-width |
max-width for menu content |
1136px
|
None
rh-navigation-secondary-menu-section
A menu section which auto upgrades accessibility for headers and sibling list
| Slot Name | Description |
|---|---|
header |
Adds a header tag to section, expects |
links |
Adds a ul tag to section, expects |
cta |
Adds a section level CTA, expects |
None
None
None
| Part Name | Description |
|---|---|
container |
container, |
None
None
Other libraries
To learn more about our other libraries, visit this page.
Feedback
To give feedback about anything on this page, contact us.
