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="example-dropdown">
  <button type="button" class="rvt-button" data-rvt-dropdown-toggle>
    <span class="rvt-dropdown__toggle-text">Dropdown menu</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 class="rvt-dropdown__menu" data-rvt-dropdown-menu hidden>
    <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="example-dropdown">
  <button type="button" class="rvt-button" data-rvt-dropdown-toggle>
    <span class="rvt-dropdown__toggle-text">Right-aligned dropdown menu</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 class="rvt-dropdown__menu rvt-dropdown__menu--right" data-rvt-dropdown-menu hidden>
    <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="example-dropdown">
  <button type="button" class="rvt-button" data-rvt-dropdown-toggle>
    <span class="rvt-dropdown__toggle-text">Dropdown with heading</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 class="rvt-dropdown__menu" data-rvt-dropdown-menu hidden>
    <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="example-dropdown">
  <button type="button" class="rvt-button" data-rvt-dropdown-toggle>
    <span class="rvt-dropdown__toggle-text">Dropdown with buttons</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 class="rvt-dropdown__menu" data-rvt-dropdown-menu hidden>
    <button type="button">
      <span>Notify all</span>
    </button>
    <button type="button" aria-checked="true">
      <span>Notify admins</span>
    </button>
    <button type="button">
      <span>Notify contributors</span>
    </button>
    <div role="group" aria-label="Personal settings">
      <button type="button">
        <span>Dark mode</span>
      </button>
      <button type="button">
        <span>Sign out</span>
      </button>
    </div>
  </div>
</div>

Elements #

Element Description Usage Required Multiple
Toggle button Button that shows/hides the dropdown menu Limit toggle button text to a few words. Do not change the default downward-pointing arrow icon.

Toggle button is required

Component may contain only one Toggle button
Menu item Menu items that appear in the dropdown menu Limit menu item text to a few words

Menu item is required

Component may contain multiple Menu item

Usage #

  • Specifying toggle and menu IDs. By default, Rivet auto-generates toggle and menu IDs. If you’d like the toggle and menu to have a specific ID, you can explicitly set the data-rvt-dropdown-toggle and data-rvt-dropdown-menu attribute values in your markup. The data-rvt-dropdown-toggle attribute value must match the data-rvt-dropdown-menu attribute value.
  • 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

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

Accessibility #

  • Add ARIA attributes for application-style toolbars or context menus. Use the role="menu" and aria-haspopup="menu" attributes if your dropdown is functioning as an application-style toolbar or context menu. For more, visit the MDN documentation on the ARIA: menu role.

ARIA labels #

Label Description
aria-checked="true" If button elements are used as menu items, this attribute marks that menu item as enabled and highlights it visually
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-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.

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