Bootstrap Navigation Elements

Bootstrap Navigation Elements

In this chapter we will discuss about how 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.

Following example demonstrates this:

<p>Tabs Example</p>

<ul class="nav nav-tabs">

   <li class="active"><ahref="#">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.

Following example demonstrates this:

<p>Pills Example</p>

<ul class="nav nav-pills">

   <li class="active"><ahref="#">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>

Verticle Pills

You can stack the pills vertically using the class.nav-stacked alongwith classes .nav, .nav-pills.

Following example demonstrates this:

<p>Vertical Pills Example</p>

<ul class="nav nav-pills nav-stacked">

   <li class="active"><ahref="#">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 equal widths of their parent at screens wider than 768px using class.nav-justified alongwith .nav, .nav-tabs or.nav, .nav-pills respectively. On smaller screens, the nav links are stacked.

Following example demonstrates this:

<p>Justified Nav Elements Example</p>

<ul class="nav nav-pills nav-justified">

   <li class="active"><ahref="#">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"><ahref="#">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"><ahref="#">Home</a></li>

   <li><a href="#">SVN</a></li>

   <li class="disabled"><ahref="#">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"><ahref="#">Home</a></li>

   <li><a href="#">SVN</a></li>

   <li><a href="#">iOS</a></li>

   <li  class="disabled"><ahref="#">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 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"><ahref="#">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"><ahref="#">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>