Use a button dropdown to display a styled list of actions.
Button dropdowns
Menu sizes
The button dropdown menus come in three sizes or widths. They are triggered by the dropdown button which comes in all the same styles and sizes as the Button component.
Usage examples
User experience
The Button dropdown is a highly configurable component and is useful if space is at a premium. Triggered on click/tap it can hold links, switches, checkboxes etc. Sub headings can also be used to separate content in the dropdown.
Use a button dropdown as a way for your user to choose from a list of actions.
Although a button dropdown saves on screen space it does mean the action you want the user to perform is hidden behind an interaction ie a button dropdown. Where possible, surface actions and choices at the page or screen level for discoverability and faster completion of tasks.
Visual design
The button used to trigger the button dropdown menu can use any of the styles or sizes available within the Button component.
Where is this available?
The GEL design System will always have the latest component versions and additions, however new components and changes to existing components may roll out to other platforms at different times.
Platform | Status |
---|---|
GEL Design System | Available |
Mesh UI | Available |
Legacy WDP | Available |