- MARKETPLACE
- My Dashboard
- Marketplace
- Active Bids
- Collections
- Favourites
- Profile & More
- Authentication
- Applications
- RESOURCES
- Useful Pages
- Widget's
- Components
- Documentation
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>
Takes the basic nav from above and adds the .nav-tabs
class to generate a tabbed interface.
.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>
.nav .nav-tabs .tab-page-toolbar .rounded .d-inline-flex
class to generate a tabbed interface.
<ul class="nav nav-tabs tab-page-toolbar 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>
.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.
Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source.
<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-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>
Take that same HTML, but use .nav-pills
instead:
<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>
<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>