Responsive Sidebar Menu with Sub Menu Using Bootstrap 4
Responsive Sidebar Menu with Sub Menu Using Bootstrap 4
A responsive sidebar menu is an important navigation component that helps users access different sections of a website quickly and efficiently. This Responsive Sidebar Menu with Sub Menu is built using HTML, CSS, and Bootstrap 4 to create a clean, modern, and user-friendly navigation system with expandable submenu items. The responsive design ensures smooth navigation across desktops, tablets, and mobile devices, making it suitable for admin dashboards, business websites, educational platforms, and web applications.
This project uses HTML to build the sidebar structure, Bootstrap 4 to provide a responsive layout and collapse functionality, and CSS to customize the appearance with modern styling, hover effects, and smooth transitions. Beginners can learn how responsive sidebar navigation works, while developers and freelancers can easily customize the template and integrate it into existing Bootstrap 4 projects for professional websites and dashboards.
Responsive Sidebar Menu with Sub Menu:
A Responsive Sidebar Menu with Sub Menu is a vertical navigation system that organizes website links into expandable categories, allowing users to browse content without cluttering the interface. In this project, HTML is used to create semantic navigation elements such as <nav>, <ul>, <li>, <a>, and <div>, while Bootstrap 4 provides the responsive grid system and Collapse component to expand and collapse submenu sections with smooth animations. Custom CSS enhances the sidebar by improving colors, spacing, typography, hover effects, icons, and active menu states, creating a professional and attractive navigation experience.
The expandable submenu functionality allows multiple navigation categories to remain organized while giving users quick access to pages only when needed. This approach improves usability, especially in websites that contain a large number of pages or dashboard modules. The responsive layout automatically adapts to desktops, laptops, tablets, and smartphones, ensuring a consistent navigation experience across different screen sizes without affecting performance or accessibility.
This bootstrap sidebar project is perfect for beginners who want to learn Bootstrap 4 navigation components and responsive layouts through a practical project. It is also an excellent reusable template for students, freelancers, and professional developers building admin panels, CRM systems, eCommerce dashboards, educational portals, or business websites. The clean and well-structured code makes it easy to customize menu items, submenu levels, colors, icons, and branding according to any project requirements.
Steps to Create a Responsive Sidebar Menu:
Follow these simple steps to build a responsive sidebar menu with expandable submenus using Bootstrap 4:
- Create a project folder and name it bootstrap-4-sidebar-menu.
- Inside the project folder, create two files named index.html and style.css.
- Add the Bootstrap 4 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 categories.
- Use the Bootstrap 4 Collapse component to expand and collapse submenu items with smooth interactions.
<!DOCTYPE html>
<!-- TheProviders ----------------- youtube.com/@TheProvidersOfficial -->
<html>
<head>
<title>Collapse sidebar in Bootstrap 4</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/js/all.min.js"></script>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="wrapper">
<nav id="sidebar">
<div class="sidebar-header">
<h3>Bootstrap Slider</h3>
</div>
<ul class="lisst-unstyled components">
<p>The Providers</p>
<li class="active">
<a href="#homeSubmenu" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle">Home</a>
<ul class="collapse list-unstyled" id="homeSubmenu">
<li>
<a href="#">Home 1</a>
</li>
<li>
<a href="#">Home 2</a>
</li>
</ul>
</li>
<li>
<a href="#">About</a>
</li>
<li>
<a href="#pageSubmenu" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle">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="#">Policy</a>
</li>
<li>
<a href="#">Contact Us</a>
</li>
</ul>
</nav>
<div id="content">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<button type="button" id="sidebarCollapse" class="btn btn-info">
<i class="fas fa-align-left"></i>
<span>Toggle Sidebar</span>
</button>
</div>
</nav>
<br><br>
<h2>Collapseible Sidebar using Bootstrap 4</h2>
<p>
It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).
</p>
<p>
It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).
</p>
<div class="line"></div>
<h3>Lorem Ipsum</h3>
<p>
It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).
</p>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<script>
$(document).ready(function () {
$('#sidebarCollapse').on('click', function () {
$('#sidebar').toggleClass('active');
});
});
</script>
</body>
</html>
Apply custom CSS styling to improve the sidebar design, spacing, typography, colors, 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;
}
p{
font-family: 'Poppins', sans-serif;
font-size: 1.1em;
font-weight: 300;
line-height: 1.7em;
color: #999;
}
a,
a:hover,
a:focus{
color: inherit;
text-decoration: none;
transition: all 0.3s;
}
/* Side Bar*/
#sidebar.active {
margin-left: -250px;
}
.wrapper{
display: flex;
text-decoration: none;
transition: all 0.3s;
}
#sidebar{
min-width: 250px;
max-width: 250px;
background: #7386D5;
color: #fff;
transition: all 0.3s;
}
#sidebar .sidebar-header{
padding: 20px;
background: #6d7fcc;
}
#sidebar ul.components{
padding: 20px 0;
border-bottom: 1px solid #47748b;
}
#sidebar ul p{
color: #fff;
padding: 10px;
}
#sidebar ul li a{
padding: 10px;
font-size: 1.1em;
display: block;
}
#sidebar ul li a:hover{
color: #7386D5;
background: #fff;
}
#sidebar ul li.active>a,
a[aria-expanded="true"] {
color: #fff;
background: #6d7fcc;
}
a[data-toggle="collapse"]{
position: relative;
}
.dropdown-toggle::after{
display: block;
position: absolute;
top: 50%;
right: 20%;
transform: translateY(-50%);
}
ul ul a{
font-size: 0.9em !important;
padding-left: 30px !important;
background: #6d7fcc;
}
#content{
width: 100%;
padding: 20px;
min-height: 100vh;
transition: all 0.3s;
}
@media (max-width: 768px) {
#sidebar {
margin-left: -250px;
}
#sidebar.active {
margin-left: 0;
}
#sidebarCollapse span {
display: none;
}
}
</style>
