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.

Action Another action Something else here

label property is used to set the label of the drop down button.



Dropdown rendering modes

Action Another action Something else here Separated link Action Another action Something else here Separated link Action Another action Something else here Separated link Action Another action Something else here Separated link Action Another action Something else here Separated link Action Another action Something else here Separated link

style-mode attribute determines the style of the DropDown.



Material Bootstrap Split Button

Similarly, create split button dropdowns with virtually the same markup as single button dropdowns

Action Another action Something else here


Split Button rendering modes

Action Another action Something else here Separated link Action Another action Something else here Separated link Action Another action Something else here Separated link Action Another action Something else here Separated link Action Another action Something else here Separated link Action Another action Something else here Separated link


Sizing

Button dropdowns work with buttons of all sizes, including default and split dropdown buttons.

Action Another action Something else here Separated link

Action Another action Something else here Separated link

Action Another action Something else here Separated link

Action Another action Something else here Separated link

Similar to the other buttons the size-mode attribute determines the size of the component.


Directions


Dropup

Trigger dropdown menus above elements by adding changing the drop-down-position attribute to 'top' to the parent element.


Action Another action Something else here Separated link

Action Another action Something else here Separated link

Dropright


Trigger dropdown menus at the right of the elements by adding changing the drop-down-position property to 'right' to the parent element.


Action Another action Something else here Separated link

Action Another action Something else here Separated link

Dropleft

Trigger dropdown menus at the left of the elements by adding changing the drop-down-position property to 'left' to the parent element.


Action Another action Something else here Separated link

Action Another action Something else here Separated link

Menu items

Optionally you can use <button> elements in your dropdowns instead of just <a>'s.


Custom alignment

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.


Material Design


Action Another action Something else here Separated link Action Another action Something else here Separated link Action Another action Something else here Separated link Action Another action Something else here Separated link Action Another action Something else here Separated link Action Another action Something else here Separated link