In a website without a navigation bar, it's much harder to find what you need. And don't even get us started on the terrible user experience!
Navigation bars make browsing effortless - it gets almost intuitive as you keep using it. In this tutorial, we will explain using the Bootstrap navigation bar (also called simply Bootstrap navbar). You will be introduced to different ways to display and place it, as well as elements you can include inside it.
This tutorial will also be full of Bootstrap navbar examples that will help you understand the different ways to use this navigation bar.
Contents
Bootstrap Navbar: Main Tips
- Using Bootstrap 4, you can create navigation bar.
- A navigation bar is used for containing the navigation interface of a website and is commonly displayed above or on the side of the content.
Navigation Bar Basics
Bootstrap 4 navbar is a structure that can extend or collapse depending on screen size and neatly style the navigation links in your website. You can create a simple navigation bar by creating a <nav> element and applying the .navbar class, along with one that specifies the responsive collapsing, such as:
- .navbar-expand-sm
- .navbar-expand-mg
- .navbar-expand-lg
- .navbar-expand-xl
Inside, the navigation links are displayed as the previous article describes.
Types Of Display
To make Bootstrap navbar display the list of navigation links vertically, you simply have to remove the .navbar-expand-* class:
<!-- A black navbar -->
<nav class="bg-dark navbar">
<!-- Navigation menu links -->
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Option</a>
</li>
</ul>
</nav>To have the links justified according to the center of the page, use .justify-content-center class:
<!-- A black centered horizontal navbar which will become vertical on a medium screen -->
<nav class="bg-dark navbar-expand-sm navbar justify-content-center">
<!-- Navigation menu links -->
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Option</a>
</li>
</ul>
</nav>You can also use contextual classes to change the text and background color:
.bg-primary.bg-secondary.bg-info.bg-success.bg-danger.bg-warning.bg-light.bg-dark
In addition to that, .navbar-light colors the text black and .navbar-dark colors the text white. You're welcome.
Here are a few Bootstrap navbar examples to help you understand how this works:
<!-- A black horizontal navbar with white text which will become vertical on a medium screen -->
<nav class="bg-dark navbar-expand-sm navbar navbar-light">
<!-- Navigation menu links -->
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Option</a>
</li>
</ul>
</nav><!-- A black horizontal navbar which will become vertical on a medium screen -->
<nav class="bg-dark navbar-expand-sm navbar">
<!-- Navigation menu links -->
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Option</a>
</li>
</ul>
</nav>It is also possible to make the Bootstrap navbar collapse, thus turning it into a collapsible element. To do that, you should create a button element which toggles whether the navigation menu is displayed or not, and then the navigation menu itself.
Let's review this in more detail. The first step is assigning the .navbar-toggle class to the button, setting the data-toggle attribute to collapse and the data-target to the ID of the container that has the navigation menu inside. This way, you will be able to to make the Bootstrap navbar collapse.
The navigation menu should be wrapped inside a container with the .collapse and .navbar-collapse classes, as well as an ID that is targeted by the button's data-target attribute:
<nav class="bg-dark navbar-dark navbar-expand-lg navbar">
<!-- Button for toggling the visibility of the menu -->
<button type="button" data-target="#collapseNavbar" data-toggle="collapse" class="navbar-toggler">
<span class="navbar-toggler-icon"></span>
</button>
<!-- Navigation menu container -->
<div class="navbar-collapse collapse" id="collapseNavbar">
<!-- Navigation links -->
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="">Option</a>
</li>
</ul>
</div>
</nav>
Available Elements
It is possible to add a logo/brand symbol to the navigation bar by adding an <a> element with the .navbar-brand class and an <img> element inside, displaying the image you'd like to have as the logo. This will nicely scale the image to fit into your navigation bar:
<!-- A black horizontal navbar which will become vertical on a medium screen -->
<nav class="bg-dark navbar-expand-md navbar">
<!-- Navigation menu links -->
<ul class="navbar-nav">
<a class="navbar-brand" href="">
<img src="sitelogo.jpg" alt="sitelogo">
</a>
<a class="navbar-brand" href="">Website Title</a>
<li class="nav-item">
<a class="nav-link" href="#">Option</a>
</li>
</ul>
</nav>Dropdowns are also compatible with navigation bar:
<nav class="bg-dark navbar-dark navbar-expand-lg navbar">
<!-- Dropdown menu -->
<ul class="navbar-nav">
<li class="dropdown nav-item">
<a href="#" class="dropdown-toggle nav-link" data-toggle="dropdown" id="navbardropdown">
Click here
</a>
<div class="dropdown-menu">
<a href="#" class="dropdown-item">Dropdown option</a>
<!-- Dropdown menu links -->
</div>
</li>
</ul>
</nav>
To create HTML forms inside navigation bars, use the .form-inline class on the <form> element.
<!-- A black horizontal navbar which will become vertical on a medium screen -->
<nav class="bg-dark navbar-expand-md navbar">
<!-- Navigation menu search form template -->
<form class="form-inline">
<input type="text" class="mr-sm-2 form-control" placeholder="Enter keyword">
<button type="submit" class="btn btn-primary">Search</button>
</form>
</nav>Navigation bars are also compatible with input groups, but we'll discuss that a bit more in later tutorials. If you're curious anyway, try running the code snippet below in a code editor:
<!-- A black horizontal navbar which will become vertical on a medium screen -->
<nav class="bg-dark navbar-expand-md navbar">
<!-- Navigation menu entry field template -->
<form class="form-inline">
<div class="input-group">
<input type="text" class="form-control" placeholder="Username">
<div class="input-group-prepend">
<span class="input-group-text">@mail.org</span>
</div>
</div>
</form>
</nav>To add text to navigation bars, use a <span> element with the .navbar-text class.
<!-- A black horizontal navbar which will become vertical on a medium screen -->
<nav class="bg-dark navbar-expand-md navbar">
<!-- Navigation menu text -->
<span class="navbar-text">
Text on the navigation bar
</span>
</nav>Navbar Position
In some cases, you might wish to choose a permanent location for your navbar Bootstrap. We'll now cover the options that allow you to fix it in a chosen position that will not be affected by scrolling.
You may fix the Bootstrap 4 navbar to the top of the window using the .fixed-top or to the bottom using .fixed-bottom element:
<!-- A black horizontal navbar which will become vertical on a medium screen -->
<nav class="bg-dark navbar-expand-md navbar fixed-top">
<!-- Navigation menu links -->
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Option</a>
</li>
</ul>
</nav>
<h1>
Content
</h1>Use the .sticky-top class to make the Bootstrap navbar fixed/stay at the top of the page when you scroll past it:
<nav class="navbar navbar-expand-sm bg-dark navbar-dark sticky-top">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Option</a>
</li>
</ul>
</nav>Note: This class does not work in IE 11 and earlier versions (will be treated as position:relative).
Bootstrap Navbar: Summary
- Bootstrap navigation bar (also known simply as Bootstrap navbar) is usually placed above the content or on the side.
- Navigation bar contains website's navigation interface.