Navigation Basics
Bootstrap's basic navigation component is build on 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 .nav
class is used to create the navigation component, and can be applied to an unordered list (<ul>
) or a nav element (<nav>
). When using an unordered list, the .nav-item
should be placed on any <li>
tags. The class .nav-link
should be placed on the anchor tags (<a>
) of the navigation regardless of which root element was used.
We can also use the .active
class on the current page anchor tag this will not style the tag differently in the basic nav but in other designs it will. Also, adding an ARIA role of aria-current
to the anchor tag will help with accessibility.
<!-- using an unordered list -->
<ul class="nav">
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
</ul>
<!-- using the nav element -->
<nav class="nav">
<a class="nav-link" href="#">Link</a>
<a class="nav-link" href="#">Link</a>
</nav>