Dropdowns are toggleable, contextual overlays for displaying lists of links and more. They’re toggled by clicking, not by hovering; this is an intentional design decision. Dropdowns are built using the Smart Framework's DropDownPositioning API, which provides dynamic positioning and viewport detection. No additional references are required since the API is part of the base class smart.element.js.
Smart.Core’s dropdowns are designed to be generic and applicable to a variety of situations and markup structures. For instance, it is possible to create dropdowns that contain additional inputs and form controls, such as search fields or login forms. However, Material Bootstrap does add built-in support for most standard keyboard menu interactions, such as the ability to move through individual .dropdown-item elements using the cursor keys and close the menu with the ESC key.
In order for a DropDown item to visually appear as an item it is neccessary to add the class .dropdown-item.
label property is used to set the label of the drop down button.
style-mode attribute determines the style of the DropDown.
Similarly, create split button dropdowns with virtually the same markup as single button dropdowns
Button dropdowns work with buttons of all sizes, including default and split dropdown buttons.
Similar to the other buttons the size-mode attribute determines the size of the component.
Trigger dropdown menus above elements by adding changing the drop-down-position attribute to 'top' to the parent element.
Trigger dropdown menus at the right of the elements by adding changing the drop-down-position property to 'right' to the parent element.
Trigger dropdown menus at the left of the elements by adding changing the drop-down-position property to 'left' to the parent element.
Optionally you can use <button> elements in your dropdowns instead of just <a>'s.
If you want to use custom positioning instead of the dynamic, create a callback and pass it to the customDropDownPositionCallback property.
To align right the dropdown menu with the given breakpoint or larger, add .dropdown-menu{-sm|-md|-lg|-xl}-right to the drop down.
To align left the dropdown menu with the given breakpoint or larger, add .dropdown-menu-right and .dropdown-menu{-sm|-md|-lg|-xl}-left to the drop down.