A navbar is a user interface (UI) element that’s positioned at the top of a web page. It contains elements that make the navigational user experience more friendly by placing branding and navigational links that route to different components. In Bootstrap, we can use their documentation to create a navbar quickly that is fully functional and responsive.
In this article, we will review how to set up Bootstrap and take a look at some examples of Bootstrap Navbars in action.
Getting Started
The first thing we need to do to set up a Bootstrap Navbar is to ensure we have the proper dependencies. For this demonstration, we need Bootstrap, PopperJS, and jQuery. Take a look at Bootstrap’s Quick Start page for assistance with getting your dependencies added to your project.
It’s your decision with how you handle the dependency requirement, but the easiest, more beginner-friendly way is to use the content delivery network – the CDN – for jQuery, Popper.js, and Bootstrap. Be careful of the order of your <script> tags – order matters here.
You’re now ready to get started!
Using Bootstrap Documentation to Create a Navbar
On the left hand side of the Introduction/Getting Started page, you see a sidebar that links to various things. Take a look for the Components link and click on it. This will navigate you to the first of Bootstrap’s many available components: “Alerts”. If we take a look at the sidebar again, it now shows the different links to all the different components we have available to us.
Click on the Navbar component to get started. This will have the information we need.
How it Works
Navbars start with a basic <nav> or <div> element with a class of .navbar and .navbar-expand{-sm | -md | -lg | -xl}. This allows access to Bootstrap’s color scheme classes and also allows for responsive collapsing. If you are using a <div> tag, be sure to add role=”navigation” to explicitly identify it as a navigation element for assistive devices. Utility classes (my-0, my-2, etc.) can be used to control spacing.
Subcomponents
There are several built-in subcomponents that are available to use within our navbar. You can pick and choose what’s needed for your project.
| Subcomponent | Use |
| .navbar-brand | Company, product, logo, or project name. |
| .navbar-nav | Includes support for dropdowns |
| .navbar-toggler | Used in conjunction with the collapse plugin so that the navbar can be made responsive. |
| .form-inline | Custom form controls or actions |
| .navbar-text | Vertically centered strings of text |
| .collapse.navbar-collapse | Groups and/or hides navbar contents |
Here is an example of the Navbar component with most of the possible subcomponents included. This one will automatically collapse at the lg (large) breakpoint.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Bootstrap Navbar</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#"><img width="150" src="https://d30vrbc6r9jj52.cloudfront.net/web-illustrations/layout/ck_logo.png" /></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle smallcaps" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Bootcamps
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Popular Bootcamps</a>
<a class="dropdown-item" href="#">Bootcamp Prep</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Bootcamp Financing</a>
<a class="dropdown-item" href="#">Bootcamp Grads and Alumni</a>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle smallcaps" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Coding
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Coding Tools</a>
<a class="dropdown-item" href="#">Git</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">HTML</a>
<a class="dropdown-item" href="#">CSS</a>
<a class="dropdown-item" href="#">JS</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Python</a>
<a class="dropdown-item" href="#">Ruby</a>
<a class="dropdown-item" href="#">C++</a>
<a class="dropdown-item" href="#">Java</a>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle smallcaps" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Career Resources
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item smallcaps" href="#">Career Advice</a>
<a class="dropdown-item smallcaps" href="#">Interviews</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item smallcaps" href="#">Tech Cities</a>
<a class="dropdown-item smallcaps" href="#">Tech Salaries</a>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle smallcaps" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Tech Fields
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Web Design</a>
<a class="dropdown-item" href="#">Web Development</a>
<a class="dropdown-item" href="#">Software Engineering</a>
<a class="dropdown-item" href="#">Data Science</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link smallcaps" href="#">News & Commentary</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-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<script src="script.js"></script>
</body>
</html>The content between the <div> tags with the .navbar-toggler class is everything that will be collapsed into the hamburger menu when it hits the lg breakpoint.
Conclusion
The Bootstrap Documentation is very good when putting together a Navbar component. It’s a matter of picking and choosing what you need for your project and utilizing the code that Bootstrap provides for your project.
In this article we went over how to add Bootstrap to your project and created a sample navigation bar that can be used in a project. Use this as a springboard for your own project to create your own custom styled navbar!
About us: Career Karma is a platform designed to help job seekers find, research, and connect with job training programs to advance their careers. Learn about the CK publication.
