Responsive Sidebar Menu With Sub Menu Using Bootstrap 4

Learn how to create a responsive sidebar menu using Bootstrap 4.

Responsive Sidebar Menu With Sub Menu Using Bootstrap 4

This Responsive Sidebar Menu is built using HTML, CSS, and Bootstrap 4 to create a professional side navigation system with expandable submenus. The design helps organize website navigation efficiently while providing a clean and user-friendly interface for visitors.

The project uses Bootstrap 4 collapse components and toggle functionality to create interactive submenu sections. Multiple submenu levels can be implemented to improve navigation structure, making the sidebar ideal for admin dashboards, business websites, and web applications. The layout is fully responsive and works smoothly across desktops, tablets, and mobile devices.

Steps to Create a Responsive Sidebar Menu

Follow these simple steps to build a sidebar navigation bar with submenus:

Create a project folder, for example, bootstrap-4-sidebar-menu.
Inside the folder, create two files: index.html and style.css.
Add the Bootstrap 4 CDN link to your HTML document.
Create the sidebar structure using HTML and Bootstrap components.
Add navigation links and organize them into submenu categories.
Use Bootstrap 4 collapse functionality to expand and collapse submenu items.

                            
                                <!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 and user experience. Make the sidebar fully responsive for desktops, tablets, and mobile devices. Save the files and open the project in a browser to test the sidebar navigation.

                            
                                <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>

Download Code Files