The Bootstrap framework provides you with a feature called navigation bars. In short, a navigation bar (also referred to as a navbar) is a header at the top of the page to display navigational information.
How To Use
To use Bootstrap Navigation Bars you add a <nav>
element to the top inside the <body>
element of your webpage. There are various styles you can add to customize the display of your navbars.
Example
This is the code needed to make a basic navbar.
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">Site Name</a>
</div>
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Page 1</a></li>
<li><a href="#">Page 2</a></li>
<li><a href="#">Page 3</a></li>
</ul>
</div>
</nav>
Bootstrap provides a set of classes in the Bootstrap framework to style your navbars. These classes are as followed:
navbar navbar-default
This is the default style for your navbars.navbar navbar-inverse
This is similar to the default style except the colors are inverted.
You can include a drop-down menu inside a navbar. This feature requires you to include Bootstrap’s javascript file for it to work.
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Drop down
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li><a href="#">Item 1</a></li>
<li><a href="#">Item 2</a></li>
<li><a href="#">Item 3</a></li>
</ul>
</li>
You can add buttons on the navbar. The existing Bootstrap Button classes work however you’ll need to include the class navbar-btn
to the end of the class list.
<button class="btn navbar-btn">Button</button>
The navbar-brand
class can be applied to most elements, but an anchor works best as some elements might require utility classes or custom styles.
<!-- As a link -->
<nav class="navbar navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
</nav>
<!-- As a heading -->
<nav class="navbar navbar-light bg-light">
<span class="navbar-brand mb-0 h1">Navbar</span>
</nav>
You can also add forms to the navbar. This could be used for tasks such as a search field, quick login field, etc.
<form class="navbar-form navbar-right">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Search</button>
</form>
In some cases you might want to align elements in a navbar to the right (for example a login or sign-up button.). To do this you’ll need to use the navbar-right
class.
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">Site Name</a>
</div>
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Page 1</a></li>
<li><a href="#">Page 2</a></li>
<li><a href="#">Page 3</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="#">Action Link #1</a></li>
<li><a href="#">Action Link #2</a></li>
</ul>
</div>
</nav>
In some cases you might want to keep the navbar at the top or bottom of the screen regardless of scrolling. You will need to add either the navbar-fixed-top
or navbar-fixed-bottom
class to the <nav>
element.
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">Site Name</a>
</div>
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Page 1</a></li>
<li><a href="#">Page 2</a></li>
<li><a href="#">Page 3</a></li>
</ul>
</div>
</nav>
On a small screen (such as a phone or tablet) the navbar is going to take up too much space. Luckily the option to collase the navbar exists. You can accomplish this using the following example.
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">Site Name</a>
</div>
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Page 1</a></li>
<li><a href="#">Page 2</a></li>
<li><a href="#">Page 3</a></li>
</ul>
</div>
</nav>
<!-- A drop-down cannot be shown in the example unless we include Bootstrap's javascript file. -->
<!-- The id attributes are set in the example so clicking the links won't go to top of the page. -->
Navbar Default:
<nav class="navbar navbar-default" id="navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#navbar-default">Site Name</a>
</div>
<ul class="nav navbar-nav">
<li class="active"><a href="#navbar-default">Home</a></li>
<li><a href="#navbar-default">Page 1</a></li>
<li><a href="#navbar-default">Page 2</a></li>
<li><a href="#navbar-default">Page 3</a></li>
<button class="btn navbar-btn">Button</button>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="#navbar-default">Action Link #1</a></li>
<li><a href="#navbar-default">Action Link #2</a></li>
</ul>
</div>
</nav>
<!-- Navbar Inverse -->
<nav class="navbar navbar-inverse" id="navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#navbar-inverse">Site Name</a>
</div>
<ul class="nav navbar-nav">
<li class="active"><a href="#navbar-inverse">Home</a></li>
<li><a href="#navbar-inverse">Page 1</a></li>
<li><a href="#navbar-inverse">Page 2</a></li>
<li><a href="#navbar-inverse">Page 3</a></li>
<button class="btn navbar-btn">Button</button>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="#navbar-inverse">Action Link #1</a></li>
<li><a href="#navbar-inverse">Action Link #2</a></li>
</ul>
</div>
</nav>