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 #
Choose an example
Default dropdown Dropdown with right-aligned menu Dropdown with grouped options and headings Dropdown with buttons
< 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>
< 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>
< 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>
< 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.
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
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