Bootstrap/docs/components/dropdowns.md

layout	title
page	Dropdowns

Toggleable, contextual menu for displaying lists of links. Made interactive with the [dropdown JavaScript plugin]({{ site.bsaeurl }}javascript/#dropdowns).

Example

Wrap the dropdown's trigger and the dropdown menu within .dropdown, or another element that declares position: relative;. Then add the menu's HTML.

{% example html %}

Dropdown

• Action
• Another action
• Something else here

{% endexample %}

Alignment

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

May require additional positioning

Dropdowns are automatically positioned via CSS within the normal flow of the document. This means dropdowns may be cropped by parents with certain overflow properties or appear out of bounds of the viewport. Address these issues on your own as they arise.

{% highlight html %}

...

{% endhighlight %}

Menu headers

Add a header to label sections of actions in any dropdown menu.

{% example html %}

• Dropdown header
• Action
• Another action

{% endexample %}

Menu dividers

Separate groups of related menu items with a divider.

{% example html %}

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

{% endexample %}

Disabled menu items

Add .disabled to a <li> in the dropdown to disable the link.

{% example html %}

• Regular link
• Disabled link
• Another link

{% endexample %}