Here’s how to create a fully functional and responsive navigation bar using Bootstrap 5. This tutorial provides a simple Bootstrap 5 Responsive Navbar Example that adapts seamlessly to different screen sizes, ensuring a consistent user experience across devices. Let’s get started.
Include Bootstrap CSS
To begin, you need to include the Bootstrap CSS in the <head> section of your HTML document. This will give you access to Bootstrap’s pre-defined classes and styles.
<link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css'>
Create the HTML Structure
Now, let’s create the HTML structure for the responsive navbar. This includes the navbar container, brand, toggler button, and the navigation links.
<nav class="navbar navbar-expand-lg navbar-dark" style="background-color: salmon;">
<div class="container-fluid">
<a class="navbar-brand fw-bold" href="#">Coding Yaar</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-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 me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li>
<hr class="dropdown-divider">
</li>
<li class="nav-item dropend">
<a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li>
<hr class="dropdown-divider">
</li>
<li class="nav-item dropend">
<a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li>
<hr class="dropdown-divider">
</li>
<li class="nav-item dropend">
<a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li>
<hr class="dropdown-divider">
</li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link">Link</a>
</li>
</ul>
<form class="d-flex" role="search">
<input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-light" type="submit">Search</button>
</form>
</div>
</div>
</nav>
<p class="mt-5 text-center">Get a step-by-step written explanation here: <a href="https://codingyaar.com/bootstrap-dropdown-submenu-on-hover" target="_blank">Bootstrap 5 Dropdown Submenu</a> </p>
<p class="mt-5 text-center">Get a step-by-step video explanation here: <a href="https://youtu.be/sqwk7xXBhFk" target="_blank">Bootstrap 5 Dropdown Submenu</a> </p>
Styling with CSS
You can customize the appearance of your navbar using CSS. Here are some optional CSS styles to enhance the look and feel of your Bootstrap responsive navbar. These styles primarily address color schemes, dropdown behaviors and general responsiveness
.navbar-nav .nav-link {
color: #fff;
}
.dropend .dropdown-toggle {
color: salmon;
margin-left: 1em;
}
.dropdown-item:hover {
background-color: lightsalmon;
color: #fff;
}
.dropdown .dropdown-menu {
display: none;
}
.dropdown:hover > .dropdown-menu,
.dropend:hover > .dropdown-menu {
display: block;
margin-top: 0.125em;
margin-left: 0.125em;
}
@media screen and (min-width: 769px) {
.dropend:hover > .dropdown-menu {
position: absolute;
top: 0;
left: 100%;
}
.dropend .dropdown-toggle {
margin-left: 0.5em;
}
}
With these steps, you’ve successfully implemented a Bootstrap Responsive Navbar Example. This navbar is not only visually appealing but also adapts to different screen sizes, ensuring a seamless user experience on all devices.