Skip to content
Indiana University Logo
Rivet Design System
  • Components Add-ons Content guide
  • What is Rivet? Blog Roadmap Changelog
  1. February 25, 2021

    Rivet 1.8.0 release

    Rivet 1.8.0 is now available. This release adds border removal utility classes and fixes bugs related to the button, dropdown, and collapsible components.

  2. February 15, 2021

    Rivet announcements: Beta timeline, GitHub Discussions, and 1.8.0 release

    Updates about Rivet's development in the spring and beyond.

  3. January 20, 2021

    Rivet featured on Accessible Code Libraries and Design Patterns list

    Rivet was highlighted alongside the U.S. government, GOV.UK, and Salesforce design systems.

More posts Get updates in your inbox
Install via NPM Download CSS & JS Hosted assets
Navigation
    • Components
    • Add-ons
    • Content guide
    • What is Rivet?
    • Blog
    • Roadmap
    • Changelog
  • Use Rivet
Resources
  • User Experience Office
  • Accessibility Evaluations
  • Rivet Software Design System
  • IU Framework for WCMS
Version 1.8.0
  • Information
    • Roadmap
    • Changelog
    • Component status
    • Contributing
  • Getting started
    • Install with NPM
    • Rivet Sass
  • Layout
    • Box
    • Grid
    • Panels
    • Spacing
    • Typography
  • Page content
    • Badges
    • Links
    • Lists
    • Media Object
    • Step Indicator
    • Tables
    • Tabs This component requires JS
    • Timeline
  • Forms
    • Buttons
    • Segmented Buttons
    • Checkboxes
    • File input This component requires JS
    • Input group
    • Radio buttons
    • Select element
    • Text inputs
  • Navigation
    • Breadcrumb
    • Dropdown This component requires JS
    • Footer
    • Header This component requires JS
    • Menu
    • Pagination
  • Overlays & Feedback
    • Alerts This component requires JS
    • Loading indicator
    • Modals This component requires JS
  • Utilities
    • Border
    • Display
    • Flex
    • Text
    • Visibility
    • Width
    • z-index
Ready Added in 1.6.0

Menu

Provide additional navigation outside of the main header

New in Rivet 1.6.0

The menu component is new as of 1.6.0. If you need help updating to 1.6.0, see our instructions for updating Rivet.

Use the menu component to provide users with additional navigation beyond that included in the main application header.

Menu navigation is useful when you need to allow users to jump between pages in a specific subsection of your application.

Basic menu

  • Item one
  • Item two
  • Item three
  • Item four
  • Item five
<nav class="rvt-menu" aria-label="Section navigation">
  <ul class="rvt-menu__list">
    <li class="rvt-menu__item">
      <a href="#" aria-current="page">Item one</a>
    </li>
    <li class="rvt-menu__item">
      <a href="#">Item two</a>
    </li>
    <li class="rvt-menu__item">
      <a href="#">Item three</a>
    </li>
    <li class="rvt-menu__item">
      <a href="#">Item four</a>
    </li>
    <li class="rvt-menu__item">
      <a href="#">Item five</a>
    </li>
  </ul>
</nav>

Badges in menu items

Use badges to highlight menu items that need attention:

  • Item one
  • Item two
  • Item three
  • Item four 3
  • Item five
<nav class="rvt-menu" aria-label="Section navigation">
  <ul class="rvt-menu__list">
    <li class="rvt-menu__item">
      <a href="#" aria-current="page">Item one</a>
    </li>
    <li class="rvt-menu__item">
      <a href="#">Item two</a>
    </li>
    <li class="rvt-menu__item">
      <a href="#">Item three</a>
    </li>
    <li class="rvt-menu__item">
      <a href="#">
        <span>Item four</span>
        <span class="rvt-badge rvt-badge--success rvt-m-left-xxs">3</span>
      </a>
    </li>
    <li class="rvt-menu__item">
      <a href="#">Item five</a>
    </li>
  </ul>
</nav>

Icons in menu items

You can use icons to emphasize the content of each menu item:

  • Profile
  • Notifications
  • Schedule
  • Settings
<nav class="rvt-menu" aria-label="Section navigation">
  <ul class="rvt-menu__list">
    <li class="rvt-menu__item">
      <a href="#">
        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true">
          <g fill="currentColor">
            <path d="M8,8a4,4,0,1,1,4-4A4,4,0,0,1,8,8ZM8,2a2,2,0,1,0,2,2A2,2,0,0,0,8,2Z" />
            <path
              d="M12.75,16H3.25A1.25,1.25,0,0,1,2,14.75V13A4,4,0,0,1,6,9h4a4,4,0,0,1,4,4v1.75A1.25,1.25,0,0,1,12.75,16ZM4,14h8V13a2,2,0,0,0-2-2H6a2,2,0,0,0-2,2Z" />
          </g>
        </svg>
        <span class="rvt-m-left-xs">Profile</span>
      </a>
    </li>
    <li class="rvt-menu__item">
      <a href="#" aria-current="page">
        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true">
          <path fill="currentColor"
            d="M14.57,12.06,13,9.7V6A5,5,0,0,0,3,6V9.7L1.43,12.06a1.25,1.25,0,0,0,1,1.94H6a2,2,0,0,0,4,0h3.53a1.25,1.25,0,0,0,1-1.94ZM8,12H3.87L5,10.3V6a3,3,0,0,1,6,0v4.3L12.13,12Z" />
        </svg>
        <span class="rvt-m-left-xs">Notifications</span>
      </a>
    </li>
    <li class="rvt-menu__item">
      <a href="#">
        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true">
          <path fill="currentColor"
            d="M12.29,2H12V1a1,1,0,0,0-2,0V2H6V1A1,1,0,0,0,4,1V2H3.71A2.78,2.78,0,0,0,1,4.83v7.33A2.78,2.78,0,0,0,3.71,15h8.57A2.78,2.78,0,0,0,15,12.17V4.83A2.78,2.78,0,0,0,12.29,2ZM3.71,4H4V5H6V4h4V5h2V4h.29a.78.78,0,0,1,.71.83V7H3V4.83A.78.78,0,0,1,3.71,4Zm8.57,9H3.71A.78.78,0,0,1,3,12.17V9H13v3.17A.78.78,0,0,1,12.29,13Z" />
        </svg>
        <span class="rvt-m-left-xs">Schedule</span>
      </a>
    </li>
    <li class="rvt-menu__item">
      <a href="#">
        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true">
          <path fill="currentColor"
            d="M13.94,8.78A6,6,0,0,0,14,8a6,6,0,0,0-.07-.9L15.73,6a7.94,7.94,0,0,0-.92-2.15l-2.06.52a6,6,0,0,0-1.2-1.18L12,1.1A7.94,7.94,0,0,0,9.87.23L8.78,2.06A6,6,0,0,0,8,2a6,6,0,0,0-.9.07L6,.27a7.94,7.94,0,0,0-2.15.92l.52,2.06a6,6,0,0,0-1.18,1.2L1.1,4A7.94,7.94,0,0,0,.23,6.13L2.06,7.22A6,6,0,0,0,2,8a6,6,0,0,0,.07.9L.27,10a7.94,7.94,0,0,0,.92,2.15l2.06-.52a6,6,0,0,0,1.2,1.18L4,14.9a7.94,7.94,0,0,0,2.17.87l1.09-1.83A6,6,0,0,0,8,14a6,6,0,0,0,.9-.07L10,15.73a7.94,7.94,0,0,0,2.15-.92l-.52-2.06a6,6,0,0,0,1.18-1.2L14.9,12a7.94,7.94,0,0,0,.87-2.17ZM8,11a3,3,0,1,1,3-3A3,3,0,0,1,8,11Z" />
        </svg>
        <span class="rvt-m-left-xs">Settings</span>
      </a>
    </li>
  </ul>
</nav>

Vertical menu

On wider screens, navigation links in a default menu component are arranged horizontally to fill the width of the menu’s container.

To force the menu to always display links vertically (such as when placed in a sidebar), use the .rvt-menu--vertical modifier class:

  • Item one
  • Item two
  • Item three
  • Item four
  • Item five
<nav class="rvt-menu rvt-menu--vertical" aria-label="Section navigation">
  <ul class="rvt-menu__list">
    <li class="rvt-menu__item">
      <a href="#" aria-current="page">Item one</a>
    </li>
    <li class="rvt-menu__item">
      <a href="#">Item two</a>
    </li>
    <li class="rvt-menu__item">
      <a href="#">Item three</a>
    </li>
    <li class="rvt-menu__item">
      <a href="#">Item four</a>
    </li>
    <li class="rvt-menu__item">
      <a href="#">Item five</a>
    </li>
  </ul>
</nav>

Horizontal menu

You can force a menu to always display links horizontally regardless of screen size with the .rvt-menu--horizontal modifier class:

  • Item one
  • Item two
  • Item three
  • Item four
  • Item five
<nav class="rvt-menu rvt-menu--horizontal" aria-label="Section navigation">
  <ul class="rvt-menu__list">
    <li class="rvt-menu__item">
      <a href="#" aria-current="page">Item one</a>
    </li>
    <li class="rvt-menu__item">
      <a href="#">Item two</a>
    </li>
    <li class="rvt-menu__item">
      <a href="#">Item three</a>
    </li>
    <li class="rvt-menu__item">
      <a href="#">Item four</a>
    </li>
    <li class="rvt-menu__item">
      <a href="#">Item five</a>
    </li>
  </ul>
</nav>

When to use

  • To allow users to move between pages in a specific subsection of your application

When to consider something else

  • For top-level navigation, use components like the header and breadcrumb navigation
  • For navigation between steps of a process that’s been split across multiple pages, use the step indicator
  • To allow users to switch between chunks of related content without having to leave the current page, use tabs

Implementation notes

  • Keep navigation labels short (1-2 words)

Accessibility notes

  • Add the aria-current="page" attribute to a navigation link to indicate the current page

On this page

    • Basic menu
      • Badges in menu items
      • Icons in menu items
    • Vertical menu
    • Horizontal menu
    • When to use
    • When to consider something else
    • Implementation notes
    • Accessibility notes
Have a question about Rivet?

We're happy to help! If you've found a bug, typo, or have a request, the best way to get in touch is to create an issue on Github.

For all other questions please feel free to email us at rivet@iu.edu

  • Accessibility
  • Privacy Notice
  • Copyright © The Trustees of Indiana University