Dropdowns
A dropdown menu shows the user a list of grouped
options on a container on top of the current screen, from which he can
select one or several.
Use Cases
- When a list has multiple items that the user is able to choose from.
- When this lists is populating a screen along with other form components, lists, or dropdowns.
- When, due to business needs or content load, a list of options must make the most of reduced space on-screen.
Label
Label
HTML
How to use the dropdowns
- Import the dropdown.js file into your project
- For this component, The .dropdown-toggle must have the attribute data-bs-toggle="dropdown".
Do's & Dont's
Amount of options vs space
The dropdown is a component that allows hiding long lists of
options, saving on-screen space.
However, there are some cases in which is more convenient for our users to have the content visible all the time. Consider this when taking decisions on which component to use on a layout.
However, there are some cases in which is more convenient for our users to have the content visible all the time. Consider this when taking decisions on which component to use on a layout.
Group items contextually
Dropdown labels indicate the category of options listed on them.
It is important to keep the content coherent, for our users to easily understand the context of the decisions they are taking.
It is important to keep the content coherent, for our users to easily understand the context of the decisions they are taking.
Group items, not actions
Even though a dropdown supports multiselection, search or simple
selection, but this will only apply to a list of items.
It is not advised to use a dropdown to show actions or other type of interactive controls (like switches, text fields, buttons, etc.)
It is not advised to use a dropdown to show actions or other type of interactive controls (like switches, text fields, buttons, etc.)
Alternative and Related components
