The navbar component of Bootstrap 4 is used to create header navigation on your website. The navbar header menu may contain a brand logo, navigation links to the main parts of the website, dropdown menus, inline forms, etc. The navbar is fully responsive and adjusts to the user’s screen by using built-in classes.
Bootstrap 4 also has built-in classes for creating the navbar that is fixed on top or bottom. There is also a class for creating a sticky menu as using the navbar component.
I will show you all these examples along with coloring and customizing the navbar in this tutorial, so keep reading below.
A navbar example with different sub-components
Let me start with a navbar example that contains different elements. This navbar example includes a brand text, a few links, and a dropdown menu with inner links. Besides, an inline form is also used for searching the website. Have a look at the output and complete code.
I will recommend you copy the complete code of all examples in your IDE and run it locally to see how it looks.
Complete code for this example:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</head>
<body>
<div class="container">
<h3>A demo of Bootstrap navbar</h3>
<nav class="navbar navbar-expand-lg navbar-light bg-info">
<a class="navbar-brand text-light" href="https://www.jquery-az.com/" >Slogan/Logo</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#demo-navbar" aria-controls="demo-navbar" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="demo-navbar">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link text-light" href="https://www.jquery-az.com/">Tutorials <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link text-light" href="https://www.jquery-az.com/bootstrap-4/">Bootstrap</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle text-light" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Web
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="https://www.jquery-az.com/jquery-tips/">jQuery Tutorials</a>
<a class="dropdown-item" href="https://www.jquery-az.com/php-tutorials/">PHP Tutorials</a>
<a class="dropdown-item" href="https://www.jquery-az.com/javascript-tutorials/">JavaScript Tutorials</a>
<a class="dropdown-item" href="https://www.jquery-az.com/css-tutorials/">CSS Tutorials</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="https://www.jquery-az.com/alerts-js-bootstrap-jquery/">Alerts</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link disabled text-warning" href="#">Disabled</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-warning my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
</div>
</body>
</html>
Note: As this menu uses a dropdown menu, it also requires you to refer to the Bootstrap JS file along with jQuery.
The same menu will look like this on the smaller devices (smartphones etc.):
So, the navbar is created by using the <nav> tag where .navbar class is assigned. There, the .navbar-light is also used for the theme of navbar. This is used in combination with the bg-[contextual color] that sets the theme of navbar. More examples coming up for theming the navbar.
Exploring the components code in navbar
For using the logo/brand or slogan in the navbar, you may use the .navbar-brand class in an anchor tag. You may also apply this class to other elements, however, <a> works better.
For example, I used this in above example:
<nav class=”navbar navbar-expand-lg navbar-light bg-primary”>
<a class=”navbar-brand text-light” href=”https://www.jquery-az.com/” >Slogan/Logo</a>
You may also use <span> with h1 as follows:
<span class=”navbar-brand text-light mb-0 h1″>Slogan/Logo</span>
There, you may also set the logo image rather than using the text or text/logo combination as well:
The sample code for the logo:
<nav class="navbar navbar-expand-lg navbar-light bg-success"> <a class="navbar-brand" href="#"> <img src="https://www.jquery-az.com/wp-content/uploads/2017/10/logo.jpg" width="60" height="40" alt=""> </a>
See the complete code and output on the example page.
How to include dropdown menu in navbar
You may also include the dropdown menus in the navbar. Simply use the markup of dropdown menu (explained in its tutorial: Bootstrap 4 dropdowns) in the ,<li> tag with .nav-item and .dropdown classes.
In the following example, I have used link and button dropdowns in the navbar with various classes. The navbar-light bg-warning combination is used for the theme of navbar. The dropdown colors are also set by using text utility classes. While the .btn-secondary is used for the button dropdown.
Have a look:
The markup:
<div class="container"> <h3>A demo of Bootstrap navbar</h3> <nav class="navbar navbar-expand-lg navbar-light bg-warning"> <a class="navbar-brand" href="#"> <img src="https://www.jquery-az.com/wp-content/uploads/2017/10/logo.jpg" width="60" height="40" alt=""> </a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#demo-navbar" aria-controls="demo-navbar" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="demo-navbar"> <ul class="navbar-nav mr-auto"> <li class="nav-item active"> <a class="nav-link text-dark" href="https://www.jquery-az.com/">Tutorials <span class="sr-only">(current)</span></a> </li> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle text-dark" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Web </a> <div class="dropdown-menu" aria-labelledby="navbarDropdown"> <a class="dropdown-item" href="https://www.jquery-az.com/jquery-tips/">jQuery Tutorials</a> <a class="dropdown-item" href="https://www.jquery-az.com/php-tutorials/">PHP Tutorials</a> <a class="dropdown-item" href="https://www.jquery-az.com/javascript-tutorials/">JavaScript Tutorials</a> <a class="dropdown-item" href="https://www.jquery-az.com/css-tutorials/">CSS Tutorials</a> <div class="dropdown-divider"></div> <a class="dropdown-item" href="https://www.jquery-az.com/alerts-js-bootstrap-jquery/">Alerts</a> </div> </li> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle text-dark" href="#" id="programmingDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Programming </a> <div class="dropdown-menu" aria-labelledby="programmingDropdown"> <a class="dropdown-item" href="https://www.jquery-az.com/python-tutorials/">Python Tutorials</a> <a class="dropdown-item" href="https://www.jquery-az.com/java-tutorials/">Java Tutorials</a> <a class="dropdown-item" href="https://www.jquery-az.com/vba-excel-tutorials/">VBA Tutorials</a> </div> </li> <li class="nav-item dropdown"> <button class="btn btn-secondary dropdown-toggle" type="button" id="btnDropdownDemo" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Open Web Tutorials </button> <div class="dropdown-menu" aria-labelledby="btnDropdownDemo"> <a class="dropdown-item" href="https://www.jquery-az.com/jquery-tips/">jQuery Tutorials</a> <a class="dropdown-item" href="https://www.jquery-az.com/php-tutorials/">PHP Tutorials</a> <a class="dropdown-item" href="https://www.jquery-az.com/javascript-tutorials/">JavaScript Tutorials</a> <a class="dropdown-item" href="https://www.jquery-az.com/css-tutorials/">CSS Tutorials</a> <div class="dropdown-divider"></div> <a class="dropdown-item" href="https://www.jquery-az.com/alerts-js-bootstrap-jquery/">Alerts</a> </div> </li> </ul> </div> </nav> </div>
How to use forms in navbar
The navbar also supports inline forms. These may be useful for site search form with a textbox and search button. You may also use login form or subscription form there.
For including a form in the navbar, use the .form-inline class in the <form> tag and place form controls inside it.
Have a look at the navbar with only form controls and button (a login form):
The code of navbar with a form:
<nav class="navbar navbar-expand-lg navbar-light bg-info"> <a class="navbar-brand" href="#"> Slogan/Logo </a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#demo-navbar" aria-controls="demo-navbar" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="demo-navbar"> <ul class="navbar-nav mr-auto"> <!--Form code starts here--> <form class="form-inline"> <label class="sr-only" for="UsernameInlineFormInput">Username</label> <div class="input-group mr-sm-2"> <div class="input-group-prepend"> <div class="input-group-text">@</div> </div> <input type="text" class="form-control" id="UsernameInlineFormInput" placeholder="Enter User Name"> </div> <label class="sr-only" for="passwordInlineFormInputGroup">Name</label> <input type="password" class="form-control mr-sm-2" id="passwordInlineFormInputGroup" placeholder="Password"> <div class="form-check mr-sm-2"> <input class="form-check-input" type="checkbox" id="inlineFormCheck"> <label class="form-check-label" for="inlineFormCheck"> Remember me </label> </div> <button type="submit" class="btn btn-dark">Submit</button> </form> <!--Form code ends here --> </ul> </div> </nav> </div>
Justify the form right example
See the sample code with the same form as in above example that is aligned right.
Online demo and code
The markup:
<div class="container"> <h3>A demo of Bootstrap navbar</h3> <nav class="navbar navbar-light bg-warning"> <a class="navbar-brand">Logo/Slogan</a> <form class="form-inline"> <label class="sr-only" for="usrname">Username</label> <div class="input-group mr-sm-2"> <div class="input-group-prepend"> <div class="input-group-text ">@</div> </div> <input type="text" class="form-control" id="usrname" placeholder="Enter User Name"> </div> <label class="sr-only" for="pass">Name</label> <input type="password" class="form-control mr-sm-2" id="pass" placeholder="Password"> <div class="form-check mr-sm-2"> <input class="form-check-input" type="checkbox" id="inlineFormCheck"> <label class="form-check-label" for="inlineFormCheck"> Remember me </label> </div> <button type="submit" class="btn btn-primary">Sign In</button> </form> </nav> </div>
How to color navbar example
Until now you have seen various colored navbar examples. For coloring the navbar, you may use the built-in background classes or use the inline style tag and specify the background color there. You may also create a class in external CSS or under the <style> section.
You should use the .navbar-light for light color backgrounds and .navbar-dark for the dark background colors.
See the example below where different background color classes are used for creating the navbar:
See online demo and code
The complete code of info navbar:
<nav class="navbar navbar-expand-lg navbar-dark bg-info "> <ul class="navbar-nav"> <li class="nav-item active"> <a class="nav-link text-light" href="https://www.jquery-az.com/jquery-tips/">jQuery</a> </li> <li class="nav-item"> <a class="nav-link text-light" href="https://www.jquery-az.com/bootstrap-4/">Bootstrap</a> </li> <li class="nav-item"> <a class="nav-link text-light" href="https://www.jquery-az.com/javascript-tutorials/">JavaScript</a> </li> <li class="nav-item"> <a class="nav-link disabled text-light" href="#">Coming Up</a> </li> </ul> </nav>
See the complete code for other navbars as well on the example page.
Note: The text color is set at link tags.
Using custom background scheme in Bootstrap 4 navbar
You may also use some other background color scheme for designing the navbar that is based on Bootstrap 4. You may use the style attribute inline or use in external or internal CSS (under style section).
See the following demo where eight different gradient backgrounds are used for theming the navbar. All classes are placed in the style section under the <head> tag. The complete code can be copied from the example page:
The CSS:
<style>
.nav-bk{
background: #40E0D0;
background: -webkit-linear-gradient(to right, #FF0080, #FF8C00, #40E0D0);
background: linear-gradient(to right, #FF0080, #FF8C00, #40E0D0);
}
.nav-bk2{
background: #23074d;
background: -webkit-linear-gradient(to right, #cc5333, #23074d);
background: linear-gradient(to right, #cc5333, #23074d);
}
.nav-bk3{
background: #00F260;
background: -webkit-linear-gradient(to right, #0575E6, #00F260);
background: linear-gradient(to right, #0575E6, #00F260);
}
.nav-bk4{
background: #070000;
background: -webkit-linear-gradient(to right, #070000, #4C0001, #070000);
background: linear-gradient(to right, #070000, #4C0001, #070000);
}
.nav-bk5{
background: #0575E6;
background: -webkit-linear-gradient(to right, #021B79, #0575E6);
background: linear-gradient(to right, #021B79, #0575E6);
}
.nav-bk6{
background: #2196f3;
background: -webkit-linear-gradient(to right, #f44336, #2196f3);
background: linear-gradient(to right, #f44336, #2196f3);
}
.nav-bk7{
background: #c2e59c;
background: -webkit-linear-gradient(to right, #64b3f4, #c2e59c);
background: linear-gradient(to right, #64b3f4, #c2e59c);
}
.nav-bk8{
background: #5f2c82;
background: -webkit-linear-gradient(to right, #49a09d, #5f2c82);
background: linear-gradient(to right, #49a09d, #5f2c82);
}
</style>
One of the navbar markup:
<nav class="navbar navbar-expand-lg navbar-dark nav-bk"> <ul class="navbar-nav"> <li class="nav-item active"> <a class="nav-link text-light" href="https://www.jquery-az.com/jquery-tips/">jQuery</a> </li> <li class="nav-item"> <a class="nav-link text-light" href="https://www.jquery-az.com/bootstrap-4/">Bootstrap</a> </li> <li class="nav-item"> <a class="nav-link text-light" href="https://www.jquery-az.com/javascript-tutorials/">JavaScript</a> </li> <li class="nav-item"> <a class="nav-link disabled text-light" href="#">Coming Up</a> </li> </ul> </nav>
Creating top fixed navbar demo
Use the .fixed-top class in the <nav> tag for creating a navbar that is fixed on top of the page. Have a look at this demo where I used this class and some dummy text for scroll bar. Scroll down the demo page and see how the top bar is fixed:
See online demo and code
The <nav> markup is as follows for this example:
<nav class=”navbar fixed-top navbar-expand-lg navbar-light bg-info “>
Create bottom fixed navbar
Similarly, just use the fixed-bottom class for making the navbar fixed at bottom of the web page. The above markup for bottom fixed navbar will be:
<nav class=”navbar fixed-bottom navbar-expand-lg navbar-light bg-info “>
The example of sticky top navbar
For creating a sticky navbar on top, use the .sticky-top class. In that case, the content above the navbar is scrollable. As it passes down, the navbar sticks on top. See this demo, where I used dummy text above the navbar. Scroll down and see how it sticks on top:
Online demo and code
The markup with sticky class for the above used navbar:
<nav class=”navbar sticky-top navbar-expand-lg navbar-light bg-info “>