Bootstrap Dropdown Plugin

Dropdown menus can be added within tabs or navigation bar or buttons and even within pills in bootstrap by using the dropdown plugins.

The dropdown plugin can be added into bootstrap individually by including the dropdown.js files. Dropdown plugin can also be added when we use bootstrap.js files.


Usage:

Dropdowns can be used to toggle the hidden content. A dropdown can be used in two different ways:


By using data attributes:

Dropdowns can be used by using data-toggle = “dropdown” inside a button or link element. Consider the following example in which it is demonstrated that how dropdown can be used:

CODE:

< div class = “dropdown” >

< a data- toggle = “dropdown” href = “#” > Dropdown < /a >

< ul class = “dropdown- menu” role = “menu” aria- labelledby = “dLabel” >

</ ul >

</ div >

You also have to use data-target = “#identifier” instead of href = “#” along with the attribute data-toggle. These are used when the browser does not support JavaScript. Consider the following lines of code in which we have done this:

CODE:

< div class = “dropdown” >

< a id = “dLabel” role = “button” data- toggle = “dropdown” data- target = “#” href = “/asd.html” >

Dropdown

< span class = “caret” ></ span >

</ a >

< ul class = “dropdown- menu” role = “menu” aria- labelledby = “dLabel” >

</ ul >

</ div >


By using JavaScript:

A single line of code of JavaScript can be used to call a specific dropdown. Consider the following statement:

$ (‘.dropdown- toggle’).dropdown ()


Example:

Consider the following example in which we have created dropdown within navigation bar:

CODE:

<! DOCTYPE html >

< html >

< head >

< title > Bootstrap Example </ title >

< link href = ” /bootstrap/ css / bootstrap. min. css” rel = “stylesheet” >

< script src = “/ scripts/ jquery. min. js” >< / script >

< script src = ” /bootstrap / js/ bootstrap. min. js ” ></ script >

</ head >

< body >

< nav class = “navbar navbar- default” role = “navigation” >

< div class = “navbar- header” >

< /div >

< div >

< ul class = “nav navbar- nav” >

< li class = “active” >< a > Java < /a ></ li >

< li >< a > C++ </ a ></ li >

< li class = “dropdown” >

< a href = “#” class = “dropdown- toggle” data- toggle = “dropdown” >

Python

< b class = “caret” >< /b >

</ a >

< ul class = “dropdown- menu” >

< li >< a > Modules < /a ></ li >

< li >< a > Loop </ a >< / li >

< li >< a > Operators </ a ></ li >

< /ul >

</ li >

</ ul >

</ div >

</ nav >

</ body >

< /html >

The above code will generate the following result:

OUTPUT:

navigation bar

Consider the following example in which we have created dropdown within tabs:

CODE:

<! DOCTYPE html >

< html >

< head >

< title > Bootstrap Example </ title >

< link href = ” / bootstrap/ css/ bootstrap. min. css ” rel = “stylesheet” >

< script src = ” / scripts/ jquery. min. js” ></ script >

< script src = “/ bootstrap/ js/ bootstrap. min. js ” ></ script >

</ head >

< body >

< center >< h4 > Tabs With Dropdown </ h4 ></ center >

< ul class = “nav nav- tabs” >

< li class = “active” >< a > Introduction </ a ></ li >

< li >< a > C++ </ a ></ li >

< li >< a > Java </ a >< /li >

< li >< a > Python </ a ></ li >

< li class = “dropdown” >

< a class = “dropdown- toggle” data- toggle = “dropdown” >

Ruby

< span class = “caret” >< / span >

</ a >

< ul class = “dropdown- menu” >

< li >< a > Operators </ a ></ li >

< li >< a > Loops </ a ></ li >

< li >< a > Modules </ a >< / li >

< /ul >

</ li >

< li >< a > PHP </ a ></ li >

</ ul >

< /body >

</ html >

The above code will generate the following result:

OUTPUT:

dropdown menu

Consider the following example in which we have created dropdown within pills:

CODE:

<! DOCTYPE html >

< html >

< head >

< title > Bootstrap Example </ title >

< link href = “/ bootstrap / css/ bootstrap. min. css ” rel = “stylesheet” >

< script src = ” / scripts/ jquery. min. js” ></ script >

< script src = ” / bootstrap/ js/ bootstrap. min. js” ></ script >

</ head >

< body >

< center >< h4 > Pills With Dropdown </ h4 ></ center >

< ul class = “nav nav- pills” >

< li class = “active” >< a > Introduction </ a ></ li >

< li >< a > C++ </ a ></ li >

< li >< a > Java < / a ></ li >

< li >< a > Matlab < /a ></ li >

< li class = “dropdown” >

< a class = “dropdown- toggle” data- toggle = “dropdown” >

Ruby <span class = “caret” ></ span >

</ a >

< ul class = “dropdown-menu” >

< li >< a > Operators </ a ></ li >

< li >< a > Loops < /a ></ li >

< li >< a > Modules < / a ></ li >

< /ul >

</ li >

< li >< a > Python </ a ></ li >

</ ul >

< /body >

</ html >

The above example will generate the following result:

OUTPUT:


dropdown

Options:

There are no options of dropdown plugins.


Methods:

We have one method for dropdowns that can be used to hide or to show the dropdown that is $().dropdown (‘toggle’)


Example:

Consider the following example in which the method of dropdown plugin is used:

CODE:

<! DOCTYPE html >

< html >

< head >

< meta name = “viewport” content = “width = device- width, initial- scale = 1” >

< link rel = “stylesheet” href = “https: //maxcdn. bootstrapcdn. com/ bootstrap /3.3.7/ css/ bootstrap. min. css” >

< script src = “https: //ajax. googleapis . com /ajax /libs /jquery /3.2.0 /jquery. min. js ” ></ script >

< script src = “https: //maxcdn . bootstrapcdn. com/ bootstrap /3.3.7 /js /bootstrap . min. js” ></ script >

</ head >

< body >

< nav class = “navbar navbar- default” role = “navigation” >

< div class = “navbar- header” >

< a class = “navbar- brand” href = “#” > Programming Languages </ a >

</ div >

< div id = “Example” >

< ul class = “nav navbar- nav” >

< li class = “active” >< a href = “#” > C++ </ a ></ li >

< li >< a href = “#” > Java </ a ></ li >

< li class = “dropdown” >

< a href = “#” class = “dropdown- toggle” > Python < b class = “caret” ></ b >

< /a >

< ul class = “dropdown- menu” >

< li >< a id = “action-1” href = “#” > Python Modules </ a ></ li >

< li >< a href = “#” > Python Operators < / a ></ li >

< li >< a href = “#” > Python Loops < /a ></ li >

</ ul >

</ li >

</ ul >

</ div >

</ nav >

< script >

$ (function (){

$ (“.dropdown-toggle”).dropdown (‘toggle’);

} );

</ script >

</ body >

</ html >

The above will generate the following result:

OUTPUT:

following result

In the above example we used the method of dropdown and it can be seen that the dropdown is shown automatically when the code is executed.