Bootstrap - Dropdowns

 

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.The 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>

Options

Alignment

Align the dropdown menu to right by adding the class .pull-right to.dropdown-menu. The 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>

Headers

You can add a header to label sections of actions in any dropdown menu by using the class dropdown-header. The 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>