< Bootstrap Tutorial

Bootstrap navigation elements

← Previous Next →


Bootstrap Navigation Elements

Bootstrap provides an easy and quick way to create basic nav components like tabs and pills which are very flexible and elegant. All the Bootstrap's nav components—tabs and pills—share the same base markup and styles through the base .nav class. Bootstrap also provides a helper class, to share markup and states. Swap modifier classes to switch between each style.

Tabular Navigation

To create a tabbed navigation menu start with a basic unordered list with the base class of .nav and add class .nav-tabs.

The following code demonstrates how to do this:

<ul class="nav nav-tabs">
    <li class="active"><a href="#">Home</a></li>
    <li><a href="#">Profile</a></li>
    <li><a href="#">Messages</a></li>
</ul>

The result is like this:

We can also add icons to the tabs using glyhicons as shown in the following example:

<ul class="nav nav-tabs">
    <li class="active"><a href="#"><span class="glyphicon glyphicon-home"></span>  Home</a></li>
    <li><a href="#"><span class="glyphicon glyphicon-user"></span> Profile</a></li>
    <li><a href="#"><span class="glyphicon glyphicon-envelope"></span> Messages</a></li>
</ul>

This produces the following result:

Pills Navigation

  • Basic Pills - We can create a basic pill based navigation using the base class .nav-pills instead of .nav-tabs, without any further change in markup. 
    The following example demonstrates this: 
    <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>

    This produces the following output:

  • Vertical Pills - We can stack the pills vertically using the class .nav-stacked along with the classes − .nav, .nav-pills.
    The following example demonstrates how to do this:
    <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 output will look like this:

 

← Previous Next →