Bootstrap Dropdowns (Dropdowns)
This chapter focuses on Bootstrap dropdowns. A dropdown menu is a toggleable context menu that displays links in a list format. This can be achieved through interaction with theDropdown JavaScript Pluginto implement.
To use a dropdown, simply add to the class.dropdownadd dropdown. The following example demonstrates a basic dropdown:
Example
<div class="dropdown">
<button type="button" class="btn dropdown-toggle" id="dropdownMenu1" data-toggle="dropdown">Theme<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
<li role="presentation">
<a role="menuitem" tabindex="-1" href="#">Java</a>
</li>
<li role="presentation">
<a role="menuitem" tabindex="-1" href="#">Data Mining</a>
</li>
<li role="presentation">
<a role="menuitem" tabindex="-1" href="#">Data Communication/Network</a>
</li>
<li role="presentation" class="divider"></li>
<li role="presentation">
<a role="menuitem" tabindex="-1" href="#">Separated link</a>
</li>
</ul>
</div>
Try it »
The result is shown below:
Options
Alignment
By adding.dropdown-menuthe class.pull-rightto right-align the dropdown menu. The following example demonstrates this:
Example
<div class="dropdown">
<button type="button" class="btn dropdown-toggle" id="dropdownMenu1" data-toggle="dropdown">Theme<span class="caret"></span>
</button>
<ul class="dropdown-menu pull-right" role="menu" aria-labelledby="dropdownMenu1">
<li role="presentation">
<a role="menuitem" tabindex="-1" href="#">Java</a>
</li>
<li role="presentation">
<a role="menuitem" tabindex="-1" href="#">Data Mining</a>
</li>
<li role="presentation">
<a role="menuitem" tabindex="-1" href="#">Data Communication/Network</a>
</li>
<li role="presentation" class="divider"></li>
<li role="presentation">
<a role="menuitem" tabindex="-1" href="#">Separated link</a>
</li>
</ul>
</div>
Try it »
The result is shown below:
Header
You can use the classdropdown-headerto add a header to the label area of the dropdown menu. The following example demonstrates this:
Example
<div class="dropdown">
<button type="button" class="btn dropdown-toggle" id="dropdownMenu1" data-toggle="dropdown">Theme<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
<li role="presentation" class="dropdown-header">Dropdown header</li>
<li role="presentation">
<a role="menuitem" tabindex="-1" href="#">Java</a>
</li>
<li role="presentation">
<a role="menuitem" tabindex="-1" href="#">Data Mining</a>
</li>
<li role="presentation">
<a role="menuitem" tabindex="-1" href="#">Data Communication/Network</a>
</li>
<li role="presentation" class="divider"></li>
<li role="presentation" class="dropdown-header">Dropdown header</li>
<li role="presentation">
<a role="menuitem" tabindex="-1" href="#">Separated link</a>
</li>
</ul>
</div>
Try it »
The result is shown below:
More Examples
| Class | Description | Example |
|---|---|---|
| .dropdown | Specify the dropdown, all dropdowns are wrapped in .dropdown | Try it |
| .dropdown-menu | Create a dropdown | Try it |
| .dropdown-menu-right | Right-align dropdown menu | Try it |
| .dropdown-header | Add a header in the dropdown menu | Try it |
| .dropup | Specify an upward dropdown menu | Try it |
| .disabled | Disabled items in dropdown menu | Try it |
| .divider | Dividers in dropdown menu | Try it |