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-bs-toggle="tab" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link mb-sm-3 mb-md-0" data-bs-toggle="tab" href="#">Profile</a>
</li>
<li class="nav-item">
<a class="nav-link mb-sm-3 mb-md-0" data-bs-toggle="tab" href="#">Settings</a>
</li>
<li class="nav-item">
<a class="nav-link mb-sm-3 mb-md-0" data-bs-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-bs-toggle="tab" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link mb-sm-3 mb-md-0" data-bs-toggle="tab" href="#">Profile</a>
</li>
<li class="nav-item">
<a class="nav-link mb-sm-3 mb-md-0" data-bs-toggle="tab" href="#">Settings</a>
</li>
<li class="nav-item">
<a class="nav-link mb-sm-3 mb-md-0" data-bs-toggle="tab" href="#">Messages</a>
</li>
</ul>
</div>Rounded navs with icons Pro
<div class="nav-wrapper position-relative">
<ul class="nav nav-pills nav-fill flex-column flex-md-row">
<li class="nav-item me-sm-2">
<a class="nav-link mb-3 mb-md-0 d-flex align-items-center justify-content-center active" data-bs-toggle="tab" href="#">
<svg class="icon icon-xs me-2" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M3 4a1 1 0 011-1h12a1 1 0 011 1v2a1 1 0 01-1 1H4a1 1 0 01-1-1V4zM3 10a1 1 0 011-1h6a1 1 0 011 1v6a1 1 0 01-1 1H4a1 1 0 01-1-1v-6zM14 9a1 1 0 00-1 1v6a1 1 0 001 1h2a1 1 0 001-1v-6a1 1 0 00-1-1h-2z"></path></svg>
Dashboard
</a>
</li>
<li class="nav-item me-sm-2">
<a class="nav-link mb-3 mb-md-0 d-flex align-items-center justify-content-center" data-bs-toggle="tab" href="#">
<svg class="icon icon-xs me-2" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-6-3a2 2 0 11-4 0 2 2 0 014 0zm-2 4a5 5 0 00-4.546 2.916A5.986 5.986 0 0010 16a5.986 5.986 0 004.546-2.084A5 5 0 0010 11z" clip-rule="evenodd"></path></svg>
Profile
</a>
</li>
<li class="nav-item me-sm-2">
<a class="nav-link mb-3 mb-md-0 d-flex align-items-center justify-content-center" data-bs-toggle="tab" href="#">
<svg class="icon icon-xs me-2" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M11.49 3.17c-.38-1.56-2.6-1.56-2.98 0a1.532 1.532 0 01-2.286.948c-1.372-.836-2.942.734-2.106 2.106.54.886.061 2.042-.947 2.287-1.561.379-1.561 2.6 0 2.978a1.532 1.532 0 01.947 2.287c-.836 1.372.734 2.942 2.106 2.106a1.532 1.532 0 012.287.947c.379 1.561 2.6 1.561 2.978 0a1.533 1.533 0 012.287-.947c1.372.836 2.942-.734 2.106-2.106a1.533 1.533 0 01.947-2.287c1.561-.379 1.561-2.6 0-2.978a1.532 1.532 0 01-.947-2.287c.836-1.372-.734-2.942-2.106-2.106a1.532 1.532 0 01-2.287-.947zM10 13a3 3 0 100-6 3 3 0 000 6z" clip-rule="evenodd"></path></svg>
Settings
</a>
</li>
<li class="nav-item">
<a class="nav-link mb-3 mb-md-0 d-flex align-items-center justify-content-center" data-bs-toggle="tab" href="#">
<svg class="icon icon-xs me-2" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M2.003 5.884L10 9.882l7.997-3.998A2 2 0 0016 4H4a2 2 0 00-1.997 1.884z"></path><path d="M18 8.118l-8 4-8-4V14a2 2 0 002 2h12a2 2 0 002-2V8.118z"></path></svg>
Messages
</a>
</li>
</ul>
</div>Circle navs Pro
<div class="nav-wrapper position-relative">
<ul class="nav nav-pills nav-pill-circle flex-column flex-md-row">
<li class="nav-item">
<a class="nav-link active" aria-label="first navigation tab" data-bs-toggle="tab" href="#">
<span class="nav-link-icon d-block">
<svg class="icon icon-sm" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-6-3a2 2 0 11-4 0 2 2 0 014 0zm-2 4a5 5 0 00-4.546 2.916A5.986 5.986 0 0010 16a5.986 5.986 0 004.546-2.084A5 5 0 0010 11z" clip-rule="evenodd"></path></svg>
</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" aria-label="second navigation tab" data-bs-toggle="tab" href="#">
<span class="nav-link-icon d-block">
<svg class="icon icon-sm" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M2.003 5.884L10 9.882l7.997-3.998A2 2 0 0016 4H4a2 2 0 00-1.997 1.884z"></path><path d="M18 8.118l-8 4-8-4V14a2 2 0 002 2h12a2 2 0 002-2V8.118z"></path></svg>
</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" aria-label="third navigation tab" data-bs-toggle="tab" href="#">
<span class="nav-link-icon d-block">
<svg class="icon icon-sm" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M11.49 3.17c-.38-1.56-2.6-1.56-2.98 0a1.532 1.532 0 01-2.286.948c-1.372-.836-2.942.734-2.106 2.106.54.886.061 2.042-.947 2.287-1.561.379-1.561 2.6 0 2.978a1.532 1.532 0 01.947 2.287c-.836 1.372.734 2.942 2.106 2.106a1.532 1.532 0 012.287.947c.379 1.561 2.6 1.561 2.978 0a1.533 1.533 0 012.287-.947c1.372.836 2.942-.734 2.106-2.106a1.533 1.533 0 01.947-2.287c1.561-.379 1.561-2.6 0-2.978a1.532 1.532 0 01-.947-2.287c.836-1.372-.734-2.942-2.106-2.106a1.532 1.532 0 01-2.287-.947zM10 13a3 3 0 100-6 3 3 0 000 6z" clip-rule="evenodd"></path></svg>
</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" aria-label="fourth navigation tab" data-bs-toggle="tab" href="#">
<span class="nav-link-icon d-block">
<svg class="icon icon-xs" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M3 4a1 1 0 011-1h12a1 1 0 011 1v2a1 1 0 01-1 1H4a1 1 0 01-1-1V4zM3 10a1 1 0 011-1h6a1 1 0 011 1v6a1 1 0 01-1 1H4a1 1 0 01-1-1v-6zM14 9a1 1 0 00-1 1v6a1 1 0 001 1h2a1 1 0 001-1v-6a1 1 0 00-1-1h-2z"></path></svg>
</span>
</a>
</li>
</ul>
</div>Vertical navs Pro
Use the following vertical navs for sidebars:
<div class="nav-wrapper position-relative">
<ul class="nav nav-pills square nav-fill flex-column vertical-tab">
<li class="nav-item">
<a class="nav-link d-inline-flex align-items-center justify-content-center active" data-bs-toggle="tab" href="#">
<svg class="icon icon-xs me-2" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M10.707 2.293a1 1 0 00-1.414 0l-7 7a1 1 0 001.414 1.414L4 10.414V17a1 1 0 001 1h2a1 1 0 001-1v-2a1 1 0 011-1h2a1 1 0 011 1v2a1 1 0 001 1h2a1 1 0 001-1v-6.586l.293.293a1 1 0 001.414-1.414l-7-7z"></path></svg>
Home
</a>
</li>
<li class="nav-item">
<a class="nav-link d-inline-flex align-items-center justify-content-center" data-bs-toggle="tab" href="#">
<svg class="icon icon-xs me-2" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-6-3a2 2 0 11-4 0 2 2 0 014 0zm-2 4a5 5 0 00-4.546 2.916A5.986 5.986 0 0010 16a5.986 5.986 0 004.546-2.084A5 5 0 0010 11z" clip-rule="evenodd"></path></svg>
Profile
</a>
</li>
<li class="nav-item d-inline-flex align-items-center justify-content-center">
<a class="nav-link" data-bs-toggle="tab" href="#">
<svg class="icon icon-xs me-2" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M5 4a1 1 0 00-2 0v7.268a2 2 0 000 3.464V16a1 1 0 102 0v-1.268a2 2 0 000-3.464V4zM11 4a1 1 0 10-2 0v1.268a2 2 0 000 3.464V16a1 1 0 102 0V8.732a2 2 0 000-3.464V4zM16 3a1 1 0 011 1v7.268a2 2 0 010 3.464V16a1 1 0 11-2 0v-1.268a2 2 0 010-3.464V4a1 1 0 011-1z"></path></svg>
Settings
</a>
</li>
<li class="nav-item d-inline-flex align-items-center justify-content-center">
<a class="nav-link" data-bs-toggle="tab" href="#">
<svg class="icon icon-xs me-2" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M8.707 7.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l2-2a1 1 0 00-1.414-1.414L11 7.586V3a1 1 0 10-2 0v4.586l-.293-.293z"></path><path d="M3 5a2 2 0 012-2h1a1 1 0 010 2H5v7h2l1 2h4l1-2h2V5h-1a1 1 0 110-2h1a2 2 0 012 2v10a2 2 0 01-2 2H5a2 2 0 01-2-2V5z"></path></svg>
Messages
</a>
</li>
</ul>
</div>