Navs
Documentation and examples for how to use Bootstrap’s included navigation components.
https://getbootstrap.com/docs/5.1/components/navs-tabs/Nav Basic (list/link)
<!-- List -->
<ul class="nav">
<li class="nav-item">
<a class="nav-link active" aria-current="page" 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>
Same result using direct links
<!-- Link -->
<nav class="nav">
<a class="nav-link active" aria-current="page" href="#">Active</a>
<a class="nav-link" href="#">Link</a>
<a class="nav-link" href="#">Link</a>
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</nav>
Nav Alignment
<ul class="nav justify-content-center">
<li class="nav-item">
<a class="nav-link active" aria-current="page" 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>
<ul class="nav justify-content-end">
<li class="nav-item">
<a class="nav-link active" aria-current="page" 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>
Nav Vertical
<!-- List -->
<ul class="nav flex-column">
<li class="nav-item">
<a class="nav-link active" aria-current="page" 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>
Same result using direct links
<!-- Link -->
<nav class="nav flex-column">
<a class="nav-link active" aria-current="page" href="#">Active</a>
<a class="nav-link" href="#">Link</a>
<a class="nav-link" href="#">Link</a>
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</nav>
Nav Reponsive
<nav class="nav-deep nav-deep-light">
<!-- mobile only -->
<button class="clearfix btn btn-toggle btn-sm btn-block text-align-left shadow-md border rounded mb-1 d-block d-sm-none" data-target="#nav_responsive" data-toggle-container-class="d-none d-sm-block bg-white shadow-md border animate-fadein rounded p-3">
<span class="group-icon px-2 py-2 float-start">
<i class="fi fi-bars-2"></i>
<i class="fi fi-close"></i>
</span>
<span class="h5 py-2 m-0 float-start">
Account Menu
</span>
</button>
<!-- desktop only -->
<h5 class="pt-3 pb-3 m-0 d-none d-sm-block">
Account Menu
</h5>
<!-- navigation -->
<ul id="nav_responsive" class="nav flex-column d-none d-sm-block">
<li class="nav-item active">
<a class="nav-link px-0" href="#">
<i class="fi fi-arrow-end m-0 smaller"></i>
<span class="px-2 d-inline-block">
My Orders
</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link px-0" href="#">
<i class="fi fi-arrow-end m-0 smaller"></i>
<span class="px-2 d-inline-block">
My Favourites
</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link px-0" href="#">
<i class="fi fi-arrow-end m-0 smaller"></i>
<span class="px-2 d-inline-block">
Account Settings
</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link px-0" href="#">
<span class="group-icon">
<i class="fi fi-arrow-end"></i>
<i class="fi fi-arrow-down"></i>
</span>
<span class="px-2 d-inline-block">
Multi level
</span>
</a>
<ul class="nav flex-column px-3">
<li class="nav-item">
<a class="nav-link" href="#">
Option 1
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
Option 2
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
Option 3
</a>
</li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link px-0" href="#">
<i class="fi fi-power"></i>
Log Out
</a>
</li>
</ul>
</nav>