Sidenav
Create a vertical list of navigation links for use in a sidebar
Overview #
Use the sidenav component to add a vertical list of navigation links to a sidebar.
Sidenavs can contain dropdowns that reveal nested links.
Examples #
<nav class="rvt-sidenav" aria-labelledby="sidenav-label" data-rvt-sidenav>
<span class="rvt-sidenav__label" id="sidenav-label">Section pages</span>
<ul class="rvt-sidenav__list">
<li class="rvt-sidenav__item">
<a href="#" class="rvt-sidenav__link">Section nav one</a>
</li>
<li class="rvt-sidenav__item">
<a href="#" class="rvt-sidenav__link" aria-current="page">Section nav two</a>
</li>
<li class="rvt-sidenav__item">
<a href="#" class="rvt-sidenav__link">Section nav three</a>
</li>
</ul>
</nav>
<nav class="rvt-sidenav" aria-labelledby="sidenav-label" data-rvt-sidenav>
<span class="rvt-sidenav__label" id="sidenav-label">Section pages</span>
<ul class="rvt-sidenav__list">
<li class="rvt-sidenav__item">
<a href="#" class="rvt-sidenav__link">Section nav one</a>
</li>
<li class="rvt-sidenav__item">
<a href="#" class="rvt-sidenav__link" aria-current="page">Section nav two</a>
</li>
<li class="rvt-sidenav__item">
<div class="rvt-sidenav__item-wrapper">
<a href="#" class="rvt-sidenav__link">Section nav three</a>
<button class="rvt-sidenav__toggle" data-rvt-sidenav-toggle="toggle-1">
<span class="rvt-sr-only">Expand or hide links nested under the third section</span>
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
<path fill="currentColor" d="M8,12.46a2,2,0,0,1-1.52-.7L1.24,5.65a1,1,0,1,1,1.52-1.3L8,10.46l5.24-6.11a1,1,0,0,1,1.52,1.3L9.52,11.76A2,2,0,0,1,8,12.46Z"/>
</svg>
</button>
</div>
<ul class="rvt-sidenav__list" data-rvt-sidenav-list="toggle-1">
<li class="rvt-sidenav__item">
<a href="#" class="rvt-sidenav__link">Level two</a>
</li>
<li class="rvt-sidenav__item">
<a href="#" class="rvt-sidenav__link">Level two</a>
</li>
</ul>
</li>
</ul>
</nav>
<nav class="rvt-sidenav" aria-labelledby="sidenav-label" data-rvt-sidenav>
<span class="rvt-sidenav__label" id="sidenav-label">Section pages</span>
<ul class="rvt-sidenav__list">
<li class="rvt-sidenav__item">
<a href="#" class="rvt-sidenav__link">Section nav one</a>
</li>
<li class="rvt-sidenav__item">
<a href="#" class="rvt-sidenav__link" aria-current="page">Section nav two</a>
</li>
<li class="rvt-sidenav__item">
<div class="rvt-sidenav__item-wrapper">
<a href="#" class="rvt-sidenav__link">Section nav three</a>
<button class="rvt-sidenav__toggle" data-rvt-sidenav-toggle="toggle-1">
<span class="rvt-sr-only">Expand or hide links nested under the Section nav three section</span>
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
<path fill="currentColor" d="M8,12.46a2,2,0,0,1-1.52-.7L1.24,5.65a1,1,0,1,1,1.52-1.3L8,10.46l5.24-6.11a1,1,0,0,1,1.52,1.3L9.52,11.76A2,2,0,0,1,8,12.46Z"/>
</svg>
</button>
</div>
<ul class="rvt-sidenav__list" data-rvt-sidenav-list="toggle-1">
<li class="rvt-sidenav__item">
<a href="#" class="rvt-sidenav__link">Level two</a>
</li>
<li class="rvt-sidenav__item">
<a href="#" class="rvt-sidenav__link">Level two</a>
</li>
<li class="rvt-sidenav__item">
<div class="rvt-sidenav__item-wrapper">
<a href="#" class="rvt-sidenav__link">Level two</a>
<button class="rvt-sidenav__toggle" data-rvt-sidenav-toggle="toggle-2">
<span class="rvt-sr-only">Expand or hide links nested under the Level two section</span>
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
<path fill="currentColor" d="M8,12.46a2,2,0,0,1-1.52-.7L1.24,5.65a1,1,0,1,1,1.52-1.3L8,10.46l5.24-6.11a1,1,0,0,1,1.52,1.3L9.52,11.76A2,2,0,0,1,8,12.46Z"/>
</svg>
</button>
</div>
<ul class="rvt-sidenav__list" data-rvt-sidenav-list="toggle-2">
<li class="rvt-sidenav__item">
<a href="#" class="rvt-sidenav__link">Level three</a>
</li>
<li class="rvt-sidenav__item">
<a href="#" class="rvt-sidenav__link">Level three</a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</nav>
<nav class="rvt-sidenav" aria-labelledby="sidenav-label" data-rvt-sidenav data-rvt-sidenav-open-all>
<span class="rvt-sidenav__label" id="sidenav-label">Section pages</span>
<ul class="rvt-sidenav__list">
<li class="rvt-sidenav__item">
<a href="#" class="rvt-sidenav__link">Section nav one</a>
</li>
<li class="rvt-sidenav__item">
<a href="#" class="rvt-sidenav__link" aria-current="page">Section nav two</a>
</li>
<li class="rvt-sidenav__item">
<div class="rvt-sidenav__item-wrapper">
<a href="#" class="rvt-sidenav__link">Section nav three</a>
<button class="rvt-sidenav__toggle" data-rvt-sidenav-toggle="toggle-1">
<span class="rvt-sr-only">Expand or hide links nested under the Section nav three section</span>
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
<path fill="currentColor" d="M8,12.46a2,2,0,0,1-1.52-.7L1.24,5.65a1,1,0,1,1,1.52-1.3L8,10.46l5.24-6.11a1,1,0,0,1,1.52,1.3L9.52,11.76A2,2,0,0,1,8,12.46Z"/>
</svg>
</button>
</div>
<ul class="rvt-sidenav__list" data-rvt-sidenav-list="toggle-1">
<li class="rvt-sidenav__item">
<a href="#" class="rvt-sidenav__link">Level two</a>
</li>
<li class="rvt-sidenav__item">
<a href="#" class="rvt-sidenav__link">Level two</a>
</li>
<li class="rvt-sidenav__item">
<div class="rvt-sidenav__item-wrapper">
<a href="#" class="rvt-sidenav__link">Level two</a>
<button class="rvt-sidenav__toggle" data-rvt-sidenav-toggle="toggle-2">
<span class="rvt-sr-only">Expand or hide links nested under the Level two section</span>
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
<path fill="currentColor" d="M8,12.46a2,2,0,0,1-1.52-.7L1.24,5.65a1,1,0,1,1,1.52-1.3L8,10.46l5.24-6.11a1,1,0,0,1,1.52,1.3L9.52,11.76A2,2,0,0,1,8,12.46Z"/>
</svg>
</button>
</div>
<ul class="rvt-sidenav__list" data-rvt-sidenav-list="toggle-2">
<li class="rvt-sidenav__item">
<a href="#" class="rvt-sidenav__link">Level three</a>
</li>
<li class="rvt-sidenav__item">
<a href="#" class="rvt-sidenav__link">Level three</a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</nav>
Attributes #
Use the following attributes to configure a sidenav:
Attribute | Description |
---|---|
data-rvt-sidenav-open-all |
Opens all dropdowns within the sidenav on page load |
Usage #
Do
- Use to show navigation links in a sidebar
- Keep navigation link text clear and concise
- Match the structure of the sidenav to the structure of your site's sections and pages
Don't
- Nest dropdowns more than four levels deep
- Use the sidenav outside of a sidebar
Accessibility #
- Use a meaningful label. Change the default text “Section pages” to a label that clearly describes the links in the sidenav.
ARIA labels #
Attribute | Description |
---|---|
aria-haspopup="true" |
Added to any button elements within the sidenav by the component’s JavaScript |
aria-expanded |
Added to any button elements within the sidenav by the component’s JavaScript. Set to true if the button’s associated dropdown menu is open; false otherwise. |
JavaScript #
Method | Description |
---|---|
open(toggleId) |
Opens the dropdown list of links where the value of the data-rvt-sidenav-list attribute matches toggleId |
close(toggleId) |
Closes the dropdown list of links where the value of the data-rvt-sidenav-list attribute matches toggleId |
Event | Description | Detail object properties |
---|---|---|
rvtSidenavListOpened |
Emitted when a dropdown within a sidenav is opened |
id : Value of the opened dropdown's data-rvt-sidenav-list attribute |
rvtSidenavListClosed |
Emitted when a dropdown within a sidenav is closed |
id : Value of the closed dropdown's data-rvt-sidenav-list attribute |