## Material Bootstrap Dropdowns

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