Bootstrap Navbar-Nav

Introduction

Bootstrap is a popular open-source front-end framework that helps to design responsive and mobile-first websites. One of the most commonly used components of Bootstrap is the navbar, which is used for navigation purposes. Navbar is highly customizable and can be modified to suit different needs.

In this article, we'll discuss the navbar-nav component of Bootstrap's navbar. Navbar-nav is used to define a group of nav-links or navbar items. This component is usually used in conjunction with other navbar components like navbar-brand, navbar-toggler, navbar-collapse and navbar-text.

Usage

Navbar-nav is defined using an unordered list (

) and a class of navbar-nav. Each
element of the list contains a element which represents the navbar item or the nav-link. The element can be further customized to display an icon, a badge, a dropdown menu, etc.

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Brand</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarNav">
    <ul class="navbar-nav">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">About</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Contact</a>
      </li>
    </ul>
  </div>
</nav>

In this example, we define a navbar with the brand "Brand". The navbar-toggler is used to toggle the navbar when the viewport size is small. The navbar-collapse div encloses the navbar-nav. The navbar-nav contains three nav-items (Home, About and Contact).

Conclusion

Bootstrap navbar-nav is an essential component of Bootstrap navbar that helps to design navigation menus for a website. Navbar-nav is fully customizable and can be combined with other navbar components to create a responsive and modern-looking navbar.