---
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="20rem"
```
## Dropdown divider
Use dropdown dividers to separate groups of dropdown items for greater clarity.
```html example code height="20rem"
```
## Active state
Make a dropdown item look active, so that it highlights when a user hovers over a given option.
```html example code height="20rem"
```
## 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="20rem"
```
## Dropdown header
Add a dropdown header to group dropdown items into sections and name them accordingly.
```html code example height="20rem"
```
## 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="20rem"
```
## Dropdown with arrow
Add an arrow that points at the dropdown button.
```html code example height="20rem"
```
## 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="20rem"
```
## 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="20rem"
```
## Dark dropdown
Make your dropdown suit the dark mode of your website or software.
```html code example height="20rem"
```
## 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"
```
