We have discussed simple Tabs and Pills in the previous chapter, now lets see dropdowns with them.
The main objective of this article is to learn Nav tabs and Pills with Dropdowns and Icons, Disabling the Nav element and Stacked Navs.
Tabs and Pills with Dropdown menus makes good attraction and easy surfing to the users. Lets see them briefly below
Creating Tabs and Pills with Dropdowns
Setting Dropdown for Tab or Pill elements is quite easy in Bootstrap. Lets see the below code snippet to make yourself easy to understand.
<ul class="nav nav-tabs">
<li class="active"><a href="#">Home</a></li>
<li class="dropdown">
<a href="#" data-toggle="dropdown" class="dropdown-toggle">Gallery <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">Photos</a></li>
<li><a href="#">Music</a></li>
<li><a href="#">Video</a></li>
<li class="divider"></li>
<li><a href="#">Settings</a></li>
</ul>
</li>
<li><a href="#">Bookmarks</a></li>
<li><a href="#">Notifications</a></li>
<li><a href="#">Tags</a></li>
<li><a href="#">Settings</a></li>
</ul>
Run the above code in your browser and you will see the following output,
Now, change the class of ul
in the above code to nav-pills
like below.
<ul class="nav nav-pills">
<li class="active"><a href="#">Home</a></li>
<li class="dropdown">
<a href="#" data-toggle="dropdown" class="dropdown-toggle">Gallery <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">Photos</a></li>
<li><a href="#">Music</a></li>
<li><a href="#">Video</a></li>
<li class="divider"></li>
<li><a href="#">Settings</a></li>
</ul>
</li>
<li><a href="#">Bookmarks</a></li>
<li><a href="#">Notifications</a></li>
<li><a href="#">Tags</a></li>
<li><a href="#">Settings</a></li>
</ul>
Output of the above code will gives the Pill nav with dropdown elements
Creating Tabs and Pills with Icons and Dropdowns
Lets set some Bootstrap Icons to the elements. Below example explains how to set Icons to each element.
<ul class="nav nav-tabs">
<li class="active"><a href="#"><span class="glyphicon glyphicon-home"></span> Home</a></li>
<li class="dropdown">
<a href="#" data-toggle="dropdown" class="dropdown-toggle"><span class="glyphicon glyphicon-film"></span> Gallery<b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#"><span class="glyphicon glyphicon-picture"></span> Images</a></li>
<li><a href="#"><span class="glyphicon glyphicon-music"></span> Music</a></li>
<li><a href="#"><span class="glyphicon glyphicon-facetime-video"></span> Video</a></li>
<li class="divider"></li>
<li><a href="#"><span class="glyphicon glyphicon-wrench"></span> Settings</a></li>
</ul>
</li>
<li><a href="#"><span class="glyphicon glyphicon-bookmark"></span> Bookmarks</a></li>
<li><a href="#"><span class="glyphicon glyphicon-globe"></span> Notifications</a></li>
<li><a href="#"><span class="glyphicon glyphicon-tags"></span> Tags</a></li>
<li><a href="#"><span class="glyphicon glyphicon-cog"></span> Settings</a></li>
</ul>
In the above code, we have used Glyphicons of Twitter Bootstrap to the Nav elements. Output of the above snip will be,

For the Pills type Nav(change the ul
class),
<ul class="nav nav-pills">
<li class="active"><a href="#"><span class="glyphicon glyphicon-home"></span> Home</a></li>
<li class="dropdown">
<a href="#" data-toggle="dropdown" class="dropdown-toggle"><span class="glyphicon glyphicon-film"></span> Gallery<b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#"><span class="glyphicon glyphicon-picture"></span> Images</a></li>
<li><a href="#"><span class="glyphicon glyphicon-music"></span> Music</a></li>
<li><a href="#"><span class="glyphicon glyphicon-facetime-video"></span> Video</a></li>
<li class="divider"></li>
<li><a href="#"><span class="glyphicon glyphicon-wrench"></span> Settings</a></li>
</ul>
</li>
<li><a href="#"><span class="glyphicon glyphicon-bookmark"></span> Bookmarks</a></li>
<li><a href="#"><span class="glyphicon glyphicon-globe"></span> Notifications</a></li>
<li><a href="#"><span class="glyphicon glyphicon-tags"></span> Tags</a></li>
<li><a href="#"><span class="glyphicon glyphicon-cog"></span> Settings</a></li>
</ul>
Check out the above code in your browser and you will find the following result

Creating Stacked Tabs and Pills with Icons and Dropdowns
Adding nav-stacked
to the ul
class will do the job.
For Stacked Tab, See the below example
<ul class="nav nav-tabs nav-stacked">
<li class="active"><a href="#"><span class="glyphicon glyphicon-home"></span> Home</a></li>
<li class="dropdown">
<a href="#" data-toggle="dropdown" class="dropdown-toggle"><span class="glyphicon glyphicon-film"></span> Gallery<b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#"><span class="glyphicon glyphicon-picture"></span> Images</a></li>
<li><a href="#"><span class="glyphicon glyphicon-music"></span> Music</a></li>
<li><a href="#"><span class="glyphicon glyphicon-facetime-video"></span> Video</a></li>
<li class="divider"></li>
<li><a href="#"><span class="glyphicon glyphicon-wrench"></span> Settings</a></li>
</ul>
</li>
<li><a href="#"><span class="glyphicon glyphicon-bookmark"></span> Bookmarks</a></li>
<li><a href="#"><span class="glyphicon glyphicon-globe"></span> Notifications</a></li>
<li><a href="#"><span class="glyphicon glyphicon-tags"></span> Tags</a></li>
<li><a href="#"><span class="glyphicon glyphicon-cog"></span> Settings</a></li>
</ul>
Output of the above code will be,

For Stacked Pills, Go through below code(changing ul
class)
<ul class="nav nav-pills nav-stacked">
<li class="active"><a href="#"><span class="glyphicon glyphicon-home"></span> Home</a></li>
<li class="dropdown">
<a href="#" data-toggle="dropdown" class="dropdown-toggle"><span class="glyphicon glyphicon-film"></span> Gallery<b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#"><span class="glyphicon glyphicon-picture"></span> Images</a></li>
<li><a href="#"><span class="glyphicon glyphicon-music"></span> Music</a></li>
<li><a href="#"><span class="glyphicon glyphicon-facetime-video"></span> Video</a></li>
<li class="divider"></li>
<li><a href="#"><span class="glyphicon glyphicon-wrench"></span> Settings</a></li>
</ul>
</li>
<li><a href="#"><span class="glyphicon glyphicon-bookmark"></span> Bookmarks</a></li>
<li><a href="#"><span class="glyphicon glyphicon-globe"></span> Notifications</a></li>
<li><a href="#"><span class="glyphicon glyphicon-tags"></span> Tags</a></li>
<li><a href="#"><span class="glyphicon glyphicon-cog"></span> Settings</a></li>
</ul>
Output of the above code will be,

Disabling links in the Nav components
Inorder to disable links of any Nav
components, Bootstrap provides disabled
class. Check the below example,
<ul class="nav nav-pills">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">User</a></li>
<li><a href="#">Settings</a></li>
<li class="disabled"><a href="#">Admin</a></li>
</ul>
In the above code, we have given
disabled
class to the Admin element. See the code in the browser
Conclusion
In this article, we have seen different Tabs and Pills of Nav elements with dropdowns as well as icons and also Disabling elements, stacked Navs. Hope you understand. If you have any doubts or confusions in this topic, please let me know by posting in the comment section below.
Thanks for reading.