❮ Bootstrap V2 Tables Bootstrap V2 Dropdown Plugin ❯

Bootstrap Navigation

Introduction

In this tutorial, you will learn how to use the Bootstrap toolkit to create navigation based on tabs, pills, and other navigation styles.

We provide demonstration examples and related explanations, including: basic tab-based and pill-based navigation, stacked or vertical tab-based and pill-based navigation, dropdown menus for tabs and pills, stacked navigation using navigation lists, and clickable navigation (in different directions) created with JavaScript.

Basic Tabs

Two CSS classes, .nav and .nav-tabs, are used to create basic tab-based navigation. In Bootstrap version v2.0.1, the styles for the .nav class are declared from line 2176 to 2220 (including some related styles). Lines 2222 to 2267 contain the styles for .nav-tabs. The following example demonstrates how to create a basic tab-based navigation using Bootstrap.

Bootstrap Basic Tab-Based Navigation Example

Example

<div class="container">
    <div class="row">
        <div class="span6">
            <ul class="nav nav-tabs">
                <li class="active"><a href="#">Home</a></li>
                <li><a href="#">Tutorials</a></li>
                <li><a href="#">Practice Editor </a></li>
                <li><a href="#">Gallery</a></li>
                <li><a href="#">Contact</a></li>
            </ul>
        </div>
    </div>
</div>

Output

View Online

View the above example in a different browser window.

Basic Pills

Once you know how to create basic tab-based navigation with Bootstrap, creating basic pill-based navigation becomes very easy. Instead of using the .nav-tabs class, you use the .nav-pills class. The styles for .nav-pills are located at lines 2222 to 2224 in bootstrap.css, and are repeated from lines 2268 to 2280 (used in the last example).

The following example demonstrates how to create a basic pill-based navigation.

Bootstrap Basic Pill-Based Navigation Example

Example

<div class="container">
    <div class="row">
        <div class="span8">
            <ul class="nav nav-pills">
                <li class="active"><a href="#">Home</a></li>
                <li><a href="#">Tutorials</a></li>
                <li><a href="#">Practice Editor </a></li>
                <li><a href="#">Gallery</a></li>
                <li><a href="#">Contact</a></li>
            </ul>
        </div>
    </div>
</div>

Output

View Online

View the above example in a different browser window.

Stacked or Vertical Tabs

To create stacked or vertical tab-based navigation, you must add the .nav-stacked, .nav, and .nav-tabs classes to your markup, as the default is to create horizontal tab-based navigation. The styles for .nav-stacked are included from line 2281 to 2309. Below is an example.

Bootstrap Stacked or Vertical Tab-Based Navigation Example

Example

<div class="container">
    <div class="row">
        <div class="span8">
            <ul class="nav nav-tabs nav-stacked">
                <li class="active"><a href="#">Home</a></li>
                <li><a href="#">Tutorials</a></li>
                <li><a href="#">Practice Editor </a></li>
                <li><a href="#">Gallery</a></li>
                <li><a href="#">Contact</a></li>
            </ul>
        </div>
    </div>
</div>

Output

View Online

View the above example in a different browser window.

<ul class="nav nav-tabs nav-stacked">
    <li class="active"><a href="#">Home</a></li>
    <li><a href="#">Tutorials</a></li>
    <li><a href="#">Practice Editor</a></li>
    <li><a href="#">Gallery</a></li>
    <li><a href="#">Contact</a></li>
</ul>
</div>
</div>
</div>

Output

View Online

View the example above in a different browser window.

Stacked or Vertical Pills

Similar to creating stacked or vertical tabs, you need an additional CSS class to create stacked or vertical pill-based navigation. That is the .nav-stacked class, located at line numbers 2281 to 2309, which contains the styles for .nav-stacked. Here is an example.

Bootstrap Stacked or Vertical Pill-Based Navigation Example

Example

<div class="container">
    <div class="row">
        <div class="span2">
            <ul class="nav nav-pills nav-stacked">
                <li class="active"><a href="#">Home</a></li>
                <li><a href="#">Tutorials</a></li>
                <li><a href="#">Practice Editor</a></li>
                <li><a href="#">Gallery</a></li>
                <li><a href="#">Contact</a></li>
            </ul>
        </div>
    </div>
</div>

Output

View Online

View the example above in a different browser window.

Tab-Based Dropdowns

You can use Bootstrap to create tab-based dropdown navigation. There are four CSS classes - .dropdown, .dropdown-toggle, .dropdown-menu, and .caret, that you need, along with the .nav and .nav-tabs classes. In bootstrap.css (version 2.0.1), line numbers 1545 to 1547 contain the styles for the .dropdown class, line numbers 1548 to 1553 contain the styles for .dropdown-toggle, line numbers 1576 to 1632 contain the styles for .dropdown-menu, and line numbers 1554 to 1575 contain the styles for .caret. In the demo example, another CSS class .divider is also used, but it is not necessary.

Of course, you need to reference three JavaScript files in your HTML file - jquery.js, bootstrap-dropdown.js, and application.js. All of these are located in the docs/assets/js/ folder.

Here is an example.

Bootstrap Tab-Based Dropdown Navigation Example

Example

<!DOCTYPE html> 
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Bootstrap Tab-Based Dropdown Navigation Example</title>
    <meta name="description" content="Bootstrap Tab-Based Dropdown Navigation Example">
    <link href="../bootstrap/twitter-bootstrap-v2/docs/assets/css/bootstrap2.2.css" rel="stylesheet">

<style type="text/css">
    .container {
        margin-top: 200px;
    }
</style>
</head>
<body>
<div class="container">
    <div class="row">
        <div class="span6">
            <ul class="nav nav-tabs">
                <li class="active"><a href="#">Home</a></li>
                <li><a href="#">About</a></li>
                <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">FrontEnd<b class="caret"></b></a>
                    <ul class="dropdown-menu">
                        <li><a href="#">Twitter Bootstrap</a></li>
                        <li><a href="#">Google Plus API</a></li>
                        <li><a href="#">HTML5</a></li>
                        <li class="divider"></li>
                        <li><a href="#">Examples</a></li>
                    </ul>
                </li>
                <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">BackEnd<b class="caret bottom-up"></b></a>
                    <ul class="dropdown-menu bottom-up pull-right">
                        <li><a href="#">PHP</a></li>
                        <li><a href="#">MySQL</a></li>
                        <li><a href="#">PostgreSQL</a></li>
                        <li class="divider"></li>
                        <li><a href="#">Live Demos</a></li>
                    </ul>
                </li>
            </ul>
        </div>
    </div>
</div>
<script src="../bootstrap/twitter-bootstrap-v2/docs/assets/js/jquery.js"></script>
<script src="../bootstrap/twitter-bootstrap-v2/docs/assets/js/bootstrap-dropdown.js"></script>
<script src="../bootstrap/twitter-bootstrap-v2/docs/assets/js/application.js"></script>
</body>
</html>

Note: We added a separate style tag and referenced it within a small set of styles to create a 200-pixel top margin for the container, just for demonstration purposes. The data-toggle is a Bootstrap-specific attribute. Setting its value to "dropdown" creates a dropdown menu navigation.

Output

Tab-based Dropdown Menu: Creating markup and CSS for a dropdown menu based on capsule-style tabs is similar to creating a dropdown menu based on regular tabs. The only thing you need to do is replace the .nav-tabs class with the .nav-pills class. Below is an example.

Bootstrap Example of Navigation with Capsule-Style Tabs Dropdown Menu

Example

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Bootstrap Example of Navigation with Capsule-Style Tabs Dropdown Menu</title>
    <meta name="description" content="Bootstrap Example of Navigation with Capsule-Style Tabs Dropdown Menu">
    <link href="../bootstrap/twitter-bootstrap-v2/docs/assets/css/bootstrap2.2.css" rel="stylesheet">
    <style type="text/css">
        .container {
            margin-top: 200px;
        }
    </style>
</head>
<body>
<div class="container">
    <div class="row">
        <div class="span6">
            <ul class="nav nav-pills">
                <li class="active"><a href="#">Home</a></li>
                <li><a href="#">About</a></li>
                <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">FrontEnd<b class="caret"></b></a>
                    <ul class="dropdown-menu">
                        <li><a href="#">Twitter Bootstrap</a></li>
                        <li><a href="#">Google Plus API</a></li>
                        <li><a href="#">HTML5</a></li>
                        <li class="divider"></li>
                        <li><a href="#">Examples</a></li>
                    </ul>
                </li>
                <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">BackEnd<b class="caret bottom-up"></b></a>
                    <ul class="dropdown-menu bottom-up pull-right">
                        <li><a href="#">PHP</a></li>
                        <li><a href="#">MySQL</a></li>
                        <li><a href="#">PostgreSQL</a></li>
                        <li class="divider"></li>
                        <li><a href="#">Live Demos</a></li>
                    </ul>
                </li>
            </ul>
        </div>
    </div>
</div>
<script src="../bootstrap/twitter-bootstrap-v2/docs/assets/js/jquery.js"></script>
<script src="../bootstrap/twitter-bootstrap-v2/docs/assets/js/bootstrap-dropdown.js"></script>

<script src="../bootstrap/twitter-bootstrap-v2/docs/assets/js/application.js"></script>
</body>
</html>

Output

Pills-based Dropdown Navigation:

Pills-based Dropup Navigation:

View Online

View the above example in a different browser window.

Create Stacked Navigation with Optional Headers Using Navigation Lists

.nav-class can be used to create a stacked navigation suitable for a sidebar. You can add headers to a group of links, styling defined for .nav-list from line 2201 to 2221 in bootstrap.css (version 2.0.1). Below is an example.

Stacked Navigation Example with Navigation Lists

Example

<div class="container">
    <div class="row">
        <div class="span6">
            <ul class="nav nav-list">
                <li class="nav-header">List header</li>
                <li class="active"><a href="#">Home</a></li>
                <li><a href="#">Library</a></li>
                <li><a href="#">Applications</a></li>
                <li class="nav-header">Another list header</li>
                <li><a href="#">Profile</a></li>
                <li><a href="#">Settings</a></li>
                <li class="divider"></li>
                <li><a href="#">Help</a></li>
            </ul>
        </div>
    </div>
</div>

Output

View Online

View the above example in a different browser window.

Create Stacked Navigation with Icons Using Navigation Lists

Example

<div class="container">
    <div class="span6">
        <ul class="nav nav-list">
            <li class="nav-header">List header</li>
            <li class="active"><a href="#"><i class="icon-white icon-home"></i> Home</a></li>
            <li><a href="#"><i class="icon-book"></i> Library</a></li>
            <li><a href="#"><i class="icon-pencil"></i> Applications</a></li>
            <li class="nav-header">Another list header</li>
            <li><a href="#"><i class="icon-user"></i> Profile</a></li>
            <li><a href="#"><i class="icon-cog"></i> Settings</a></li>
            <li class="divider"></li>
            <li><a href="#"><i class="icon-flag"></i> Help</a></li>
        </ul>
    </div>
</div>

Output

View Online

View the above example in a different browser window.

Create Clickable Navigation Using JavaScript

You can create tabbed navigation by using Bootstrap's lightweight Jquery plugin and simple markup.

How to Create Clickable Navigation?

You need a CSS class named "tabbable" to act as a wrapper. Inside it, add the "nav" and "nav-tabs" classes to a "ul" element. Within it, create clickable areas using 'data-toggle="tab"' (applied to the relevant anchor elements). Then, create a div with the CSS class "tab-content", which contains some divs with the CSS class "tab-pane" to hold the actual content.

To make the clickable navigation work, you need to reference two JS files - jquery.js and bootstrap-tab.js. Both files are located in the docs/assets/js folder.

Below is an example demonstrating clickable navigation.

Example

<div class="container">
    <div class="row">
        <div class="span4">
            <div class="tabbable">
                <ul class="nav nav-tabs">
                    <li class="active"><a href="#1" data-toggle="tab">Section 1</a></li>
                    <li class=""><a href="#2" data-toggle="tab">Section 2</a></li>
                    <li class=""><a href="#3" data-toggle="tab">Section 3</a></li>
                </ul>
                <div class="tab-content">
                    <div class="tab-pane active" id="1">
                        <p>You are watching section 1.</p>
                    </div>
                    <div class="tab-pane" id="2">
                        <p>You are watching Section 2.</p>
                    </div>
                    <div class="tab-pane" id="3">
                        <p>You are watching Section 3.</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Click here to download all the HTML, CSS, JS, and image files used in this tutorial.

❮ Bootstrap V2 Tables Bootstrap V2 Dropdown Plugin ❯