Bootstrap Navbar
A navbar is the navigation header that sits at the top of most websites. Bootstrap 5 gives you a responsive navbar that automatically collapses into a hamburger menu on small screens, so your links stay usable on phones as well as on desktops.
What is a Bootstrap Navbar?
The Bootstrap navbar is a flexible navigation container. You build it with the base class .navbar, and then add a color scheme and a responsive breakpoint. The navbar can hold a brand/logo, a list of links, forms, buttons, and dropdowns. On large screens the links spread out in a row; when the screen gets narrow, they hide behind a toggle button that expands and collapses the menu.
To make a navbar responsive, you must pair it with a .navbar-expand-{breakpoint} class. This tells Bootstrap the screen size at which the navbar should switch from the collapsed hamburger view to the full horizontal view.
A Basic Responsive Navbar
The example below is a complete, working navbar. Notice how the toggle button targets the collapsible area by its id using data-bs-target, and how the .navbar-expand-lg class means the menu expands on large screens and up.
Basic navbar
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<nav class="navbar navbar-expand-lg bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">MySite</a>
<button class="navbar-toggler" type="button"
data-bs-toggle="collapse" data-bs-target="#mainNav">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="mainNav">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link active" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Jobs</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
</ul>
</div>
</div>
</nav>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>Color Schemes
You control the navbar colors with background utilities like bg-light, bg-dark, or bg-primary. When you use a dark background, add data-bs-theme="dark" to the nav element so the link and toggler text switches to a light color and stays readable.
Dark navbar with a brand and a button
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<nav class="navbar navbar-expand-lg bg-dark" data-bs-theme="dark">
<div class="container-fluid">
<a class="navbar-brand" href="#">Hyring</a>
<button class="navbar-toggler" type="button"
data-bs-toggle="collapse" data-bs-target="#topNav">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="topNav">
<ul class="navbar-nav me-auto">
<li class="nav-item"><a class="nav-link active" href="#">Home</a></li>
<li class="nav-item"><a class="nav-link" href="#">Pricing</a></li>
</ul>
<button class="btn btn-outline-light" type="button">Sign in</button>
</div>
</div>
</nav>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>The utility class me-auto (margin-end auto) pushes everything after it to the right. That is a common trick to keep your links on the left and a login button on the right.
Common Navbar Classes
Exercise: Bootstrap Navbar
What does a class like .navbar-expand-lg actually control on a navbar?
