Skip to main content
Rivet Design System Indiana University

Dropdown

Present a list of options that can be shown or hidden with a button

Overview #

Use the dropdown component to present the user with a list of options that can be shown or hidden with a button.

Examples #


Open in new window
Copy link to example 
<div class="rvt-dropdown" data-rvt-dropdown="dropdownDefault">
  <button type="button" class="rvt-button rvt-button" data-rvt-dropdown-toggle="dropdownDefault" aria-haspopup="true" aria-expanded="false">
    <span class="rvt-dropdown__toggle-text">Dropdown menu</span>
    <svg fill="currentColor" width="16" height="16" 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"></path></svg>
  </button>
  <div class="rvt-dropdown__menu" id="dropdownDefault" hidden data-rvt-dropdown-menu>
    <a href="#">Item one</a>
    <a href="#" aria-current="page">Item two</a>
    <a href="#">Item three</a>
  </div>
</div>
Open in new window
Copy link to example 
<div class="rvt-dropdown" data-rvt-dropdown="dropdownRight">
  <button type="button" class="rvt-button" data-rvt-dropdown-toggle="dropdownRight" aria-haspopup="true" aria-expanded="false">
    <span class="rvt-dropdown__toggle-text">Right-aligned dropdown menu</span>
    <svg fill="currentColor" width="16" height="16" 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"></path></svg>
  </button>
  <div class="rvt-dropdown__menu rvt-dropdown__menu--right" id="dropdownRight" hidden data-rvt-dropdown-menu>
    <a href="#">Item one</a>
    <a href="#" aria-current="page">Item two</a>
    <a href="#">Item three</a>
  </div>
</div>
Open in new window
Copy link to example 
<div class="rvt-dropdown" data-rvt-dropdown="dropdownHeading">
  <button type="button" class="rvt-button" data-rvt-dropdown-toggle="dropdownHeading" aria-haspopup="true" aria-expanded="false">
    <span class="rvt-dropdown__toggle-text">Dropdown with heading</span>
    <svg fill="currentColor" width="16" height="16" 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"></path></svg>
  </button>
  <div class="rvt-dropdown__menu" id="dropdownHeading" hidden data-rvt-dropdown-menu>
    <a href="#">Item one</a>
    <a href="#" aria-current="page">Item two</a>
    <a href="#">Item three</a>
    <div class="rvt-dropdown__menu-heading" aria-hidden="true">Group name</div>
    <div role="group" aria-label="Group name">
      <a href="#">Item four</a>
      <a href="#">Item five</a>
    </div>
  </div>
</div>
Open in new window
Copy link to example 
<div class="rvt-dropdown" data-rvt-dropdown="dropdownButtons">
  <button type="button" class="rvt-button" data-rvt-dropdown-toggle="dropdownButtons" aria-haspopup="true" aria-expanded="false">
    <span class="rvt-dropdown__toggle-text">Dropdown with buttons</span>
    <svg fill="currentColor" width="16" height="16" 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"></path></svg>
  </button>
  <div class="rvt-dropdown__menu" id="dropdownButtons" role="menu" hidden data-rvt-dropdown-menu>
    <button type="button" role="menuitemradio">
      <span>Notify all</span>
    </button>
    <button type="button" aria-checked="true" role="menuitemradio">
      <span>Notify admins</span>
    </button>
    <button type="button" role="menuitemradio">
      <span>Notify contributors</span>
    </button>
    <div role="group" aria-label="Personal settings">
      <button type="button" role="menuitem">
        <span>Dark mode</span>
      </button>
      <button type="button" role="menuitem">
        <span>Sign out</span>
      </button>
    </div>
  </div>
</div>

Usage #

  • Use a dropdown with links for navigation menus. When using a dropdown to present the user with a list of pages they can navigate to, use a elements as the menu items rather than buttons. Most of the code examples on this page use links for menu items.
  • Use a dropdown with buttons for application menus. When using a dropdown to present the user with a list of actions they can take or settings they can toggle, use button elements as the menu items rather than links. See the “Dropdown with buttons” code example on this page for guidance.

Do

  • Use to present a list of pages the user can navigate to
  • Use to present a menu of actions the user can take or settings they can toggle
  • Keep dropdown text concise
  • Limit the number of items to 10 or fewer

Don't

  • Use as a form field—use a select input instead
  • Choose dropdown button colors for purely aesthetic reasons—use the color variant that matches the situation
  • Replace the arrow with another icon

Accessibility #

ARIA labels #

Label Description
aria-expanded Added to the button element with the data-rvt-dropdown-toggle attribute by the component’s JavaScript. Set to true if the dropdown menu is open; false otherwise.
aria-current="page" If a elements are used as menu items, this attribute marks that menu item as the current page and highlights it visually
aria-checked="true" If button elements are used as menu items, this attribute marks that menu item as enabled and highlights it visually

Keyboard navigation #

Keys Description
enter or space If focus is on the dropdown button, open the dropdown menu. If the dropdown menu is open, close it.
tab Move focus to the next focusable element
shift + tab Move focus to the previous focusable element
↓down Move focus to the next menu item. If focus is on the last item, do nothing or move focus to the first item.
↑up Move focus to the previous menu item. If focus is on the first item, do nothing or move focus to the last item.
escape If focus is on a menu item, close the dropdown menu and move focus to the button.

JavaScript #

Method Description
open() Opens the dropdown
close() Closes the dropdown
Event Description Detail object properties
rvtDropdownOpened Emitted when a dropdown is opened —
rvtDropdownClosed Emitted when a dropdown is closed —

Learn more about using Rivet JavaScript