Bootstrap 4 Navigation Bar
Navigation Bars
A navigation bar is a navigation header that is placed at the top of the page:
Basic Navbar
With Bootstrap, a navigation bar can extend or collapse, depending on the screen size.
A standard navigation bar is created with the .navbar
class, followed by a responsive collapsing class: .navbar-expand-xl|lg|md|sm
(stacks the navbar vertically on extra large, large, medium or small screens).
To add links inside the navbar, use a <ul>
element with class="navbar-nav"
.
Then add <li>
elements with a .nav-item
class
followed by an <a>
element with a .nav-link
class:
Example
<!-- A grey horizontal navbar that becomes
vertical on small screens -->
<nav class="navbar navbar-expand-sm
bg-light">
<!-- Links -->
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Link
1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link
2</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link
3</a>
</li>
</ul>
</nav>
Try it Yourself »
Vertical Navbar
Remove the .navbar-expand-xl|lg|md|sm
class to create a vertical navigation bar:
Example
<!-- A vertical navbar -->
<nav class="navbar bg-light">
<!-- Links -->
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Link
1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link
2</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link
3</a>
</li>
</ul>
</nav>
Try it Yourself »
Colored Navbar
Use any of the .bg-color
classes to change the background color of the navbar (.bg-primary
,
.bg-success
, .bg-info
, .bg-warning
, .bg-danger
, .bg-secondary
, .bg-dark
and .bg-light
)
Tip: Add a white text color to all links in the navbar with the .navbar-dark
class, or use the .navbar-light
class to add a
black text color.
Example
<!-- Grey with black text -->
<nav class="navbar navbar-expand-sm bg-light navbar-light">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link"
href="#">Active</a>
</li>
<li
class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link
disabled" href="#">Disabled</a>
</li>
</ul>
</nav>
<!-- Black with white text -->
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">...</nav>
<!-- Blue with white text -->
<nav class="navbar navbar-expand-sm
bg-primary navbar-dark">...</nav>
Try it Yourself »
Active/disabled state: Add the .active
class to an
<a>
element to highlight the current link, or the .disabled
class to indicate that the link is un-clickable.
Brand / Logo
The .navbar-brand
class is used to highlight the brand/logo/project name of your page:
Example
<nav class="navbar navbar-expand-sm
bg-dark navbar-dark">
<a
class="navbar-brand" href="#">Logo</a>
...
</nav>
Try it Yourself »
When using the .navbar-brand
class on images, Bootstrap 4 will automatically style the image to fit the navbar vertically.
Example
<nav class="navbar navbar-expand-sm
bg-dark navbar-dark">
<a class="navbar-brand" href="#">
<img src="bird.jpg"
alt="Logo" style="width:40px;">
</a>
...
</nav>
Try it Yourself »
Collapsing The Navigation Bar
Very often, especially on small screens, you want to hide the navigation links and replace them with a button that should reveal them when clicked on.
To create a collapsible navigation bar, use a button with class="navbar-toggle",
data-toggle="collapse" and data-target="#thetarget"
. Then wrap the
navbar content (links, etc) inside a div element with class="collapse navbar-collapse"
,
followed by an id that matches the data-target
of the button: "thetarget".
Example
<nav class="navbar navbar-expand-md bg-dark
navbar-dark">
<!-- Brand -->
<a class="navbar-brand" href="#">Navbar</a>
<!-- Toggler/collapsibe Button -->
<button
class="navbar-toggler" type="button"
data-toggle="collapse" data-target="#collapsibleNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<!-- Navbar links -->
<div class="collapse navbar-collapse"
id="collapsibleNavbar">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link"
href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link"
href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link"
href="#">Link</a>
</li>
</ul>
</div>
</nav>
Try it Yourself »
Tip: You can also remove the .navbar-expand-md class to ALWAYS hide navbar links and display the toggler button.
Navbar With Dropdown
Navbars can also hold dropdown menus:
Example
<nav class="navbar navbar-expand-sm
bg-dark navbar-dark">
<!-- Brand -->
<a class="navbar-brand" href="#">Logo</a>
<!-- Links -->
<ul class="navbar-nav">
<li
class="nav-item">
<a class="nav-link" href="#">Link
1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link 2</a>
</li>
<!-- Dropdown -->
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbardrop"
data-toggle="dropdown">
Dropdown
link
</a>
<div class="dropdown-menu">
<a
class="dropdown-item" href="#">Link 1</a>
<a class="dropdown-item" href="#">Link 2</a>
<a class="dropdown-item" href="#">Link 3</a>
</div>
</li>
</ul>
</nav>
Try it Yourself »
Navbar Forms and Buttons
Add a <form>
element with class="form-inline"
to group inputs and
buttons side-by-side:
Example
<nav class="navbar navbar-expand-sm
bg-dark navbar-dark">
<form class="form-inline" action="/action_page.php">
<input class="form-control
mr-sm-2"
type="text" placeholder="Search">
<button class="btn btn-success" type="submit">Search</button>
</form>
</nav>
Try it Yourself »
You can also use other input classes, such as .input-group-prepend
or .input-group-append
to attach an icon or help text next to the input field. You will learn more about these classes in the Bootstrap Inputs chapter.
Example
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
<form class="form-inline" action="/action_page.php">
<div class="input-group">
<div
class="input-group-prepend">
<span class="input-group-text">@</span>
</div>
<input type="text"
class="form-control" placeholder="Username">
</div>
</form>
</nav>
Try it Yourself »
Navbar Text
Use the .navbar-text
class to vertical align any elements inside the navbar that are not links (ensures proper padding
and text color).
Example
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
<!--
Links -->
<ul class="navbar-nav">
<li
class="nav-item">
<a class="nav-link" href="#">Link
1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link 2</a>
</li>
</ul>
<!-- Navbar text-->
<span class="navbar-text">
Navbar text
</span>
</nav>
Try it Yourself »
Fixed Navigation Bar
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.
The .fixed-top
class makes the navigation bar fixed at
the top:
Example
<nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-top">
...
</nav>
Try it Yourself »
Use the .fixed-bottom
class to make the navbar stay at
the bottom of the page:
Example
<nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-bottom">
...
</nav>
Try it Yourself »
Use the .sticky-top
class to make the navbar fixed/stay at
the top of the page when you scroll past it. Note:
This class does not work in IE11 and earlier (will treat it as position:relative
).
Example
<nav class="navbar navbar-expand-sm bg-dark navbar-dark sticky-top">
...
</nav>
Try it Yourself »