Bootstrap Navigation Elements

In this chapter, we will discuss the options provided by Bootstrap for defining navigation elements. They use the same markup and the base class .nav. Bootstrap also provides a helper class for sharing markup and states. By changing the modifier class, you can switch between different styles.

Tabbed Navigation or Tabs

To create a tabbed navigation menu:

• Start with an unordered list with the class .nav.
• Add the class .nav-tabs.

The following example demonstrates this:

Example

<p>Tabbed Navigation Menu</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>

The result is as follows:

Pill Navigation

Basic Pill Navigation

If you need to change the tabs to pill style, simply use the class .nav-pills instead of .nav-tabs, and follow the same steps as above.

The following example demonstrates this:

Example

<p>Basic Pill Navigation</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>

The result is as follows:

Vertical Pill Navigation

You can stack pills vertically by using the class .nav-stacked along with .nav and .nav-pills.

The following example demonstrates this:

Example

<p>Vertical Pill Navigation</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>

The result is as follows:

Justified Navigation

You can make tabbed or pill navigation elements span the full width of their parent element on screens wider than 768px by using the class .nav-justified along with .nav and either .nav-tabs or .nav-pills. On smaller screens, the navigation links will stack.

The following example demonstrates this:

Example

<p>Justified Navigation Elements</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>

The result is as follows:

Disabled Links

To disable a link in the navigation, add the class .disabled. For each .nav class, if the .disabled class is added, a gray link will be created, and the :hover state of the link will be disabled, as shown in the example below:

Example

<p>Disabled links in navigation elements</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>

The result is as follows:

>

Dropdown Menus

Navigation menus and dropdown menus use similar syntax. By default, the anchor of the list item works with some data attributes to trigger an unordered list with the .dropdown-menu class.

Tabs with Dropdown Menus

The steps to add a dropdown menu to tabs are as follows:

• Start with an unordered list with the .nav class.

• Add the .nav-tabs class.

• Add an unordered list with the .dropdown-menu class.

Example

<p>Tabs with dropdown menus</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>

The result is as follows:

Pills with Dropdown Menus

The steps are the same as creating tabs with dropdown menus, except you need to change the .nav-tabs class to .nav-pills, as shown in the example below:

Example

<p>Pills with dropdown menus</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="#">Separate Link</a></li>
</ul>
</li>
<li><a href="#">PHP</a></li>
</ul>