Navs

Use navigation tabs to break up pieces of content

Default nav

The following navigation bar is a basic example from what is used in Pixel:

<div class="nav-wrapper position-relative">
    <ul class="nav nav-pills nav-fill flex-column flex-sm-row">
        <li class="nav-item">
            <a class="nav-link mb-sm-3 mb-md-0 active" data-toggle="tab" href="#">Home</a>
        </li>
        <li class="nav-item">
            <a class="nav-link mb-sm-3 mb-md-0" data-toggle="tab" href="#">Profile</a>
        </li>
        <li class="nav-item">
            <a class="nav-link mb-sm-3 mb-md-0" data-toggle="tab" href="#">Settings</a>
        </li>
        <li class="nav-item">
            <a class="nav-link mb-sm-3 mb-md-0" data-toggle="tab" href="#">Messages</a>
        </li>
    </ul>
</div>

Rounded navs

<div class="nav-wrapper position-relative">
    <ul class="nav nav-pills rounded nav-fill flex-column flex-md-row">
        <li class="nav-item">
            <a class="nav-link mb-sm-3 mb-md-0 active" data-toggle="tab" href="#">Home</a>
        </li>
        <li class="nav-item">
            <a class="nav-link mb-sm-3 mb-md-0" data-toggle="tab" href="#">Profile</a>
        </li>
        <li class="nav-item">
            <a class="nav-link mb-sm-3 mb-md-0" data-toggle="tab" href="#">Settings</a>
        </li>
        <li class="nav-item">
            <a class="nav-link mb-sm-3 mb-md-0" data-toggle="tab" href="#">Messages</a>
        </li>
    </ul>
</div>

Rounded navs with icons

<div class="nav-wrapper position-relative">
    <ul class="nav nav-pills nav-fill flex-column flex-md-row">
        <li class="nav-item">
            <a class="nav-link mb-sm-3 mb-md-0 active" data-toggle="tab" href="#"><i class="fas fa-tachometer-alt mr-2"></i>Dashboard</a>
        </li>
        <li class="nav-item">
            <a class="nav-link mb-sm-3 mb-md-0" data-toggle="tab" href="#"><i class="far fa-user-circle mr-2"></i>Profile</a>
        </li>
        <li class="nav-item">
            <a class="nav-link mb-sm-3 mb-md-0" data-toggle="tab" href="#"><i class="far fa-sun mr-2"></i>Settings</a>
        </li>
        <li class="nav-item">
            <a class="nav-link mb-sm-3 mb-md-0" data-toggle="tab" href="#"><i class="far fa-comments mr-2"></i>Messages</a>
        </li>
    </ul>
</div>