Responsive Sidebar Menu With Sub Menu Using Bootstrap 5
Responsive Sidebar Menu with Sub Menu Using Bootstrap 5
A responsive sidebar menu is an essential navigation section used in modern websites, admin dashboards, eCommerce stores, and web applications. It provides users with a clean and organized way to navigate between different sections while keeping the interface simple and user-friendly. This Responsive Sidebar Menu with Sub Menu is built using HTML, CSS, and Bootstrap 5, featuring expandable navigation links, smooth submenu transitions, and a fully responsive layout that works perfectly across desktops, tablets, and mobile devices.
This responsive sidebar menu uses HTML to create the navigation structure, Bootstrap 5 use to handle responsive layouts and collapse functionality, and CSS to customize the appearance of the sidebar with modern styling and interactive effects. The expandable submenu system helps organize multiple navigation links without cluttering the interface, making this project an excellent learning resource for beginners and a reusable sidebar template for developers building professional websites or admin panels.
Responsive Sidebar Menu with Sub Menu:
A Responsive Sidebar Menu with Sub Menu is a vertical navigation system that allows users to access different sections of a website through expandable and collapsible navigation links. Unlike traditional navigation bars, a sidebar can display multiple menu categories while keeping the interface clean and organized. In this sidebar project, HTML is used to build the sidebar structure using semantic elements such as <nav>, <ul>, <li>, <a>, and <div>, while Bootstrap 5 provides responsive utilities and the Collapse component to create smooth submenu toggle functionality without writing complex JavaScript.
The sidebar supports expandable submenus that open and close with smooth transitions, allowing users to navigate through multiple categories with ease. Custom CSS enhances the overall appearance by improving colors, spacing, typography, hover effects, icons, and active menu states, creating a modern and professional user experience. The responsive layout automatically adapts to different screen sizes, ensuring the sidebar remains functional and easy to use on desktops, laptops, tablets, and smartphones.
This responsive sidebar project is perfect for beginners who want to learn how responsive navigation systems are built using Bootstrap 5. It is equally useful for students, freelancers, and professional developers looking for a reusable sidebar navigation template for admin dashboards, CRM systems, eCommerce websites, learning management systems, or business applications. Since the code is clean and easy to customize, you can quickly add more menu items, submenu levels, icons, or branding elements to suit your project requirements.
Steps to Create a Responsive Sidebar Menu:
Follow these simple steps to build a responsive sidebar menu with expandable submenus using Bootstrap 5:
- Create a project folder and name it responsive-sidebar-menu-bootstrap-5.
- Inside the project folder, create two files named index.html and style.css.
- Add the Bootstrap 5 CDN link to your HTML document.
- Create the sidebar structure using semantic HTML elements such as
<nav>,<ul>,<li>,<a>, and<div>. - Add navigation links and organize them into expandable submenu sections.
- Use the Bootstrap 5 Collapse component to create smooth expand and collapse functionality for submenus.
<!DOCTYPE html>
<!-- TheProviders ----------------- youtube.com/@TheProvidersOfficial -->
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sidebar using Bootstrap 5</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="wrapper d-flex w-100">
<!-- Sidebar -->
<nav id="sidebar">
<div class="sidebar-header p-3">
<h3 class="text-white m-0 fs-5"><i class="fas fa-bars me-2"></i>Bootstrap 5 Sidebar</h3>
</div>
<ul class="list-unstyled my-4">
<p class="text-white text-uppercase py-2 px-3 fw-bold">The Providers</p>
<li>
<a href="#homeSubmenu" data-bs-toggle="collapse" class="dropdown-toggle">
<i class="fas fa-home me-2"></i>Home
</a>
<ul class="collapse list-unstyled" id="homeSubmenu">
<li><a href="#">Dashboard</a></li>
<li><a href="#">Overview</a></li>
</ul>
</li>
<li><a href="#"><i class="fas fa-info-circle me-2"></i>About</a></li>
<li>
<a href="#pageSubmenu" data-bs-toggle="collapse" class="dropdown-toggle">
<i class="fas fa-file-alt me-2"></i>Pages
</a>
<ul class="collapse list-unstyled" id="pageSubmenu">
<li><a href="#">Page 1</a></li>
<li><a href="#">Page 2</a></li>
</ul>
</li>
<li><a href="#"><i class="fas fa-envelope me-2"></i>Contact</a></li>
</ul>
<ul class="list-unstyled p-4">
<li>
<a href="#" class="btn btn-outline-light btn-sm fs-6 rounded-3 mb-2">
<i class="fas fa-download me-2"></i>Download
</a>
</li>
<li>
<a href="#" class="btn btn-light btn-sm text-primary fs-6 rounded-3">
<i class="fas fa-newspaper me-2"></i>Articles
</a>
</li>
</ul>
</nav>
<!-- Page Content -->
<div id="content">
<nav class="navbar navbar-light bg-light mb-4 ">
<div class="container-fluid">
<button id="sidebarCollapse" class="btn btn-primary">
<i class="fas fa-align-left me-2"></i>Toggle Sidebar
</button>
</div>
</nav>
<div class="bg-white rounded-4 p-4 mt-5 mb-5 shadow-lg">
<h2><i class="fas fa-tachometer-alt me-2"></i>Collapsible Sidebar using Bootstrap 5</h2>
<p>
<strong>Welcome to the improved Bootstrap 5 sidebar!</strong> This sidebar has been completely fixed
and enhanced with modern features. It includes proper Bootstrap 5 syntax, working collapse
functionality, smooth animations, and responsive design.
</p>
<p>
The sidebar now includes Font Awesome icons, proper dropdown menus that work correctly, and smooth
transitions. All the previous issues have been resolved including the typo in class names, outdated
Bootstrap attributes, and missing CSS styles.
</p>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js"></script>
<script>
document.getElementById('sidebarCollapse').addEventListener('click', function () {
document.getElementById('sidebar').classList.toggle('active');
});
</script>
</body>
</html>
Apply custom CSS styling to improve the sidebar layout, colors, typography, spacing, icons, and hover effects. Make the sidebar fully responsive so it works smoothly on desktops, tablets, and mobile devices. Save the project files and open index.html in your browser to test the responsive sidebar navigation system.
<style>
body {
font-family: 'Poppins', sans-serif;
background: #fafafa;
}
.text-primary {
color: #506bda !important;
}
#sidebar {
min-width: 250px;
max-width: 250px;
background: #506bda;
transition: all 0.3s;
height: 100vh;
}
#sidebar.active {
margin-left: -250px;
}
#sidebar .sidebar-header {
background: #3754c7;
}
#sidebar ul li a {
padding: 10px 20px;
display: block;
color: #fff;
text-decoration: none;
}
#sidebar ul li a:hover {
background: #fff;
color: #506bda;
}
#sidebar ul ul a {
padding-left: 40px !important;
background: #3754c7;
}
#content {
width: 100%;
padding: 20px;
transition: all 0.3s;
}
@media (max-width: 768px) {
#sidebar {
margin-left: -250px;
}
#sidebar.active {
margin-left: 0;
}
}
</style>
