# Dropdowns

Dropdowns are togglable contextual overlays for displaying lists of links. The Material Design menu component is closely related to the Bootstrap dropdown, which has been restyled using Material Design's specifications.

## Default Dropdowns

There have been some modifications to the default Bootstrap dropdown component in Material Admin Pro. The dropdown carets from Bootstrap have been disabled, and replaced with a Material Icon implementation of a dropdown arrow using the `.trailing-icon` class with the icon, along with the `.dropdown-caret` class. This causes the dropdown arrow to behave according to Materail Design's specifications.

The styling of the dropdown menu itself has also been restyled to match Materail Design.

## Dropdown Item Icons

Leading icons can be used in the dropdown items. To use an icon properly in this case, insert an Material Icon before the text within the `.dropdown-item` with the `.leading-icon` class.

## Dark Dropdowns

By adding the `.dropdown-menu-dark` class to the `.dropdown-menu` element, a dark effect can be acheived. The colors, icons, dividers, and text have all been restyled to match the dark theme.

For more usage examples of Bootstrap dropdowns, including menu alignment, button sizing, responsive menu options, and more, visit Bootstrap's dropdown documentation page.

### Related Links

Bootstrap Dropdowns Documentation

Bootstrap's dropdowns component documentation

Related Link arrow_upward