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 dropdowndata-toggle="dropdown"
to activate the dropdownaria-haspopup="true"
to set that there is a pop-uparia-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>