Dropdowns in the Navbar

Adding a dropdown inside a navbar can be achieved by using a set of classes and elements to style the parent link and the display of the dropdown. Mainly we have to start with a parent container element with a class of .dropdown which contains the link that will toggle the display of the dropdown and has the class of .dropdown-toggle

<nav class="navbar navbar-light navbar-expanded-md">
  <ul class="navbar-nav">
    <li class="nav-item"><a class="nav-item" href="#">Home</a></li>
    <li class="nav-item dropdown">
      <a class="nav-item dropdown-toggle" href="#">About</a>
    </li>
    <li class="nav-item"><a class="nav-item" href="#">Contact</a></li>
  </ul>
</nav>

The .dropdown-toggle link needs to have a few other attributed to make the dropdown work

• id with a unique id to link with the specific dropdown
• data-toggle="dropdown" to activate the dropdown
• aria-haspopup="true" to set that there is a pop-up
• aria-expanded="false" for defining the initial state of not expanded

<nav class="navbar navbar-light navbar-expanded-md">
  <ul class="navbar-nav">
    <li class="nav-item"><a class="nav-item" href="#">Home</a></li>
    <li class="nav-item dropdown">
      <a
        class="nav-item dropdown-toggle"
        id="aboutDropdown"
        data-toggle="dropdown"
        aria-haspopup="true"
        aria-expanded="false"
        href="#"
      >
        About
      </a>
    </li>
    <li class="nav-item"><a class="nav-item" href="#">Contact</a></li>
  </ul>
</nav>

Now we can add the dropdown with the class of .dropdown-menu inside the parent element .dropdown. Each item inside the .dropdown-menu will have a class of .dropdown-item

<nav class="navbar navbar-light navbar-expanded-md">
  <ul class="navbar-nav">
    <li class="nav-item"><a class="nav-item" href="#">Home</a></li>
    <li class="nav-item dropdown">
      <a
        class="nav-item dropdown-toggle"
        id="aboutDropdown"
        data-toggle="dropdown"
        aria-haspopup="true"
        aria-expanded="false"
        href="#"
      >
        About
      </a>
      <div class="dropdown-menu" aria-labelledby="aboutDropdown">
        <a class="dropdown-item" href="#">Our Team</a>
        <a class="dropdown-item" href="#">Mission</a>
        <a class="dropdown-item" href="#">Our Story</a>
      </div>
    </li>
    <li class="nav-item"><a class="nav-item" href="#">Contact</a></li>
  </ul>
</nav>