@@include('_includes/_page-loader.html') @@include('_includes/_header/_header.html') @@include('_includes/_sidebar.html', { "group": "components", "link": "dropdowns" }) @@include('_includes/_theme-switch.html')

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

@@include('_includes/_page-actions.html')

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.

Trigger by non-button elements

Dropdown can also be used with `<a>`, `<span>` or any other tags.

Disabled

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

Disabled menu item

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

Menu alignment

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

Dropdown menu can be triggered in any of the four directions by using dropdown helper classes.

Menu contents

In addition to the links, dropdown menu can also have other contents such as text, dividers, forms etc.

@@include('_includes/_footer.html')

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.