Bootstrap Navigation Elements

Bootstrap is offering a small number of different options for styling navigation elements. This tutorial is all about that we will discuss here briefly. Bootstrap have shared markup, starting with the base .nav class. Bootstrap also offers a helper class, to share markup and states. Swap modifier classes to switch between each style.

Tabular Navigation or Tabs

To make a tabbed navigation menu follow these steps:

• 
  

  Start by an essential unordered list with the base class of .nav

  
  


• 
  

  Then put the class .nav-tabs.

  
  

<p>Tabs Example</p>
<ul class="nav nav-tabs">
 <li class="active"><a href="#">Home</a></li>
 <li><a href="#">SVN</a></li>
 <li><a href="#">iOS</a></li>
 <li><a href="#">VB.Net</a></li>
 <li><a href="#">Java</a></li>
 <li><a href="#">PHP</a></li>
</ul>

Demo

Pills Navigation

Basic pills

To change your tabs into pills, follow the same steps as above and use the class .nav-pills instead of .nav-tabs. Same like this following example code.

<p>Pills Example</p>
<ul class="nav nav-pills">
 <li class="active"><a href="#">Home</a></li>
 <li><a href="#">SVN</a></li>
 <li><a href="#">iOS</a></li>
 <li><a href="#">VB.Net</a></li>
 <li><a href="#">Java</a></li>
 <li><a href="#">PHP</a></li>
</ul>

Demo

Verticle Pills

You can make the pills vertically by using this class .nav-stacked next to the classes .nav, .nav-pills. Following vertical pills example demonstrates this:

<p>Vertical Pills Example</p>
<ul class="nav nav-pills nav-stacked">
 <li class="active"><a href="#">Home</a></li>
 <li><a href="#">SVN</a></li>
 <li><a href="#">iOS</a></li>
 <li><a href="#">VB.Net</a></li>
 <li><a href="#">Java</a></li>
 <li><a href="#">PHP</a></li>
</ul>

Demo

Justified Nav

You can easily create tabs or pills equal widths of their parent at screens wider than 768px using class .nav-justified along with .nav, .nav-tabs or .nav, .nav-pills respectively. On smaller screens, the nav links are stacked.

<p>Justified Nav Elements Example</p>
<ul class="nav nav-pills nav-justified">
 <li class="active"><a href="#">Home</a></li>
 <li><a href="#">SVN</a></li>
 <li><a href="#">iOS</a></li>
 <li><a href="#">VB.Net</a></li>
 <li><a href="#">Java</a></li>
 <li><a href="#">PHP</a></li>
</ul><br><br><br>

<ul class="nav nav-tabs nav-justified">
 <li class="active"><a href="#">Home</a></li>
 <li><a href="#">SVN</a></li>
 <li><a href="#">iOS</a></li>
 <li><a href="#">VB.Net</a></li>
 <li><a href="#">Java</a></li>
 <li><a href="#">PHP</a></li>
</ul>

Demo

Disabled Links

For any of nav component like tabs or pills, if you add the .disabled, this will make gray links and remove the hover effects as shown in the following example.

<p>Disabled Link Example</p>
<ul class="nav nav-pills">
 <li class="active"><a href="#">Home</a></li>
 <li><a href="#">SVN</a></li>
 <li class="disabled"><a href="#">iOS(disabled link)</a></li>
 <li><a href="#">VB.Net</a></li>
 <li><a href="#">Java</a></li>
 <li><a href="#">PHP</a></li>
</ul><br><br>

<ul class="nav nav-tabs">
 <li class="active"><a href="#">Home</a></li>
 <li><a href="#">SVN</a></li>
 <li><a href="#">iOS</a></li>
 <li class="disabled"><a href="#">VB.Net(disabled link)</a></li>
 <li><a href="#">Java</a></li>
 <li><a href="#">PHP</a></li>
</ul>	

Demo

This class will only change the <a>’s appearance, not its functionality. Use custom JavaScript to disable links here.

Dropdowns

Navigation menus share with dropdown menus a related code of syntax. By default a list item has an anchor working in combination of some data-attributes to trigger that list with a .dropdown-menu class.

Tabs with Dropdowns

Follow these steps to add dropdowns with tab:

• 
  

  Start by an essential unordered list with the base class of .nav

  
  


• 
  

  Then put the class .nav-tabs.

  
  


• 
  

  Add one more an unordered list with a .dropdown-menu class.

  
  

<p>Tabs With Dropdown Example</p>
<ul class="nav nav-tabs">
 <li class="active"><a href="#">Home</a></li>
 <li><a href="#">SVN</a></li>
 <li><a href="#">iOS</a></li>
 <li><a href="#">VB.Net</a></li>
 <li class="dropdown">
 <a class="dropdown-toggle" data-toggle="dropdown" href="#">
 Java <span class="caret"></span>
 </a>
 <ul class="dropdown-menu">
 <li><a href="#">Swing</a></li>
 <li><a href="#">jMeter</a></li>
 <li><a href="#">EJB</a></li>
 <li class="divider"></li>
 <li><a href="#">Separated link</a></li>
 </ul>
 </li>
 <li><a href="#">PHP</a></li>
</ul>

Demo

Pills with Dropdowns

If you want to do same thing like above with pills there is simple way, swap the .nav-tabs class with .nav-pills as shown in the following example.

<p>Pills With Dropdown Example</p>
<ul class="nav nav-pills">
 <li class="active"><a href="#">Home</a></li>
 <li><a href="#">SVN</a></li>
 <li><a href="#">iOS</a></li>
 <li><a href="#">VB.Net</a></li>
 <li class="dropdown">
 <a class="dropdown-toggle" data-toggle="dropdown" href="#">
 Java <span class="caret"></span>
 </a>
 <ul class="dropdown-menu">
 <li><a href="#">Swing</a></li>
 <li><a href="#">jMeter</a></li>
 <li><a href="#">EJB</a></li>
 <li class="divider"></li>
 <li><a href="#">Separated link</a></li>
 </ul>
 </li>
 <li><a href="#">PHP</a></li>
</ul>

Demo

Bootstrap Navigation Elements