# Dropdown
> A dropdown is a menu that opens from a button or a link and holds options or actions, so the toolbar stays short.
Build dropdown menus that reveal lists of options or actions. Add icons, dividers, and custom triggers to keep the interface clean.
Source: https://docs.tabler.io/ui/components/dropdown
---
## Default dropdown
Any `.btn` becomes a dropdown toggle with `data-bs-toggle="dropdown"` and a `.dropdown-menu` next to it. The classes below add dividers, headers, icons and other details to the menu.
```html
```
## Dropdown with card content
A menu can hold [card](/ui/components/card) content, such as a short profile or a summary, when a plain list isn't enough.
```html
```
## Multi-column menu
A long menu can be split into columns instead of scrolling. Wrap the items in `dropdown-menu-columns`, then group them into `dropdown-menu-column` elements - one per column.
```html
```
## JavaScript
Tabler automatically initializes all elements with `data-bs-toggle="dropdown"` on page load. This is the code that runs:
```ts
const dropdownTriggerList: HTMLElement[] = [].slice.call(document.querySelectorAll('[data-bs-toggle="dropdown"]'))
dropdownTriggerList.map(function (dropdownTriggerEl: HTMLElement) {
const options = {
boundary: dropdownTriggerEl.getAttribute('data-bs-boundary') === 'viewport' ? document.documentElement : 'clippingParents',
}
return new Dropdown(dropdownTriggerEl, options)
})
```
_Source: `core/js/src/dropdown.ts`_
## Accessibility
- The trigger must be a `button`, or an `a` with an `href`. Bootstrap toggles `aria-expanded` on it for you, so do not set it by hand.
- Bootstrap moves focus into the menu and supports the arrow keys, Home, End and Escape. That only works while the items are `.dropdown-item` elements inside `.dropdown-menu`.
- An icon-only trigger needs an `aria-label`. The caret is decorative and carries no name.
- A dropdown used as a menu of actions should hold `button` items; one used for navigation should hold links. Mixing them makes the keyboard behavior inconsistent.
- Use `.dropdown-header` for a group title and `.dropdown-divider` for a separator, rather than styling a plain item to look like one.
## SCSS variables
Use these SCSS variables to customize dropdowns. The default values are:
```scss
$dropdown-min-width: 11rem;
$dropdown-padding-x: 0;
$dropdown-padding-y: 0.25rem;
$dropdown-spacer: 1px;
$dropdown-font-size: $font-size-base;
$dropdown-color: var(--body-color);
$dropdown-bg: var(--bg-surface);
$dropdown-border-color: var(--border-color-translucent);
$dropdown-border-radius: var(--border-radius);
$dropdown-border-width: var(--border-width);
$dropdown-inner-border-radius: calc(#{$dropdown-border-radius} - #{$dropdown-border-width}); // stylelint-disable-line function-disallowed-list
$dropdown-divider-bg: $dropdown-border-color;
$dropdown-divider-margin-y: var(--spacer-2);
$dropdown-box-shadow: var(--shadow-dropdown);
$dropdown-link-color: inherit;
$dropdown-link-hover-color: inherit;
$dropdown-link-hover-bg: $hover-bg;
$dropdown-link-active-color: var(--primary);
$dropdown-link-active-bg: var(--active-bg);
$dropdown-link-disabled-color: var(--tertiary-color);
$dropdown-item-padding-y: 0.5rem;
$dropdown-item-padding-x: 0.75rem;
$dropdown-header-color: $gray-600;
$dropdown-header-padding-x: $dropdown-item-padding-x;
$dropdown-header-padding-y: $dropdown-padding-y;
$dropdown-max-width: 25rem;
$dropdown-scrollable-height: 13rem;
$dropdown-item-gap: 0.5rem;
$dropdown-header-padding-bottom: 0.25rem;
$dropdown-menu-columns-gap: 0.25rem;
$dropdown-arrow-offset: 0.25rem;
$dropdown-arrow-inset: 0.75rem;
$dropdown-dropend-offset: 0.25rem;
$dropdown-menu-card-min-width: 20rem;
```
_Source: `core/scss/_variables.scss`_
