Bootstrap Dropdowns

Advertisements


This chapter will highlight about Bootstrap dropdown menus. Dropdown menus are toggleable, contextual menus for displaying links in a list format. This can be made interactive with the dropdown JavaScript plugin.

To use dropdown, just wrap the dropdown menu within the class .dropdown. Following example demonstrates a basic 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" 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>
Basic Dropdown Demo

Options

Alignment

Align the dropdown menu to right by adding the class .pull-right to .dropdown-menu. Following example demonstrates this:

<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="#">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>
Dropdown Align Right Demo

Headers

You can add a header to label sections of actions in any dropdown menu by using the class dropdown-header. Following example demonstrates this:

<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">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/Networking
         </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>
Dropdown Header Demo


Advertisements
Advertisements