Dropdowns
Use dropdowns to display lists of options or include more positions in a menu without overwhelming users with too many buttons and long lists. Dropdowns facilitate users' interaction with your website or software and make your design look clear.
Default dropdown
With small markup changes, you can turn any .btn into a dropdown toggle and use it to display more options for users to choose from. Start with the default dropdown and then use additional classes to make your dropdown more user-friendly.
Dropdown divider
Use dropdown dividers to separate groups of dropdown items for greater clarity.
Active state
Make a dropdown item look active, so that it highlights when a user hovers over a given option.
Disabled state
Make a dropdown item look disabled to display options which are currently not available but can activate once certain conditions are met.
Dropdown header
Add a dropdown header to group dropdown items into sections and name them accordingly.
Dropdown with icons
Use icons in your dropdowns to add more visual content and make the options easy to identify for users.
Dropdown with arrow
Add an arrow that points at the dropdown button.
Dropdown with badge
Add a badge to your dropdown items to show additional information related to an item or distinguish it from other elements.
Dropdown with checkboxes
Use dropdowns with checkboxes to allow users to select options from a predefined list. Dropdowns with checkboxes are particularly useful for filtering.
Dark dropdown
Make your dropdown suit the dark mode of your website or software.
Dropdown with card content
Use a dropdown with card content to make it easy for users to get more information on a given subject and avoid ovewhelming them with too much content at once.
