Nav links
Horizontally or vertically stacked list links that provide a foundation for building all types of navigation components.
Basic example
<!-- Basic nav links -->
<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">Disabled</a>
</li>
</ul>Background hover effect
<!-- All nav links inside .navbar automatically receive background effect on hover. -->
<nav class="navbar navbar-expand p-0">
<ul class="navbar-nav flex-wrap">
<li class="nav-item">
<a class="nav-link fs-sm active" aria-current="page" href="#">Active</a>
</li>
<li class="nav-item">
<a class="nav-link fs-sm" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link fs-sm" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link fs-sm disabled">Disabled</a>
</li>
</ul>
</nav>Vertical alignment
<!-- Vertically aligned basic nav links -->
<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">Disabled</a>
</li>
</ul>
<!-- Vertically aligned nav links with background effect on hover (inside navbar) -->
<nav class="navbar p-0">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link fs-sm active" aria-current="page" href="#">
Active
</a>
</li>
<li class="nav-item">
<a class="nav-link fs-sm" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link fs-sm" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link fs-sm disabled">Disabled</a>
</li>
</ul>
</nav>With icons and dropdowns
<!-- Basic nav links example with icons and dropdown -->
<ul class="nav">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">
<i class="fi-home opacity-75 me-2"></i>
Home
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<i class="fi-user opacity-75 me-2"></i>
Profile
</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" role="button" aria-expanded="false">Dropdown</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</li>
</ul>
<!-- Nav links with background effect on hover (inside navbar). Example with icons and dropdown -->
<nav class="navbar navbar-expand p-0">
<ul class="navbar-nav flex-wrap">
<li class="nav-item">
<a class="nav-link fs-sm active" aria-current="page" href="#">
<i class="fi-home opacity-75 me-2"></i>
Home
</a>
</li>
<li class="nav-item">
<a class="nav-link fs-sm" href="#">
<i class="fi-user opacity-75 me-2"></i>
Profile
</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link fs-sm dropdown-toggle" data-bs-toggle="dropdown" href="#" role="button" aria-expanded="false">Dropdown</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</li>
</ul>
</nav>Sizing
<!-- Use .fs- (font-size) utility classes to control the size of nav links. -->
<!-- Extra large (.fs-xl) -->
<ul class="nav">
<li class="nav-item">
<a class="nav-link fs-xl active" aria-current="page" href="#">Active</a>
</li>
<li class="nav-item">
<a class="nav-link fs-xl" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link fs-xl" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link fs-xl disabled">Disabled</a>
</li>
</ul>
<!-- Large (.fs-lg) -->
<ul class="nav">
<li class="nav-item">
<a class="nav-link fs-lg active" aria-current="page" href="#">Active</a>
</li>
<li class="nav-item">
<a class="nav-link fs-lg" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link fs-lg" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link fs-lg disabled">Disabled</a>
</li>
</ul>
<!-- Normal (.fs-base) -->
<ul class="nav">
<li class="nav-item">
<a class="nav-link fs-base active" aria-current="page" href="#">Active</a>
</li>
<li class="nav-item">
<a class="nav-link fs-base" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link fs-base" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link fs-base disabled">Disabled</a>
</li>
</ul>
<!-- Small (default) -->
<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">Disabled</a>
</li>
</ul>