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.

Bootstrap Tab Dropdown Menu CSS

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

Boostrap dropdown menu classes

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

Bootstrap Examples | Join CSS Course