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.

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