Subscribe via RSS Feed

Bootstrap Dropdown Menu

May 23, 2014 1 Comment

Bootstrap dropdown menus are toggleable, contextual menus for displaying links in a list format. To use dropdown, just wrap the dropdown menu within the class .dropdown. Following example demonstrates a basic dropdown menu. In this set of code we are trying to make a dropdown where we have several options under project menu.

Below all the codes have been used in a plunker bootstrap basic template.

Let us see a set of codes for basic dropdown box.

<div class="dropdown"> 
 <button type="button" class="btn dropdown-toggle" id="dropdownMenu1" 
 data-toggle="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="#">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/Networking 
 </a> 
 </li> 
 <li role="presentation" class="divider"></li> 
 <li role="presentation"> 
 <a role="menuitem" tabindex="-1" href="#">Separated link</a> 
 </li> 
 </ul> 
</div> 

We are also able to add different viewing options to this Bootstrap dropdown box like defining the alignment of the box for popping out or giving a header. Let us look at the codes below.

Allignment:
At first we are going to see using allignment. Using allignment we can determine the position where the dropdown list will be popping out. Align the dropdown menu to right by adding the class .pull-right to .dropdown-menu.

 <div class="dropdown"> 
 <button type="button" class="btn dropdown-toggle" id="dropdownMenu1" 
 data-toggle="dropdown">Topics 
 <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="#">Bootstrap</a> 
 </li> 
 <li role="presentation"> 
 <a role="menuitem" tabindex="-1" href="#"> 
 Angularjs
 </a> 
 </li> 
 <li role="presentation" class="divider"></li> 
 <li role="presentation"> 
 <a role="menuitem" tabindex="-1" href="#">Separated link</a> 
 </li> 
 </ul> 
</div> 

Headers:
Next option is using a header in every section of the list. we can add a header to label sections of actions in any dropdown menu by using the classdropdown-header.

div class="dropdown"> 
 <button type="button" class="btn dropdown-toggle" id="dropdownMenu1" 
 data-toggle="dropdown"> 
 Topics 
 <span class="caret"></span> 
 </button> 
 <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1"> 
 <li role="presentation" class="dropdown-header">Scripting Language</li> 
 <li role="presentation" > 
 <a role="menuitem" tabindex="-1" href="#">Javascript</a> 
 </li> 
 <li role="presentation"> 
 <a role="menuitem" tabindex="-1" href="#">Angularjs</a> 
 </li> 
 <li role="presentation"> 
 <a role="menuitem" tabindex="-1" href="#"> 
 Backbonejs
 </a> 
 </li> 
 <li role="presentation" class="divider"></li> 
 <li role="presentation" class="dropdown-header">Relative Topics</li> 
 <li role="presentation"> 
 <a role="menuitem" tabindex="-1" href="#">Java</a> 
 </li> 
 </ul> 
</div> 

other useful links:
1>Bootstrap Grid System
2>Bootstrap Nav-bar
3>Working with scrollspy in bootstrap
4>Bootstrap list-group
5>Dropdown buttons in Bootstrap

If you find this article helpful, you can connect us in Google+ and Twitter.

Enter your email address:

Delivered by FeedBurner

Sign Up to read the rest of the content

Email will be used only for updates of our site

No Thanks