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>
          <span class="rvt-sr-only">Show more section nav three links</span>
          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">  <path d="m15.146 6.263-1.292-1.526L8 9.69 2.146 4.737.854 6.263 8 12.31l7.146-6.047Z"/></svg>
        </button>
      </div>
      <ul class="rvt-sidenav__list" data-rvt-sidenav-list>
        <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>
          <span class="rvt-sr-only">Show more section nav three links</span>
          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">  <path d="m15.146 6.263-1.292-1.526L8 9.69 2.146 4.737.854 6.263 8 12.31l7.146-6.047Z"/></svg>
        </button>
      </div>
      <ul class="rvt-sidenav__list" data-rvt-sidenav-list>
        <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>
              <span class="rvt-sr-only">Show more level two links</span>
              <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">  <path d="m15.146 6.263-1.292-1.526L8 9.69 2.146 4.737.854 6.263 8 12.31l7.146-6.047Z"/></svg>
            </button>
          </div>
          <ul class="rvt-sidenav__list" data-rvt-sidenav-list>
            <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>
          <span class="rvt-sr-only">Show more section nav three links</span>
          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">  <path d="m15.146 6.263-1.292-1.526L8 9.69 2.146 4.737.854 6.263 8 12.31l7.146-6.047Z"/></svg>
        </button>
      </div>
      <ul class="rvt-sidenav__list" data-rvt-sidenav-list>
        <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>
              <span class="rvt-sr-only">Show more level two links</span>
              <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">  <path d="m15.146 6.263-1.292-1.526L8 9.69 2.146 4.737.854 6.263 8 12.31l7.146-6.047Z"/></svg>
            </button>
          </div>
          <ul class="rvt-sidenav__list" data-rvt-sidenav-list>
            <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>

Elements #

Element Description Usage Required Multiple
Label Text that appears at the top of the sidenav Limit to a few words that summarize the links in the sidenav

Label is required

Component may contain only one Label
Link Link that appears in the sidenav Limit link text to a few words

Link is required

Component may contain multiple Link

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 #

  • Specifying toggle and list IDs. By default, Rivet auto-generates toggle and list IDs. If you’d like a toggle or list to have a specific ID, you can explicitly set the data-rvt-sidenav-toggle and data-rvt-sidenav-list attribute values in your markup. The data-rvt-sidenav-toggle attribute value for a given toggle must match the data-rvt-sidenav-list attribute value of its associated list.

Do

  • Use to show navigation links in a sidebar
  • Match the structure of the sidenav to the structure of your site's sections and pages

Don't

  • Use the sidenav outside of a sidebar
  • Nest links more than four levels deep

Accessibility #

  • Use a meaningful label. Change the default text “Section pages” to a label that clearly describes the links in the sidenav.
  • Use brief but clear screen reader-only button labels. Aim for labels like “Show more (section name) links,” rather than “Show or hide links under the (section name) section.” Longer labels can be redundant and time-consuming for people using assistive technology.

ARIA labels #

Attribute Description
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