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's dropdowns component documentation