Bootstrap 4 Sidebar Menu Responsive Template

The “dashboard-sidebar” is a lightweight code snippet/template for Bootstrap 4 to create a responsive sidebar menu. This dashboard menu comes with a user profile, search box, dropdowns, badges, and Font Awesome icons. Basically, this menu template is specially designed for admin dashboards but it is also useful for general-purpose website templates.

How to create Responsive Sidebar Menu using Bootstrap 4

1. In the very first step, load Bootstrap 4 framework, jQuery, and Font Awesome by adding the following CDN links into the head tag of your webpage.

<!-- Bootstrap 4 CSS and JavaScript -->
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<!-- jQuery JS -->
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!-- Font Awesome 5 CSS -->
<link href="https://use.fontawesome.com/releases/v5.0.6/css/all.css" rel="stylesheet">
<!-- Style CSS -->
<link rel="stylesheet" href="css/style.css">

2. After that, create HTML structure for side bar menu as follows:

<div class="page-wrapper chiller-theme toggled">
<a id="show-sidebar" class="btn btn-sm btn-dark" href="#">
<i class="fas fa-bars"></i>
</a>
<nav id="sidebar" class="sidebar-wrapper">
<div class="sidebar-content">
<div class="sidebar-brand">
   <a href="#">pro sidebar</a>
   <div id="close-sidebar">
      <i class="fas fa-times"></i>
   </div>
</div>
<div class="sidebar-header">
   <div class="user-pic">
      <img class="img-responsive img-rounded" src="https://raw.githubusercontent.com/azouaoui-med/pro-sidebar-template/gh-pages/src/img/user.jpg"
         alt="User picture">
   </div>
   <div class="user-info">
      <span class="user-name">Jhon
      <strong>Smith</strong>
      </span>
      <span class="user-role">Administrator</span>
      <span class="user-status">
      <i class="fa fa-circle"></i>
      <span>Online</span>
      </span>
   </div>
</div>
<!-- sidebar-header  -->
<div class="sidebar-search">
   <div>
      <div class="input-group">
         <input type="text" class="form-control search-menu" placeholder="Search...">
         <div class="input-group-append">
            <span class="input-group-text">
            <i class="fa fa-search" aria-hidden="true"></i>
            </span>
         </div>
      </div>
   </div>
</div>
<!-- sidebar-search  -->
<div class="sidebar-menu">
   <ul>
      <li class="header-menu">
         <span>General</span>
      </li>
      <li class="sidebar-dropdown">
         <a href="#">
         <i class="fa fa-tachometer-alt"></i>
         <span>Dashboard</span>
         <span class="badge badge-pill badge-warning">New</span>
         </a>
         <div class="sidebar-submenu">
            <ul>
               <li>
                  <a href="#">Dashboard 1
                  <span class="badge badge-pill badge-success">Pro</span>
                  </a>
               </li>
               <li>
                  <a href="#">Dashboard 2</a>
               </li>
               <li>
                  <a href="#">Dashboard 3</a>
               </li>
            </ul>
         </div>
      </li>
      <li class="sidebar-dropdown">
         <a href="#">
         <i class="fa fa-shopping-cart"></i>
         <span>E-commerce</span>
         <span class="badge badge-pill badge-danger">3</span>
         </a>
         <div class="sidebar-submenu">
            <ul>
               <li>
                  <a href="#">Products
                  </a>
               </li>
               <li>
                  <a href="#">Orders</a>
               </li>
               <li>
                  <a href="#">Credit cart</a>
               </li>
            </ul>
         </div>
      </li>
      <li class="sidebar-dropdown">
         <a href="#">
         <i class="far fa-gem"></i>
         <span>Components</span>
         </a>
         <div class="sidebar-submenu">
            <ul>
               <li>
                  <a href="#">General</a>
               </li>
               <li>
                  <a href="#">Panels</a>
               </li>
               <li>
                  <a href="#">Tables</a>
               </li>
               <li>
                  <a href="#">Icons</a>
               </li>
               <li>
                  <a href="#">Forms</a>
               </li>
            </ul>
         </div>
      </li>
      <li class="sidebar-dropdown">
         <a href="#">
         <i class="fa fa-chart-line"></i>
         <span>Charts</span>
         </a>
         <div class="sidebar-submenu">
            <ul>
               <li>
                  <a href="#">Pie chart</a>
               </li>
               <li>
                  <a href="#">Line chart</a>
               </li>
               <li>
                  <a href="#">Bar chart</a>
               </li>
               <li>
                  <a href="#">Histogram</a>
               </li>
            </ul>
         </div>
      </li>
      <li class="sidebar-dropdown">
         <a href="#">
         <i class="fa fa-globe"></i>
         <span>Maps</span>
         </a>
         <div class="sidebar-submenu">
            <ul>
               <li>
                  <a href="#">Google maps</a>
               </li>
               <li>
                  <a href="#">Open street map</a>
               </li>
            </ul>
         </div>
      </li>
      <li class="header-menu">
         <span>Extra</span>
      </li>
      <li>
         <a href="#">
         <i class="fa fa-book"></i>
         <span>Documentation</span>
         <span class="badge badge-pill badge-primary">Beta</span>
         </a>
      </li>
      <li>
         <a href="#">
         <i class="fa fa-calendar"></i>
         <span>Calendar</span>
         </a>
      </li>
      <li>
         <a href="#">
         <i class="fa fa-folder"></i>
         <span>Examples</span>
         </a>
      </li>
   </ul>
</div>

3. Finally, add the following jQuery function to activate the Bootstrap 4 sidebar menu template.

jQuery(function ($) {

	$(".sidebar-dropdown > a").click(function () {
		$(".sidebar-submenu").slideUp(200);
		if (
			$(this)
			.parent()
			.hasClass("active")
		) {
			$(".sidebar-dropdown").removeClass("active");
			$(this)
				.parent()
				.removeClass("active");
		} else {
			$(".sidebar-dropdown").removeClass("active");
			$(this)
				.next(".sidebar-submenu")
				.slideDown(200);
			$(this)
				.parent()
				.addClass("active");
		}
	});

	$("#close-sidebar").click(function () {
		$(".page-wrapper").removeClass("toggled");
	});
	$("#show-sidebar").click(function () {
		$(".page-wrapper").addClass("toggled");
	});


});

That’s all! hopefully, this responsive sidebar menu template is helpful for your Bootstrap 4 projects. If you have any questions or suggestions, let me know by comment below.

Asif Mughal

I code and create web elements for amazing people around the world. I like work with new people. New people new Experiences.
I truly enjoy what I’m doing, which makes me more passionate about web development and coding. I am always ready to do challenging tasks whether it is about creating a custom CMS from scratch or customizing an existing system.