Tab is very useful when you want to display many functionalities in one screen and also want to maintain clean segmentation for each section.
This tab dropdown menu is very useful if you want to give tab look and feel, in drop down you can setup sub menu items, using bootstrap you almost need not to write any additional code for Tab and drop down list, every class is ready to use.
Here is an example of how to use Tab Dropdown Menu using Bootstrap css class
<ul class="nav nav-tabs"> <li class="active"><a href="#">Home</a></li> <li class="dropdown"> <a class="dropdown-toggle" data-toggle="dropdown" href="#">Professional Courses <span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="#">Asp.net MVC</a></li> <li><a href="#">C# Development</a></li> <li><a href="#">SQL Database</a></li> </ul> </li> <li><a href="#">Consulting</a></li> <li><a href="#">One to One</a></li> </ul>
Now if you notice there are all ready bootstrap classes, for creating tab just need to
add "<ul class="nav nav-tabs">
". for dropdown you need to add "<ul class="dropdown-menu">
"
.dropdown-item
Style links inside the dropdown menu with proper padding etc
.dropdown-menu
Builds the dropdown menu
.dropdown-menu-right
Right-aligns a dropdown menu
.dropdown-header
Adds a header inside the dropdown menu
.divider
Separates items inside the dropdown menu with a horizontal line
You may be interested to know more about navigation tabs using bootstrap css.