Hello folks! welcome back to a new edition of our tutorial on Bootstrap. In this section of our tutorial on Bootstrap, we will discuss about the Bootstrap Dropdown Plugin.
By using Dropdown plugin you can include dropdown menus to any components such as navbars, tabs, pills and buttons.
By using Dropdown plugin you can include dropdown menus to any components such as navbars, tabs, pills and buttons.
If you want to add this bootstrap plugin functionality individually, you will need dropdown.js. Otherwise, as mentioned in the tutorial Bootstrap Plugins Overview, you can add bootstrap.js or the manified bootstrap.min.js.
Usage
You can toggle the dropdown plugin's hidden content -
- Using data attributes - Add data-toggle = "dropdown" to a link or button to toggle a dropdown as shown below -
<div class = "dropdown"> <a data-toggle = "dropdown" href = "#">Dropdown trigger</a> <ul class = "dropdown-menu" role = "menu" aria-labelledby = "dLabel"> ... </ul> </div>
- If you need to keep links intact (which is useful if the browser is not enabling JavaScript), make use of data-target attribute instead of href = "#" -
<div 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> </div>
- Via JavaScript - To call the dropdown toggle via JavaScript, make use of the following method -
$('.dropdown-toggle').dropdown()
READ: Bootstrap | Modal Plugin
Within Navbar
Example
The following example below illustrates the usage of dropdown menu within a navbar -
<nav class = "navbar navbar-default" role = "navigation"> <div class = "navbar-header"> <a class = "navbar-brand" href = "#">WebDesignTutorialz</a> </div> <div> <ul class = "nav navbar-nav"> <li class = "active"><a href = "#">iOS</a></li> <li><a href = "#">SVN</a></li> <li class = "dropdown"> <a href = "#" class = "dropdown-toggle" data-toggle = "dropdown"> Java <b class="caret"></b> </a> <ul class = "dropdown-menu"> <li><a href = "#">jmeter</a></li> <li><a href = "#">EJB</a></li> <li><a href = "#">Jasper Report</a></li> <li class = "divider"></li> <li><a href = "#">Separated link</a></li> <li class = "divider"></li> <li><a href = "#">One more separated link</a></li> </ul> </li> </ul> </div> </nav>
Output
When the above example is executed, it will produce the following result -
Within Tabs
Example
The following example illustrates the usage of dropdown menu within tabs -
<p>Tabs With Dropdown Example</p> <ul class = "nav nav-tabs"> <li class = "active"><a href = "#">Home</a></li> <li><a href = "#">SVN</a></li> <li><a href = "#">iOS</a></li> <li><a href = "#">VB.Net</a></li> <li class = "dropdown"> <a class = "dropdown-toggle" data-toggle = "dropdown" href = "#"> Java <span class = "caret"></span> </a> <ul class = "dropdown-menu"> <li><a href = "#">Swing</a></li> <li><a href = "#">jMeter</a></li> <li><a href = "#">EJB</a></li> <li class = "divider"></li> <li><a href = "#">Separated link</a></li> </ul> </li> <li><a href = "#">PHP</a></li> </ul>
Output
When the above example is executed, it will produce the following result -
Options
There are no options
Methods
The dropdown toggle has a simple method to show or hide the dropdown.
$().dropdown('toggle')
Example
The following example illustrates the usage of dropdown plugin method -
<nav class = "navbar navbar-default" role = "navigation"> <div class = "navbar-header"> <a class = "navbar-brand" href = "#">WebDesignTutorialz</a> </div> <div id = "myexample"> <ul class = "nav navbar-nav"> <li class = "active"><a href = "#">iOS</a></li> <li><a href = "#">SVN</a></li> <li class = "dropdown"> <a href = "#" class = "dropdown-toggle">Java <b class = "caret"></b></a> <ul class = "dropdown-menu"> <li><a id = "action-1" href = "#">jmeter</a></li> <li><a href = "#">EJB</a></li> <li><a href = "#">Jasper Report</a></li> <li class = "divider"></li> <li><a href = "#">Separated link</a></li> <li class = "divider"></li> <li><a href = "#">One more separated link</a></li> </ul> </li> </ul> </div> </nav> <script> $(function(){ $(".dropdown-toggle").dropdown('toggle'); }); </script>
Output
When the above example is executed, it will produce the following result -
READ: Bootstrap | Wells
Alright guys! This is where we are going to be rounding up for this tutorial. In our next tutorial guide, we are going to be studying about the Bootstrap Scrollspy Plugin.
Feel free to ask your questions where necessary and we will attend to them as soon as possible. If this tutorial was helpful to you, you can use the share button to share this tutorial.
Follow us on our various social media platforms to stay updated with our latest tutorials. You can also subscribe to our newsletter in order to get our tutorials delivered directly to your emails.
Thanks for reading and bye for now.
Feel free to ask your questions where necessary and we will attend to them as soon as possible. If this tutorial was helpful to you, you can use the share button to share this tutorial.
Follow us on our various social media platforms to stay updated with our latest tutorials. You can also subscribe to our newsletter in order to get our tutorials delivered directly to your emails.
Thanks for reading and bye for now.