Navigation Basics

Bootstrap's basic navigationopen in new window component is built 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>

# Navigation Basics