Skip to main content

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
  • Learn more about using Rivet JavaScript