Bootstrap 3 Navbars

Add a fully-functional, responsive navbar to your website with minimal code.

Bootstrap navbars allow you to create complex navbars that collapse in smaller viewports and become horizontal in larger viewports.

Example

If you're viewing this on a large screen, the following navbar should appear expanded and horizontal. Otherwise it will be collapsed. In this example, the first link is highlighted (using class="active") indicating that it's the current page or section.

This navbar is achieved using the following markup:

View Output

Navbars with Dropdowns

You can add dropdown menus to your navbar. Just add the dropdown code to a <li> element with the .dropdown class applied.

<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#alignment-example" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Your Brand</a>
</div>

<div class="collapse navbar-collapse" id="alignment-example">

<ul class="nav navbar-nav">
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">About Us <span class="caret"></span></a>
<ul class="dropdown-menu" aria-labelledby="about-us">
<li><a href="#">Our Story</a></li>
<li><a href="#">Our Team</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</li>
</ul>

</div>

</div>
</nav>

View Output

Navbar with Form Controls

You can include form controls by using .navbar-form on the <form> element. This Bootstrap class adjusts the vertical alignment and collapses the form in smaller viewports.

Forms within navbars also require one of the alignment classes to align the form controls within the navbar (see alignment below).

View Output

Alignment

You can use .navbar-left or .navbar-right to align components within the navbar.

Here, we align the search form to the left, and Link 4 to the right.

<div class="collapse navbar-collapse" id="alignment-example">

<ul class="nav navbar-nav">
<li class="active"><a href="#">Link 1 <span class="sr-only">(current)</span></a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
</ul>

<form class="navbar-form navbar-left" role="search">
<div class="form-group">
<input type="text" class="form-control">
</div>
<button type="submit" class="btn btn-default">Search</button>
</form>

<ul class="nav navbar-nav navbar-right">
<li><a href="#">Link 4</a></li>
</ul>

</div>

</div>
</nav>

View Output

Buttons

For standalone buttons (i.e. those not nested inside a <form> element), add Bootstrap's .navbar-btn to the <button> tag.

View Output

Text

Runs of text (typically inside a <p> element) should have Bootstrap's .navbar-text class applied. This ensures that the correct leading and color is applied to the text.

View Output

Non-Nav Links

Non-nav links (i.e. links that are located within text and not within the navbar component) should have Bootstrap's .navbar-link class applied. This ensures that the correct color is applied to the link.

View Output

Inverted Navbar

Bootstrap provides the .navbar-inverse class to invert the colors of the navbar. Simply replace .navbar-default with .navbar-inverse and it's done.

As with any Bootstrap component, you can modify the colors and other styles as you need.

View Output

Fixed Navbars

You can fix a navbar to the top or bottom of the viewport by using either .navbar-fixed-top or .navbar-fixed-bottom.

Also, be sure to have a .container or .container-fluid so that the navbar is centered and padded appropriately.

Fixed Top

View Output

Fixed Bottom

View Output

Padding Required

When using fixed navbars, you will usually need to add padding to compensate for the height of the navbar. By default, the navbar is 50px high and this will overlay (hide) your content.

To fix this on "fixed top" navbars, it's suggested that you add:

For "fixed bottom" navbars, add:

You can adjust these values as required.

Static Top

You can use .navbar-static-top to make the navbar behave the opposite to the fixed one (i.e. it scrolls with the page).

View Output