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 #
<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>
<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>
<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>
<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" 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>
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
anddata-rvt-dropdown-menu
attribute values in your markup. Thedata-rvt-dropdown-toggle
attribute value must match thedata-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 #
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. |
aria-haspopup="menu" |
Added to the button element with the data-rvt-dropdown-toggle attribute by the component’s JavaScript if the dropdown contains button elements |
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 | — |