Base nav
Navigation available in Bootstrap share general markup and styles, from the base .nav class to the active and disabled states. Swap modifier classes to switch between each style.
The base .nav component is built with flexbox and provide a strong foundation for building all types of navigation components. It includes some style overrides (for working with lists), some link padding for larger hit areas, and basic disabled styling.
The base .nav component does not include any .active state. The following examples include the class, mainly to demonstrate that this particular class does not trigger any special styling.
To convey the active state to assistive technologies, use the aria-current attribute — using the page value for current page, or true for the current item in a set.
<!-- Nav: left alignment -->
<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>
<!-- Nav: center 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>
<!-- Nav: right alignment -->
<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>
Classes are used throughout, so your markup can be super flexible. Use <ul>s like above, <ol> if the order of your items is important, or roll your own with a <nav> element. Because the .nav uses display: flex, the nav links behave the same as nav items would, but without the extra markup.
<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>
<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>
<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>
Tabs
Takes the basic nav from above and adds the .nav-tabs class to generate a tabbed interface.
Takes the basic nav from above and adds the .nav .nav-tabs .px-3 .border-bottom-0 class to generate a tabbed interface.
<ul class="nav nav-tabs px-3 border-bottom-0" role="tablist">
<li class="nav-item"><a class="nav-link active" data-bs-toggle="tab" href="#nav-Preview4" role="tab">Preview</a></li>
<li class="nav-item"><a class="nav-link" data-bs-toggle="tab" href="#nav-HTML4" role="tab">HTML</a></li>
</ul>
<div class="card mb-3">
<div class="card-body">
<div class="tab-content">
<div class="tab-pane fade show active" id="nav-Preview4" role="tabpanel">
...
</div>
<div class="tab-pane fade" id="nav-HTML4" role="tabpanel">
...
</div>
</div>
</div>
</div>
Takes the basic nav from above and adds the .nav .nav-tabs .tab-body-header .rounded .d-inline-flex class to generate a tabbed interface.
<ul class="nav nav-tabs tab-body-header rounded d-inline-flex" role="tablist">
<li class="nav-item"><a class="nav-link active" data-bs-toggle="tab" href="#nav-Preview5" role="tab">Preview</a></li>
<li class="nav-item"><a class="nav-link" data-bs-toggle="tab" href="#nav-HTML5" role="tab">HTML</a></li>
</ul>
<div class="tab-content mt-2">
<div class="tab-pane fade show active" id="nav-Preview5" role="tabpanel">
....
</div>
<div class="tab-pane fade" id="nav-HTML5" role="tabpanel">
....
</div>
</div>
Takes the basic nav from above and adds the .nav nav-tabs .tab-card class to generate a tabbed interface.
<ul class="nav nav-tabs tab-card" role="tablist">
<li class="nav-item"><a class="nav-link active" data-bs-toggle="tab" href="#nav-Preview6" role="tab">Preview</a></li>
<li class="nav-item"><a class="nav-link" data-bs-toggle="tab" href="#nav-HTML6" role="tab">HTML</a></li>
</ul>
<div class="tab-content mt-2">
<div class="tab-pane fade show active" id="nav-Preview6" role="tabpanel">
....
</div>
<div class="tab-pane fade" id="nav-HTML6" role="tabpanel">
....
</div>
</div>
Takes the basic nav from above and adds the .nav nav-tabs .tab-card class to generate a tabbed interface.
<ul class="nav nav-tabs tab-card" role="tablist">
<li class="nav-item"><a class="nav-link active" data-bs-toggle="tab" href="#nav-Preview7" role="tab">Preview</a></li>
<li class="nav-item"><a class="nav-link" data-bs-toggle="tab" href="#nav-HTML7" role="tab">HTML</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>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Separated link</a></li>
</ul>
</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>
<div class="tab-content mt-2">
<div class="tab-pane fade show active" id="nav-Preview7" role="tabpanel">
....
</div>
<div class="tab-pane fade" id="nav-HTML7" role="tabpanel">
....
</div>
</div>
Pills
Take that same HTML, but use .nav-pills instead:
Eiusmod consequat eu adipisicing minim anim aliquip cupidatat culpa excepteur quis. Occaecat sit eu exercitation irure Lorem incididunt nostrud.
<ul class="nav nav-pills mb-3" role="tablist">
<li class="nav-item"><a class="nav-link active" data-bs-toggle="tab" href="#nav-Preview8" role="tab">Preview</a></li>
<li class="nav-item"><a class="nav-link" data-bs-toggle="tab" href="#nav-HTML8" role="tab">HTML</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>
<div class="tab-content">
<div class="tab-pane fade show active" id="nav-Preview8" role="tabpanel">
....
</div>
<div class="tab-pane fade" id="nav-HTML8" role="tabpanel">
....
</div>
</div>
Eiusmod consequat eu adipisicing minim anim aliquip cupidatat culpa excepteur quis. Occaecat sit eu exercitation irure Lorem incididunt nostrud.
<div class="d-flex align-items-start">
<ul class="nav flex-column nav-pills me-3" role="tablist">
<li class="nav-item"><a class="nav-link active" data-bs-toggle="tab" href="#nav-Preview9" role="tab">Preview</a></li>
<li class="nav-item"><a class="nav-link" data-bs-toggle="tab" href="#nav-HTML9" role="tab">HTML</a></li>
<li class="nav-item"><a class="nav-link" data-bs-toggle="tab" href="#nav-Messages9" role="tab">Messages</a></li>
<li class="nav-item"><a class="nav-link" data-bs-toggle="tab" href="#nav-Settings9" role="tab">Settings</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane fade show active" id="nav-Preview9" role="tabpanel">
....
</div>
<div class="tab-pane fade" id="nav-HTML9" role="tabpanel">
....
</div>
<div class="tab-pane fade" id="nav-Messages9" role="tabpanel">
....
</div>
<div class="tab-pane fade" id="nav-Settings9" role="tabpanel">
....
</div>
</div>
</div>
