Bootstrap Navigation Bar

A navigation bar is a navigation header that is placed at the top of the 
page:
Home
Page 1
Page 2
Page 3
With Bootstrap, a navigation bar can extend or collapse, depending on the 
screen size.
A standard navigation bar is created with <nav class="navbar navbar-default">.
The following example shows how to add a navigation bar to the top of the page:
Note: All of the examples on this page will show a navigation bar that takes up 
too much space on small screens (however, the navigation bar will be on one single 
line on large screens - because Bootstrap is responsive). This problem (with the 
small screens) will be 
solved in the last example on this page.
If you don't like the style of the default navigation bar, Bootstrap provides an alternative, 
black navbar:
Home
Page 1
Page 2
Page 3
Just change the .navbar-default class into .navbar-inverse:
Home
Page 1 

Page 1-1
Page 1-2
Page 1-3


Page 1-1
Page 1-2
Page 1-3
Page 2
Page 3
Navigation bars can also hold dropdown menus.
The following example adds a dropdown menu for the "Page 1" 
button:
Home
Page 1
Page 2
 Sign Up
 Login
The .navbar-right class is used to right-align navigation bar buttons. 
In the following example we insert a "Sign Up" button and a "Login" button to 
the right in the navigation bar. We also add a glyphicon on each of the two new 
buttons:
Home
Link
Link
To add buttons inside the navbar, add the .navbar-btn class on a Bootstrap 
button:
Home
Page 1
Page 2
To add form elements inside the navbar, add the .navbar-form class to a form element and add an input(s). Note that we have added a .form-group class to the div container holding the input. This adds proper padding if you have more than one inputs (you will learn more about this in the Forms chapter).
You can also use the .input-group and .input-group-addon classes to attach an icon or help text next to the input field. You will learn more about these classes in the Bootstrap Inputs chapter.
Home
Page 1
Page 2
Link
Link
Some text
Use the .navbar-text class to vertical align any elements inside the navbar that are not links (ensures proper padding 
and text color).
The navigation bar can also be fixed at the top or at the bottom of the page.
A fixed navigation bar stays visible in a fixed position (top or bottom) 
independent of the page scroll.

Link


Link

A fixed navigation bar stays visible in a fixed position (top or bottom) independent of the page scroll.
The .navbar-fixed-top class makes the navigation bar fixed at 
the top:
The .navbar-fixed-bottom class makes the navigation bar stay at 
the bottom:
The navigation bar often takes up too much space on a small screen.
We should hide the navigation bar; and only show it when it is needed.
In the following example the navigation bar is replaced by a button 
in the top right corner. Only when the button is clicked, the navigation bar will be 
displayed:

Link


Link


Link

Click on the button in the top right corner to reveal the navigation links.
Add the required class names to create a default Navigation Bar.
<nav class="">
  <div class="container-fluid">
    <ul class="nav navbar-nav">
      <li><a href="#">Page 1</a></li>
      <li><a href="#">Page 2</a></li>
      <li><a href="#">Page 3</a></li>
    </ul>
  </div>
</nav>

Start the Exercise
We just launchedW3Schools videos
Get certifiedby completinga course today!
If you want to report an error, or if you want to make a suggestion, do not hesitate to send us an e-mail:
help@w3schools.com
Your message has been sent to W3Schools.