package.docs.components.dropdowns.mdx Maven / Gradle / Ivy
Go to download
Show more of this group Show more artifacts with this name
Show all versions of core Show documentation
Show all versions of core Show documentation
Premium and Open Source dashboard template with responsive and high quality UI.
The newest version!
---
title: Dropdowns
description: 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.
bootstrapLink: components/dropdowns
---
## 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.
```html example code height="16rem"
```
## Dropdown divider
Use dropdown dividers to separate groups of dropdown items for greater clarity.
```html example code height="16rem"
```
## Active state
Make a dropdown item look active, so that it highlights when a user hovers over a given option.
```html example code height="16rem"
```
## Disabled state
Make a dropdown item look disabled to display options which are currently not available but can activate once certain conditions are met.
```html code example height="16rem"
```
## Dropdown header
Add a dropdown header to group dropdown items into sections and name them accordingly.
```html code example height="16rem"
```
## Dropdown with icons
Use icons in your dropdowns to add more visual content and make the options easy to identify for users.
```html code example height="16rem"
```
## Dropdown with arrow
Add an arrow that points at the dropdown button.
```html code example height="16rem"
```
## Dropdown with badge
Add a badge to your dropdown items to show additional information related to an item or distinguish it from other elements.
```html code example height="16rem"
```
## 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.
```html code example height="16rem"
```
## Dark dropdown
Make your dropdown suit the dark mode of your website or software.
```html code example height="16rem"
```
## 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.
```html example height="35rem"
Open dropdown
How do you know she is a witch?
Are you suggesting that coconuts migrate? No, no, no! Yes, yes. A bit. But she's got a wart. You ...
Maryjo Lebarree
3 days ago
```