Bootstrap - Dropdown Plugin

Using Dropdown plugin you can add dropdown menus to any components pke navbars, tabs, pills and buttons.

If you want to include this plugin functionapty inspanidually, then you will need dropdown.js. Else, as mentioned in the chapter Bootstrap Plugins Overview, you can include bootstrap.js or the minified bootstrap.min.js.

Usage

You can toggle the dropdown plugin s hidden content −

Via data attributes − Add data-toggle = "dropdown" to a pnk or button to toggle a dropdown as shown below −

<span class = "dropdown">
   <a data-toggle = "dropdown" href = "#">Dropdown trigger</a>
   
   <ul class = "dropdown-menu" role = "menu" aria-labelledby = "dLabel">
      ...
   </ul>
	
</span>

If you need to keep pnks intact (which is useful if the browser is not enabpng JavaScript), use the data-target attribute instead of href = "#"−

<span class = "dropdown">
   <a id = "dLabel" role = "button" data-toggle = "dropdown" data-target = "#" href = "/page.html">
      Dropdown 
      <span class = "caret"></span>
   </a>
   
   <ul class = "dropdown-menu" role = "menu" aria-labelledby = "dLabel">
      ...
   </ul>
	
</span>

Via JavaScript − To call the dropdown toggle via JavaScript, use the following method −

$( .dropdown-toggle ).dropdown()

Example

Within Navbar

The following example demonstrates the usage of dropdown menu within a navbar −

<nav class = "navbar navbar-default" role = "navigation">

   <span class = "navbar-header">
      <a class = "navbar-brand" href = "#">TutorialsPoint</a>
   </span>
   
   <span>
      <ul class = "nav navbar-nav">
         <p class = "active"><a href = "#">iOS</a></p>
         <p><a href = "#">SVN</a></p>
         
         <p class = "dropdown">
            <a href = "#" class = "dropdown-toggle" data-toggle = "dropdown">
               Java 
               <b class="caret"></b>
            </a>
            
            <ul class = "dropdown-menu">
               <p><a href = "#">jmeter</a></p>
               <p><a href = "#">EJB</a></p>
               <p><a href = "#">Jasper Report</a></p>
               
               <p class = "spanider"></p>
               <p><a href = "#">Separated pnk</a></p>
               
               <p class = "spanider"></p>
               <p><a href = "#">One more separated pnk</a></p>
            </ul>
            
         </p>
      </ul>
   </span>
   
</nav>