---
title: Dropdown
summary: A dropdown is used to display a list of options or include more items in a menu without overwhelming users with too many buttons and long lists. It improves interaction with your website or software and keeps the interface clear.
description: Organize options with a dropdown menu.
layout: '@layouts/DocsMdxLayout.astro'
---
import Example from '@components/Example.astro';
import CodeDocs from '@components/CodeDocs.astro';
## 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.
## JavaScript
Tabler automatically initializes all elements with `data-bs-toggle="dropdown"` on page load. This is the code that runs:
## SCSS variables
Use these SCSS variables to customize dropdowns. The default values are:
