Sign in


Sign up


Bootstrap Navs

Bootstrap navs is a class which can transform a list of items into navigation components or Tabs/Pills. Navs helps to build more advanced components.

Examples of Bootstrap navs use:

  • Vertical or horizontal menu
  • Tabs navigation menu
  • Pills navigation menu

See the following Bootstrap navs examples:


Basic example

                
<ul class="nav grey lighten-4 py-4">
    <li class="nav-item">
        <a class="nav-link active" href="#!">Active</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="#!">Link</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="#!">Link</a>
    </li>
    <li class="nav-item">
        <a class="nav-link disabled" href="#!">Disabled</a>
    </li>
</ul>
                
            

Navs without unordered list

                
<nav class="nav grey lighten-4 py-4">
    <a class="nav-link active" href="#">Active</a>
    <a class="nav-link" href="#">Link</a>
    <a class="nav-link" href="#">Link</a>
    <a class="nav-link disabled" href="#">Disabled</a>
</nav>
                
            

Navs centered with flexbox

                
<ul class="nav justify-content-center grey lighten-4 py-4">
    <li class="nav-item">
        <a class="nav-link active" href="#!">Active</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="#!">Link</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="#!">Link</a>
    </li>
    <li class="nav-item">
        <a class="nav-link disabled" href="#!">Disabled</a>
    </li>
</ul>
                
            

Navs right-aligned with flexbox

                
<ul class="nav justify-content-end grey lighten-4 py-4">
    <li class="nav-item">
        <a class="nav-link active" href="#!">Active</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="#!">Link</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="#!">Link</a>
    </li>
    <li class="nav-item">
        <a class="nav-link disabled" href="#!">Disabled</a>
    </li>
</ul>
                
            

Navs with vertical direction

                
<ul class="nav flex-column grey lighten-4 py-4">
    <li class="nav-item">
        <a class="nav-link active" href="#!">Active</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="#!">Link</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="#!">Link</a>
    </li>
    <li class="nav-item">
        <a class="nav-link disabled" href="#!">Disabled</a>
    </li>
</ul>
                
            

Navs vertical without unordered list

                
<nav class="nav flex-column blue lighten-5 py-4">
    <a class="nav-link active" href="#">Active</a>
    <a class="nav-link" href="#">Link</a>
    <a class="nav-link" href="#">Link</a>
    <a class="nav-link disabled" href="#">Disabled</a>
</nav>
                
            

Navs with bold font

                
<!-- Grid row -->
<div class="row">

    <!-- Grid column -->
    <div class="col-md-6">

        <nav class="nav flex-column grey lighten-4 py-4 font-bold">
            <a class="nav-link active" href="#">Active</a>
            <a class="nav-link" href="#">Link</a>
            <a class="nav-link" href="#">Link</a>
            <a class="nav-link disabled" href="#">Disabled</a>
        </nav>

    </div>
    <!-- Grid column -->

    <!-- Grid column -->
    <div class="col-md-6">

        <ul class="nav grey lighten-4 py-4 font-bold">
            <li class="nav-item">
                <a class="nav-link active" href="#!">Active</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#!">Link</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#!">Link</a>
            </li>
            <li class="nav-item">
                <a class="nav-link disabled" href="#!">Disabled</a>
            </li>
        </ul>

    </div>
    <!-- Grid column -->

</div>
<!-- Grid row -->
                
            

Navs with various font and background color

Info notification

MDB has hundreds of colors to use within navs. Take a look here to know all the possibilities.

                
.nav a.white-text:hover {
    color: #e0e0e0!important;
}
.nav a.dark-grey-text:hover {
    color: #78909c!important;
}
.nav a.indigo-text:hover {
    color: #7986cb!important;
}
                
            
                
<!-- Grid row -->
<div class="row">

    <!-- Grid column -->
    <div class="col-md-4">

        <nav class="nav flex-column pink lighten-3 py-4 mb-r font-bold z-depth-1">
            <a class="nav-link active white-text" href="#">Active</a>
            <a class="nav-link white-text" href="#">Link 1</a>
            <a class="nav-link white-text" href="#">Link 2</a>
            <a class="nav-link white-text" href="#">Link 3</a>
        </nav>

    </div>
    <!-- Grid column -->

    <!-- Grid column -->
    <div class="col-md-4">

        <nav class="nav flex-column amber lighten-3 py-4 mb-r font-bold z-depth-1">
            <a class="nav-link active dark-grey-text" href="#">Active</a>
            <a class="nav-link dark-grey-text" href="#">Link 1</a>
            <a class="nav-link dark-grey-text" href="#">Link 2</a>
            <a class="nav-link dark-grey-text" href="#">Link 3</a>
        </nav>

    </div>
    <!-- Grid column -->

    <!-- Grid column -->
    <div class="col-md-4">

        <nav class="nav flex-column cyan lighten-3 py-4 mb-r font-bold z-depth-1">
            <a class="nav-link active indigo-text" href="#">Active</a>
            <a class="nav-link indigo-text" href="#">Link 1</a>
            <a class="nav-link indigo-text" href="#">Link 2</a>
            <a class="nav-link indigo-text" href="#">Link 3</a>
        </nav>

    </div>
    <!-- Grid column -->

</div>
<!-- Grid row -->
                
            

Navs with gradient background MDB Pro component

                
.nav a.white-text:hover {
    color: #e0e0e0!important;
}
                
            
                
<!-- Grid row -->
<div class="row">

    <!-- Grid column -->
    <div class="col-md-6">
        
        <ul class="nav peach-gradient lighten-3 py-4 mb-r font-bold z-depth-1">
            <li class="nav-item">
                <a class="nav-link active white-text" href="#!">Active</a>
            </li>
            <li class="nav-item">
                <a class="nav-link white-text" href="#!">Link</a>
            </li>
            <li class="nav-item">
                <a class="nav-link white-text" href="#!">Link</a>
            </li>
            <li class="nav-item">
                <a class="nav-link white-text" href="#!">Link</a>
            </li>
        </ul>

        <ul class="nav purple-gradient py-4 mb-r font-bold z-depth-1">
            <li class="nav-item">
                <a class="nav-link active white-text" href="#!">Active</a>
            </li>
            <li class="nav-item">
                <a class="nav-link white-text" href="#!">Link</a>
            </li>
            <li class="nav-item">
                <a class="nav-link white-text" href="#!">Link</a>
            </li>
            <li class="nav-item">
                <a class="nav-link white-text" href="#!">Link</a>
            </li>
        </ul>

    </div>
    <!-- Grid column -->

    <!-- Grid column -->
    <div class="col-md-6">

        <ul class="nav aqua-gradient py-4 mb-r font-bold z-depth-1">
            <li class="nav-item">
                <a class="nav-link active white-text" href="#!">Active</a>
            </li>
            <li class="nav-item">
                <a class="nav-link white-text" href="#!">Link</a>
            </li>
            <li class="nav-item">
                <a class="nav-link white-text" href="#!">Link</a>
            </li>
            <li class="nav-item">
                <a class="nav-link white-text" href="#!">Link</a>
            </li>
        </ul>

        <ul class="nav blue-gradient py-4 mb-r font-bold z-depth-1">
            <li class="nav-item">
                <a class="nav-link active white-text" href="#!">Active</a>
            </li>
            <li class="nav-item">
                <a class="nav-link white-text" href="#!">Link</a>
            </li>
            <li class="nav-item">
                <a class="nav-link white-text" href="#!">Link</a>
            </li>
            <li class="nav-item">
                <a class="nav-link white-text" href="#!">Link</a>
            </li>
        </ul>

    </div>
    <!-- Grid column -->

</div>
<!-- Grid row -->
                
            

Basic tabs MDB Pro component

                
<ul class="nav nav-tabs light-blue lighten-1 mx-0 mb-0 mt-1">
    <li class="nav-item">
        <a class="nav-link active" href="#!">Active</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="#!">Link 1</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="#!">Link 2</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="#!">Link 3</a>
    </li>
</ul>
                
            

Tabs justified MDB Pro component

                
<ul class="nav nav-tabs nav-justified purple lighten-2 mx-0 mb-0 mt-1">
    <li class="nav-item">
        <a class="nav-link active" href="#!">Active</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="#!">Link 1</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="#!">Link 2</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="#!">Link 3</a>
    </li>
</ul>
                
            

Tabs with dropdown MDB Pro component

                
.nav-tabs .nav-item.show .nav-link  {
    background-color: transparent;
    color: #fff;
}
                
            
                
$(document).ready(function() {
    $('#no-waves .dropdown').removeClass('waves-effect');
});
                
            
                
<ul id="no-waves" class="nav nav-tabs">
    <li class="nav-item">
        <a class="nav-link active" href="#">Active</a>
    </li>
    <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a>
        <div class="dropdown-menu">
            <a class="dropdown-item" href="#">Action</a>
            <a class="dropdown-item" href="#">Another action</a>
            <a class="dropdown-item" href="#">Something else here</a>
            <div class="dropdown-divider"></div>
            <a class="dropdown-item" href="#">Separated link</a>
        </div>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="#!">Link 1</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="#!">Link 2</a>
    </li>
</ul>
                
            

Basic pills MDB Pro component

                
<ul class="nav md-pills pills-unique">
    <li class="nav-item">
        <a class="nav-link active" href="#!">Active</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="#!">Link 1</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="#!">Link 2</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="#!">Link 3</a>
    </li>
</ul>
                
            

Pills justified MDB Pro component

                
<ul class="nav md-pills nav-justified">
    <li class="nav-item">
        <a class="nav-link active" href="#!">Active</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="#!">Link 1</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="#!">Link 2</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="#!">Link 3</a>
    </li>
</ul>
                
            

Pills with dropdown MDB Pro component

                
<ul class="nav md-pills nav-justified pills-primary">
    <li class="nav-item">
        <a class="nav-link active " href="#">Active</a>
    </li>
    <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a>
        <div class="dropdown-menu">
            <a class="dropdown-item" href="#">Action</a>
            <a class="dropdown-item" href="#">Another action</a>
            <a class="dropdown-item" href="#">Something else here</a>
            <div class="dropdown-divider"></div>
            <a class="dropdown-item" href="#">Separated link</a>
        </div>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="#!">Link 1</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="#!">Link 2</a>
    </li>
</ul>