Bootstrap: Adding dropdown menu in Tabs example with code
You may also add a dropdown menu in tabs of Bootstrap plug-in by using the dropdown class. In this tutorial, I will show you how you can add dropdown along with the custom look of the tabs of Bootstrap, including the dropdown menu.
In Bootstrap tabs tutorial, I showed you how simply you can create tabs by using a built-in plug-in in Bootstrap framework.
To add a dropdown menu, you simply need to use a few dropdown related classes as shown in the demo below.
See online demo and code
I presumed that you have included the libraries of Bootstrap JS and jQuery along with CSS in the <head> section of web page.
The tab is initiated by using a main <ul> that refers the nav nav-tabs Bootstrap CSS class.
|
1 |
<ul class="nav nav-tabs" role="tablist"> |
This is followed by <li> items that use the data-toggle=”tab”. The first four tabs are created simply that are Home, Java, C# and MySQL.
The next tab is another <li> that refers the .dropdown class.
This is followed by an <a> tag that uses dropdown-toggle class along with data-toggle=”dropdown”:
After that, another <ul> tag is used to create its menu, so it is using the .dropdown-menu class.
The menu items in dropdpwn are created just like the first four tabs.
|
1 2 3 4 5 |
<li><a href="#jquerytab" role="tab" data-toggle="tab">jQuery</a></li> <li><a href="#bootstab" role="tab" data-toggle="tab">Bootstrap</a></li> <li><a href="#htmltab" role="tab" data-toggle="tab">HTML</a></li> |
And finally, the tab panes are created for these menu items. These are again just like the normal tabs e.g.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<div class="tab-pane" id="bootstab">Bootstrap Content here <ul> <li>Bootstrap forms</li> <li>Bootstrap buttons</li> <li>Bootstrap navbar</li> <li>Bootstrap footer</li> </ul> </div> |
That’s it, as for as dropdown menu in tabs is concerned.
The above example is using the default color scheme which is specified in the Bootstrap CSS. In order to customize the look of Bootstrap tabs along with the dropdown menu, you may either write your own classes and refer it in particular tags or simply override the CSS classes related to tabs with Bootstrap’s CSS.
In this demo, I am using the same classes in the <style> tag under <head> section to override the default CSS for tabs.
See online demo and code
To give it customized look and feel, I just overridden the default classes in the head section. Following classes are used:
- .nav-tabs
- .nav-tabs > li a
- .nav-tabs > li.active > a
- .nav-tabs > li > a:hover
- .tab-pane
You can see the complete code of HTML and CSS in the demo page along with its output here.