Bootstrap Navigation Bar provides a responsive and customizable navigation component for creating menus with branding, links, dropdowns, and collapsible content.
Types of Bootstrap Navigation Bars
1. Basic Navbar
A basic navbar uses the .navbar class along with .navbar-expand-* to control its responsive behavior.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css"
rel="stylesheet">
<title>Bootstrap Navbar</title>
</head>
<body>
<nav class="navbar navbar-expand-lg bg-body-tertiary">
<div class="container-fluid">
<a class="navbar-brand" href="#">WebSiteName</a>
<div class="navbar-nav">
<a class="nav-link active" href="#">Home</a>
<a class="nav-link" href="#">Page 1</a>
<a class="nav-link" href="#">Page 2</a>
<a class="nav-link" href="#">Page 3</a>
</div>
</div>
</nav>
</body>
</html>
Output:
2. Dark Navbar
Bootstrap 5 does not use the Bootstrap 3 .navbar-inverse class. A dark navbar can be created using .navbar-dark with a dark background utility such as .bg-dark.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css"
rel="stylesheet">
<title>Dark Navbar</title>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container-fluid">
<a class="navbar-brand" href="#">WebSiteName</a>
<div class="navbar-nav">
<a class="nav-link active" href="#">Home</a>
<a class="nav-link" href="#">Page 1</a>
<a class="nav-link" href="#">Page 2</a>
<a class="nav-link" href="#">Page 3</a>
</div>
</div>
</nav>
</body>
</html>
Output:
3. Colored Navbar
Bootstrap 5 provides background utility classes such as .bg-primary, .bg-success, .bg-warning, .bg-danger, .bg-secondary, .bg-dark, and .bg-light for customizing the navbar background.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css"
rel="stylesheet">
<style>
.pastel-navbar {
background-color: #dbeafe;
}
.pastel-navbar .navbar-brand,
.pastel-navbar .nav-link {
color: #1e3a5f;
}
.pastel-navbar .nav-link:hover,
.pastel-navbar .nav-link.active {
color: #172554;
}
</style>
<title>Colored Navbar</title>
</head>
<body>
<nav class="navbar navbar-expand-lg pastel-navbar">
<div class="container-fluid">
<a class="navbar-brand" href="#">
WebSiteName
</a>
<div class="navbar-nav">
<a class="nav-link active" href="#">Home</a>
<a class="nav-link" href="#">Page 1</a>
<a class="nav-link" href="#">Page 2</a>
<a class="nav-link" href="#">Page 3</a>
</div>
</div>
</nav>
</body>
</html>
Output:
4. Right-Aligned Navbar
Bootstrap 5 uses flexbox utilities such as .ms-auto to push navigation items to the right side of the navbar.
<!--Driver Code Starts-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css"
rel="stylesheet">
<title>Right-Aligned Navbar</title>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<!--Driver Code Ends-->
<div class="container-fluid">
<a class="navbar-brand" href="#">WebSiteName</a>
<div class="navbar-nav ms-auto">
<a class="nav-link" href="#">Home</a>
<a class="nav-link" href="#">Register</a>
<a class="nav-link" href="#">Login</a>
</div>
</div>
<!--Driver Code Starts-->
</nav>
</body>
</html>
<!--Driver Code Ends-->
Output:
5. Fixed Navigation Bar
Bootstrap 5 provides .fixed-top and .fixed-bottom to keep a navbar fixed relative to the viewport.
<!--Driver Code Starts-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css"
rel="stylesheet">
<title>Fixed Navbar</title>
</head>
<body>
<!--Driver Code Ends-->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
<div class="container-fluid">
<a class="navbar-brand" href="#">GeeksforGeeks</a>
<div class="navbar-nav">
<a class="nav-link active" href="#">Home</a>
<a class="nav-link" href="#">About</a>
<a class="nav-link" href="#">Contact</a>
</div>
</div>
</nav>
<div class="container mt-5 pt-5">
<h2>Page Content</h2>
<p>
Scroll the page to see that the navbar remains fixed at the top.
</p>
</div>
<!--Driver Code Starts-->
</body>
</html>
<!--Driver Code Ends-->
Output:
6. Dropdown Menu Navbar
Bootstrap 5 provides dropdown components that can be integrated into a navbar. The data-bs-toggle="dropdown" attribute activates the dropdown.
<!--Driver Code Starts-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css"
rel="stylesheet">
<title>Dropdown Navbar</title>
</head>
<body>
<!--Driver Code Ends-->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container-fluid">
<a class="navbar-brand" href="#">WebsiteName</a>
<div class="navbar-nav">
<a class="nav-link active" href="#">Home</a>
<div class="nav-item dropdown">
<a class="nav-link dropdown-toggle"
href="#"
role="button"
data-bs-toggle="dropdown">
Page 1
</a>
<ul class="dropdown-menu">
<li>
<a class="dropdown-item" href="#">Page 1-1</a>
</li>
<li>
<a class="dropdown-item" href="#">Page 1-2</a>
</li>
<li>
<a class="dropdown-item" href="#">Page 1-3</a>
</li>
</ul>
</div>
<a class="nav-link" href="#">Page 2</a>
<a class="nav-link" href="#">Page 3</a>
</div>
</div>
</nav>
<!--Driver Code Starts-->
<script
src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js">
</script>
</body>
</html>
<!--Driver Code Ends-->
Output:
7. Collapsible Navigation Bar
Bootstrap 5 uses .navbar-toggler and .collapse to create responsive navigation. The navigation links collapse behind a toggle button on smaller screens.
<!--Driver Code Starts-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css"
rel="stylesheet">
<title>Collapsible Navbar</title>
</head>
<body>
<!--Driver Code Ends-->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container">
<a class="navbar-brand" href="#">
GeeksforGeeks
</a>
<button class="navbar-toggler"
type="button"
data-bs-toggle="collapse"
data-bs-target="#navbarContent"
aria-controls="navbarContent"
aria-expanded="false"
aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarContent">
<ul class="navbar-nav ms-auto">
<li class="nav-item">
<a class="nav-link active" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
</ul>
</div>
</div>
</nav>
<!--Driver Code Starts-->
<script
src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js">
</script>
</body>
</html>
<!--Driver Code Ends-->
Output:
