Skip to main content
Rivet Design System Indiana University

Subnav

Provide additional navigation outside the main header or sidenav

Overview #

Use the subnav to provide additional navigation outside the main header or sidenav.

Examples #


Open in new window
Copy link to example 
<nav class="rvt-subnav " aria-label="Section navigation">
  <ul class="rvt-subnav__list">
    <li class="rvt-subnav__item">
      <a href="#0">Profile</a>
    </li>
    <li class="rvt-subnav__item">
      <a href="#0">Notifications</a>
    </li>
    <li class="rvt-subnav__item">
      <a href="#0">Schedule</a>
    </li>
    <li class="rvt-subnav__item">
      <a href="#0" aria-current="page">Settings</a>
    </li>
  </ul>
</nav>
Open in new window
Copy link to example 
<nav class="rvt-subnav " aria-label="Section navigation">
  <ul class="rvt-subnav__list">
    <li class="rvt-subnav__item">
      <a href="#0">
        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">  <path d="M8 0a4 4 0 1 0 0 8 4 4 0 0 0 0-8ZM6 4a2 2 0 1 1 4 0 2 2 0 0 1-4 0Zm0 5a3 3 0 0 0-3 3v4h10v-4a3 3 0 0 0-3-3H6Zm-1 3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v2H5v-2Z"/></svg>
        <span class="rvt-m-left-xs">Profile</span>
      </a>
    </li>
    <li class="rvt-subnav__item">
      <a href="#0">
        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">  <path d="M10 14h5.5v-2h-1.382l-.366-.733a2.86 2.86 0 0 1-.298-1.12l-.234-4.209A5.23 5.23 0 0 0 9 1.096V0H7v1.096a5.23 5.23 0 0 0-4.22 4.842l-.234 4.209a2.86 2.86 0 0 1-.298 1.12L1.882 12H.5v2H6a2 2 0 1 0 4 0Zm1.886-2H4.114a4.86 4.86 0 0 0 .429-1.742l.234-4.209a3.228 3.228 0 0 1 6.446 0l.234 4.209A4.86 4.86 0 0 0 11.886 12Z"/></svg>
        <span class="rvt-m-left-xs">Notifications</span>
      </a>
    </li>
    <li class="rvt-subnav__item">
      <a href="#0">
        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">  <path d="M7 9.5v2H5v-2h2Zm4 2v-2H9v2h2Z"/>  <path d="M5 0a1 1 0 0 1 1 1v1h4V1a1 1 0 1 1 2 0v1h3v13H1V2h3V1a1 1 0 0 1 1-1ZM3 4v2h10V4H3Zm10 4H3v5h10V8Z"/></svg>
        <span class="rvt-m-left-xs">Schedule</span>
      </a>
    </li>
    <li class="rvt-subnav__item">
      <a href="#0" aria-current="page">
        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">  <path d="M8 10a2 2 0 1 0 0-4 2 2 0 0 0 0 4Z"/>  <path d="M5 1.5A1.5 1.5 0 0 1 6.5 0h3A1.5 1.5 0 0 1 11 1.5v1.304l1.13-.652a1.5 1.5 0 0 1 2.048.549l1.5 2.598a1.5 1.5 0 0 1-.549 2.05L14 8l1.13.652a1.5 1.5 0 0 1 .548 2.049l-1.5 2.598a1.5 1.5 0 0 1-2.049.55L11 13.195V14.5A1.5 1.5 0 0 1 9.5 16h-3A1.5 1.5 0 0 1 5 14.5v-1.304l-1.13.652a1.5 1.5 0 0 1-2.048-.549l-1.5-2.598a1.5 1.5 0 0 1 .549-2.05L2 8 .87 7.348A1.5 1.5 0 0 1 .323 5.3l1.5-2.598a1.5 1.5 0 0 1 2.049-.55L5 2.805V1.5ZM7 2v1.67c0 .169-.027.329-.076.476a3.996 3.996 0 0 0-1.722.996 1.513 1.513 0 0 1-.452-.173l-1.446-.835-1 1.732 1.446.835c.146.084.271.188.375.304a4.007 4.007 0 0 0 0 1.99c-.104.116-.229.22-.375.304l-1.446.835 1 1.732 1.446-.835a1.52 1.52 0 0 1 .452-.173 3.995 3.995 0 0 0 1.722.996c.05.147.076.307.076.476V14h2v-1.67c0-.169.027-.329.076-.476a3.995 3.995 0 0 0 1.722-.996c.153.032.305.088.452.173l1.446.835 1-1.732-1.446-.835a1.514 1.514 0 0 1-.375-.304 4.007 4.007 0 0 0 0-1.99c.104-.116.229-.22.375-.304l1.446-.835-1-1.732-1.446.835a1.514 1.514 0 0 1-.452.173 3.996 3.996 0 0 0-1.722-.996A1.513 1.513 0 0 1 9 3.67V2H7Z"/></svg>
        <span class="rvt-m-left-xs">Settings</span>
      </a>
    </li>
  </ul>
</nav>

Elements #

Element Description Usage Required Multiple
Subnav list List of links in the subnav Limit to 3-5 links

Subnav list is required

Component may contain only one Subnav list
Subnav list item Link that appears in the subnav list Limit text to 1-2 words

Subnav list item is required

Component may contain multiple Subnav list item
Subnav list item icon Icon that appears alongside the text in a subnav list item Only use icons from the Rivet icon library. Always put the icon before the text.

Subnav list item icon is optional

Component may contain only one Subnav list item icon

Usage #

Do

  • Use to allow users to move between pages in a specific subsection of your application
  • Use to provide users with additional navigation beyond what's included in the main application header

Don't

  • Use for top-level site navigation—use the header or breadcrumbs instead
  • Use for navigation between steps in a process—use a step indicator instead
  • Use to allow users to switch between panels of related content without having to refresh the page—use tabs instead