Skip to main content
Rivet Design System Indiana University

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 #


Open in new window
Copy link to example 
<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>
Open in new window
Copy link to example 
<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>
Open in new window
Copy link to example 
<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>
Open in new window
Copy link to example 
<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