Get Karik Now

Navs

Documentation and examples for how to use Bootstrap???s included navigation components.

  1. Home
  2. Elements
  3. Navs

Navigation available in Bootstrap share general markup and styles, from the base .nav class to the active and disabled states. Swap modifier classes to switch between each style. The base .nav component is built with flexbox and provide a strong foundation for building all types of navigation components. It includes some style overrides (for working with lists), some link padding for larger hit areas, and basic disabled styling.

Base Examples

Use the .svg-icon and insert the SVG code

                                                    
<ul class="nav">
    <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 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 disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
    </li>
</ul
Pills & Color

Take that same HTML, but use .nav-pills instead:

                                                                
<ul class="nav nav-brand nav-pills mb-20">
    <li class="nav-item">
        <a class="nav-link active" href="#home" data-toggle="tab"> <i class="ti-home mr-5"></i> Home</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="#about" data-toggle="tab"><i class="ti-direction mr-5"></i>About</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="#about" data-toggle="tab"><i class="ti-user mr-5"></i> Account</a>
    </li>                                                        
    <li class="nav-item">
        <a class="nav-link" href="#setting" data-toggle="tab"><i class="ti-settings mr-5"></i>Setting</a>
    </li>                                           
</ul>
Tabs

Takes the basic nav from above and adds the .nav-tabs class to generate a tabbed interface. Use them to create tabbable regions with our tab JavaScript plugin.

Tab content 1
Tab content 2
Tab content 3
                                                    
<ul class="nav nav-tabs">
    <li class="nav-item">
        <a class="nav-link active" href="#home" data-toggle="tab"> <i class="ti-home mr-5 text-muted"></i> Home</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="#about" data-toggle="tab"><i class="ti-direction mr-5 text-muted"></i>About</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"><i class="ti-user mr-5 text-muted"></i>
            Account
        </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="#setting" data-toggle="tab"><i class="ti-settings mr-5 text-muted"></i>Setting</a>
    </li>                                           
    </ul>
    <div class="tab-content mt-15" id="myTabContent">
    <div class="tab-pane fade active show" id="home" role="tabpanel" aria-labelledby="home-tab">Tab content 1</div>
    <div class="tab-pane fade" id="about" role="tabpanel" aria-labelledby="profile-tab">Tab content 2</div>
    <div class="tab-pane fade" id="setting" role="tabpanel" aria-labelledby="contact-tab">Tab content 3</div>
</div>
Vertical Navs

Takes the basic nav from above and adds the .nav-tabs class to generate a tabbed interface. Use them to create tabbable regions with our tab JavaScript plugin.

Add Bootstrap's .flex-columnclass for vertical navs.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ullamcorper, elit eget mattis consequat, felis enim condimentum quam, ac efficitur ligula urna eget diam.
Curabitur iaculis erat vel felis sodales egestas. In vestibulum auctor metus, vel finibus ex rutrum non. Vestibulum faucibus fermentum egestas.
Praesent tellus nisl, egestas in mattis quis, hendrerit eget magna. Cras id pulvinar libero. Curabitur blandit in ligula ut maximus. 
                                                    
<ul class="nav flex-column nav-pills nav-brand">
    <li class="nav-item">
        <a class="nav-link active" href="#home2" data-toggle="tab"> <i class="ti-home mr-5 text-muted">...</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="#about2" data-toggle="tab">...</a>
    </li>                                         
</ul>