Bootstrap 4 Sidebar Menu Responsive Template

Bootstrap 4 Sidebar Menu Responsive Template
Code Snippet:dashboard-sidebar
Author: Puskar Adhikari
Published: January 11, 2024
Last Updated: January 22, 2024
Downloads: 24,640
License: MIT
Edit Code online: View on CodePen
Read More

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.

2 thoughts on “Bootstrap 4 Sidebar Menu Responsive Template”

    • Hi Ruben,

      You can add scroll to anchor functionality in menu in order to open the menu links on the same page. Here’s an example:

      Add unique IDs to the sections you want to scroll to. For example, let’s add IDs to the Dashboard, E-commerce, Components, etc.

      
      <div id="dashboard-section"> ... </div>
      <div id="ecommerce-section"> ... </div>
      <div id="components-section"> ... </div>
      
      

      Modify the sidebar links to include href attributes pointing to these IDs:

      <li class="sidebar-dropdown">
         <a href="#dashboard-section">
            <i class="fa fa-tachometer-alt"></i>
            <span>Dashboard</span>
            <span class="badge badge-pill badge-warning">New</span>
         </a>
      </li>
      <li class="sidebar-dropdown">
         <a href="#ecommerce-section">
            <i class="fa fa-shopping-cart"></i>
            <span>E-commerce</span>
            <span class="badge badge-pill badge-danger">3</span>
         </a>
      </li>
      <li class="sidebar-dropdown">
         <a href="#components-section">
            <i class="far fa-gem"></i>
            <span>Components</span>
         </a>
      </li>
      
      
      

      Implement JavaScript to handle smooth scrolling when these links are clicked. Here’s a sample script using jQuery:

      <script>
         $(document).ready(function() {
            $(".sidebar-dropdown a").on('click', function(event) {
               if (this.hash !== "") {
                  event.preventDefault();
                  var hash = this.hash;
                  $('html, body').animate({
                     scrollTop: $(hash).offset().top
                  }, 800, function(){
                     window.location.hash = hash;
                  });
               }
            });
         });
      </script>
      

      This script listens for clicks on the sidebar links ($(“.sidebar-dropdown a”)) and smoothly scrolls to the corresponding section based on the link’s href attribute.

      Ensure IDs on sections and href attributes on links match for the smooth scrolling to work correctly.

      Reply

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.

About CodeHim

Free Web Design Code & Scripts - CodeHim is one of the BEST developer websites that provide web designers and developers with a simple way to preview and download a variety of free code & scripts. All codes published on CodeHim are open source, distributed under OSD-compliant license which grants all the rights to use, study, change and share the software in modified and unmodified form. Before publishing, we test and review each code snippet to avoid errors, but we cannot warrant the full correctness of all content. All trademarks, trade names, logos, and icons are the property of their respective owners... find out more...

Please Rel0ad/PressF5 this page if you can't click the download/preview link

X