Dropdowns

Dropdowns are toggleable, contextual overlays for displaying lists of links and more. They’re made interactive with the included dropdown directives.

Single button dropdowns

Any single `.btn`can be turned into a dropdown toggle with some markup changes. Here’s how you can put them to work with either `<button>`elements.

Split button dropdowns

Create split button dropdowns with virtually the same markup as single button dropdowns, but with the addition of `.dropdown-toggle-split`for proper spacing around the dropdown caret.

Disabled

Use `disabled`attribute on `data-toggle="dropdown"`to disable the toggle.

Alignments

By default, a dropdown menu is automatically positioned 100% from the top and along the left side of its parent. Add class `.dropdown-menu-right`to a `dropdownMenu`to right align the dropdown menu.

Directions

Trigger dropdown menus in any side by adding respective parent classes.

Active and Disabled menu item stats

Add `.active`to items in the dropdown to style them as active or add `.disabled`to items in the dropdown to style them as disabled.

Menu content