Bootstrap Dropdowns

Bootstrap is offering awesome dropdown menus. This can be ready interactive with the dropdown JavaScript plugin. Bootstrap Dropdowns menus are working with toggle functionality, contextual menus for showing links in a list format. This Tutorial will emphasize about Bootstrap dropdown menus.

This is simply can apply on any menu; just apply this class .dropdown on parent element of dropdown menu. Following example will show a basic dropdown menu.

<div class="dropdown">
 <button type="button" class="btn dropdown-toggle" id="dropdownMenu1" 
 data-toggle="dropdown">
 Dropdown Topics
 <span class="caret"></span>
 </button>
 <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
 <li role="presentation">
 <a role="menuitem" tabindex="-1" href="#">Dreamweaver</a>
 </li>
 <li role="presentation">
 <a role="menuitem" tabindex="-1" href="#">NetBeans</a>
 </li>
 <li role="presentation">
 <a role="menuitem" tabindex="-1" href="#">
 Sublime Text
 </a>
 </li>
 <li role="presentation" class="divider"></li>
 <li role="presentation">
 <a role="menuitem" tabindex="-1" href="#">Separated link</a>
 </li>
 </ul>
</div>

Demo

Alignment Option

For align of the dropdown menu to the right by adding the class .dropdown-menu-right to .dropdown-menu. Below mentioned example show that how its work.

<div class="dropdown">
 <button type="button" class="btn dropdown-toggle" id="dropdownMenu1" 
 data-toggle="dropdown">Dropdown Topics
 <span class="caret"></span>
 </button>
 <ul class="dropdown-menu dropdown-menu-right" role="menu" 
 aria-labelledby="dropdownMenu1">
 <li role="presentation">
 <a role="menuitem" tabindex="-1" href="#">Dreamweaver</a>
 </li>
 <li role="presentation">
 <a role="menuitem" tabindex="-1" href="#">NetBeans</a>
 </li>
 <li role="presentation">
 <a role="menuitem" tabindex="-1" href="#">
 Sublime Text
 </a>
 </li>
 <li role="presentation" class="divider"></li>
 <li role="presentation">
 <a role="menuitem" tabindex="-1" href="#">Separated link</a>
 </li>
 </ul>
</div>

Demo

Headers Option

By using this class .dropdown-header to label section of action in any dropdown menu you can add a header. Following example show this.

<div class="dropdown">
 <button type="button" class="btn dropdown-toggle" id="dropdownMenu1" 
 data-toggle="dropdown">
 Dropdown Topics
 <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="#">Dreamweaver</a>
 </li>
 <li role="presentation">
 <a role="menuitem" tabindex="-1" href="#">NetBeans</a>
 </li>
 <li role="presentation">
 <a role="menuitem" tabindex="-1" href="#">
 Sublime Text
 </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>

Demo

Bootstrap Dropdowns