Using Bootstrap’s Navigation Bar

Using Bootstrap’s Navigation Bar (or navigation header) allows you to provide a responsive way to navigate your web application with relative ease. It will automatically collapse depending on the size of the screen and number of items in navigation bar. here is an example below using AngularJS:

[code language=”javascript”]
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a href="restaurants" class="navbar-brand">Wing Specials</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li ui-sref-active="active"><a ui-sref="restaurants">Search</a></li>
<li ui-sref-active="active"><a ui-sref="about-us">About Us</a></li>
<li ui-sref-active="active"><a ui-sref="contact-us">Contact Us</a></li>
</ul>
</div>
</div>
</nav>
[/code]

Here is what the above navigation bar may look like on a desktop or laptop:

Desktop view of Bootstrap navigation bar.

And, here is what the above navigation bar may look like on a phone or small tablet:

Smart phone view of Bootstrap navigation bar.

Notice how in the above screenshot demonstrates that the navigation bar has collapsed. Now, there is a small button on the right with three lines (ie, from the icon-bar CSS class). This button is likely very familiar to many users these days and allows a user to access the menu items on smaller form factors.

For more information on Bootstrap’s navigation bar go to w3schools.