Tab Dropdown Menu CSS Bootstrap

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.

<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>

Boostrap dropdown menu classes

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">"

• class .dropdown-item

  Style links inside the dropdown menu with proper padding etc

• Class .dropdown-menu

  Builds the dropdown menu

• .dropdown-menu-right

  Right-aligns a dropdown menu

• Class .dropdown-header

  Adds a header inside the dropdown menu

• Class .divider

  Separates items inside the dropdown menu with a horizontal line

You may be interested to know more about navigation tabs using bootstrap css.