Avant UI Kit

Documentation

Navs

Navigation shares general markup and styles, from the base .nav class to the active and disabled states.

Base nav

The base .nav component is built with flexbox and provide a strong foundation for building all types of navigation components. 

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

Centered with .justify-content-center: 

<ul class="nav justify-content-center">
    <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="#" tabindex="-1" aria-disabled="true">Disabled</a>
    </li>
</ul>

Right-aligned with .justify-content-end: 

<ul class="nav justify-content-end">
    <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="#" tabindex="-1" aria-disabled="true">Disabled</a>
    </li>
</ul>

Stack the navigation using .flex-column utility. You can use responsive versions (e.g., .flex-sm-column). 

<ul class="nav flex-column">
    <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="#" tabindex="-1" aria-disabled="true">Disabled</a>
    </li>
</ul>

Tabs

The .nav element is the basis for the component .nav-tabs. Take a look the markup below to understand how to use the "tabs" component.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer enim diam, laoreet a nisi id, bibendum congue orci. Nullam id auctor elit, non sollicitudin est. Quisque rutrum, nulla a aliquam facilisis, tellus ligula pellentesque Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer enim diam, laoreet a nisi id, bibendum congue orci. Nullam id auctor elit, non sollicitudin est. Quisque rutrum, nulla a aliquam facilisis, tellus ligula pellentesque Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer enim diam, laoreet a nisi id, bibendum congue orci. Nullam id auctor elit, non sollicitudin est. Quisque rutrum, nulla a aliquam facilisis, tellus ligula pellentesque
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer enim diam, laoreet a nisi id, bibendum congue orci. Nullam id auctor elit, non sollicitudin est. Quisque rutrum, nulla a aliquam facilisis, tellus ligula pellentesque Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer enim diam, laoreet a nisi id, bibendum congue orci. Nullam id auctor elit, non sollicitudin est. Quisque rutrum, nulla a aliquam facilisis, tellus ligula pellentesque
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer enim diam, laoreet a nisi id, bibendum congue orci. Nullam id auctor elit, non sollicitudin est. Quisque rutrum, nulla a aliquam facilisis, tellus ligula pellentesque 
<ul class="nav nav-tabs flex-lg-row" id="myTab" role="tablist">
    <li class="nav-item">
        <a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Home</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Profile</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" id="contact-tab" data-toggle="tab" href="#contact" role="tab" aria-controls="contact" aria-selected="false">Contact</a>
    </li>
</ul>
<div class="tab-content" id="myTabContent">
    <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">
        ...
    </div>
    <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">
        ...
    </div>
    <div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">
        ...
    </div>
</div>

Underline variation

Add .nav-tabs-underline to use tabs with a different style.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer enim diam, laoreet a nisi id, bibendum congue orci. Nullam id auctor elit, non sollicitudin est. Quisque rutrum, nulla a aliquam facilisis, tellus ligula pellentesque Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer enim diam, laoreet a nisi id, bibendum congue orci. Nullam id auctor elit, non sollicitudin est. Quisque rutrum, nulla a aliquam facilisis, tellus ligula pellentesque Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer enim diam, laoreet a nisi id, bibendum congue orci. Nullam id auctor elit, non sollicitudin est. Quisque rutrum, nulla a aliquam facilisis, tellus ligula pellentesque
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer enim diam, laoreet a nisi id, bibendum congue orci. Nullam id auctor elit, non sollicitudin est. Quisque rutrum, nulla a aliquam facilisis, tellus ligula pellentesque Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer enim diam, laoreet a nisi id, bibendum congue orci. Nullam id auctor elit, non sollicitudin est. Quisque rutrum, nulla a aliquam facilisis, tellus ligula pellentesque
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer enim diam, laoreet a nisi id, bibendum congue orci. Nullam id auctor elit, non sollicitudin est. Quisque rutrum, nulla a aliquam facilisis, tellus ligula pellentesque 
<ul class="nav nav-tabs nav-tabs-underline flex-lg-row" id="myTab" role="tablist">
    <li class="nav-item">
        <a class="nav-link active" id="home-tab-underline" data-toggle="tab" href="#home-underline" role="tab" aria-controls="home-underline" aria-selected="true">Home</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" id="profile-tab-underline" data-toggle="tab" href="#profile-underline" role="tab" aria-controls="profile-underline" aria-selected="false">Profile</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" id="contact-tab-underline" data-toggle="tab" href="#contact-underline" role="tab" aria-controls="contact-underline" aria-selected="false">Contact</a>
    </li>
</ul>
<div class="tab-content" id="myTabContent">
    <div class="tab-pane fade show active" id="home-underline" role="tabpanel" aria-labelledby="home-tab-underline">
        ...
    </div>
    <div class="tab-pane fade" id="profile-underline" role="tabpanel" aria-labelledby="profile-tab-underline">
        ...
    </div>
    <div class="tab-pane fade" id="contact-underline" role="tabpanel" aria-labelledby="contact-tab-underline">
        ...
    </div>
</div>

Pills

The .nav element is the basis for the component "pills". Take a look the markup below to understand how to use the "pills" component.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer enim diam, laoreet a nisi id, bibendum congue orci. Nullam id auctor elit, non sollicitudin est. Quisque rutrum, nulla a aliquam facilisis, tellus ligula pellentesque Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer enim diam, laoreet a nisi id, bibendum congue orci. Nullam id auctor elit, non sollicitudin est. Quisque rutrum, nulla a aliquam facilisis, tellus ligula pellentesque Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer enim diam, laoreet a nisi id, bibendum congue orci. Nullam id auctor elit, non sollicitudin est. Quisque rutrum, nulla a aliquam facilisis, tellus ligula pellentesque
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer enim diam, laoreet a nisi id, bibendum congue orci. Nullam id auctor elit, non sollicitudin est. Quisque rutrum, nulla a aliquam facilisis, tellus ligula pellentesque Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer enim diam, laoreet a nisi id, bibendum congue orci. Nullam id auctor elit, non sollicitudin est. Quisque rutrum, nulla a aliquam facilisis, tellus ligula pellentesque
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer enim diam, laoreet a nisi id, bibendum congue orci. Nullam id auctor elit, non sollicitudin est. Quisque rutrum, nulla a aliquam facilisis, tellus ligula pellentesque 
<ul class="nav nav-pills flex-md-row mb-3" id="pills-tab" role="tablist">
    <li class="nav-item">
        <a class="nav-link active" id="pills-home-tab" data-toggle="pill" href="#pills-home" role="tab" aria-controls="pills-home" aria-selected="true">Home</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" id="pills-profile-tab" data-toggle="pill" href="#pills-profile" role="tab" aria-controls="pills-profile" aria-selected="false">Profile</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" id="pills-contact-tab" data-toggle="pill" href="#pills-contact" role="tab" aria-controls="pills-contact" aria-selected="false">Contact</a>
    </li>
</ul>
<div class="tab-content" id="pills-tabContent">
    <div class="tab-pane fade show active" id="pills-home" role="tabpanel" aria-labelledby="pills-home-tab">
        ...
    </div>
    <div class="tab-pane fade" id="pills-profile" role="tabpanel" aria-labelledby="pills-profile-tab">
        ...
    </div>
    <div class="tab-pane fade" id="pills-contact" role="tabpanel" aria-labelledby="pills-contact-tab">
        ...
    </div>
</div>

View the complete navs documentation at Bootstrap website.