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

Refresh Manage Widgets Settings

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.
Action Another Action Something else here Separated link
Action Another Action Something else here Separated link

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.
I'm an <a> tag!
Action Another Action Something else here Separated link
I'm an <span> tag!
Action Another Action Something else here Separated link
Action Another Action Something else here Separated link

Disabled

Use disabled attribute on data-toggle="dropdown" to disable the toggle.
Action Another Action Something else here Separated link
Action Another Action Something else here Separated link

Disabled menu item

Add .disabled to items in the dropdown to style them as disabled.
Action Another Action Something else here Separated link

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.
Action Another Action Something else here Separated link
Action Another Action Something else here Separated link

Directions

Dropdown menu can be triggered in any of the four directions by using dropdown helper classes.
Action Another Action Something else here Separated link
Action Another Action Something else here Separated link
Action Another Action Something else here Separated link

Menu contents

In addition to the links, dropdown menu can also have other contents such as text, dividers, forms etc.
Dropdown header
Action Another Action Something tooo long here! Separated link
Action Another Action Something tooo long here!
Separated link
Nulla vitae elit libero, a pharetra augue. Cras mattis consectetur purus sit amet fermentum. Etiam porta sem malesuada magna mollis euismod.