Adding a Drop Down Menu to the Bootstrap Navbar

Adding a Drop Down Menu to the Bootstrap Navbar

Last updated:

This is how I've put a simple drop down menu (useful for options, configurations and that sort of thing) into a simple bootstrap navbar. Note that I've also added some icons to have a better overall effect.

<ul class="nav pull-right" role="navigation">
    <li class="dropdown">
        <a id="drop1" href="#" role="button" class="dropdown-toggle" data-toggle="dropdown"> <img src="gear.png" /> <b class="caret"></b></a>
        <ul class="dropdown-menu" role="menu" aria-labelledby="drop1">
            <li role="presentation"><a role="menuitem" tabindex="-1" href="page1.html">Link1</a></li>
            <li role="presentation"><a role="menuitem" tabindex="-1" href="page2.html"><img src="icon2.png"/>Link2 With Image</a></li>
        </ul>
    </li>
</ul>

Dialogue & Discussion