Bootstrap - Navigation Elements

 

Bootstrap provides a few different options for styling navigation elements. All of them share the same markup and base class, .nav. Bootstrap also provides a helper class, to share markup and states. Swap modifier classes to switch between each style.

Tabular Navigation or Tabs

To create a tabbed navigation menu −

·        Start with a basic unordered list with the base class of .nav

·        Add class .nav-tabs.

The following example demonstrates this −

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

Pills Navigation

Basic Pills

To turn the tabs into pills, follow the same steps as above, use the class .nav-pills instead of .nav-tabs.

The following example demonstrates this −

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

Vertical Pills

You can stack the pills vertically using the class .nav-stacked along with the classes − .nav, .nav-pills.

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

Justified Nav

You can make tabs or pills of equal widths as 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.

The following example demonstrates this −

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

Disabled Links

For each of the .nav classes, if you add the .disabled class, it will create a gray link that also disables the :hover state 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>  

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

Dropdowns

Navigation menus share a similar syntax with dropdown menus. By default, you have a list item that has an anchor working in conjunction with some data-attributes to trigger an unordered list with a .dropdown-menu class.

Tabs with Dropdowns

To add dropdowns to tab −

·        Start with a basic unordered list with the base class of .nav

·        Add the class .nav-tabs.

·        Now add 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>

Pills with Dropdowns

To do the same thing with pills, simply 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>