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.
Similar Code Snippets:
Simple Vertical Timeline in Bootstrap
Bootstrap 5 Testimonial Carousel
Portfolio Filter Gallery Bootstrap 5
Accordion Sidebar Menu with CSS and jQuery
Bootstrap 5 Navbar with Center Logo
OTP Input Field Using Bootstrap 5
Bootstrap 5 Sidebar Menu with Submenu Collapse/Hover Tutorial Demo
Bootstrap Navbar with Login and Signup
Bootstrap Login Form with Image
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.
Hello. I am new to programming. Download a menu from https://www.codehim.com and I would like help. When selecting an option, what change is necessary for the page to open on the same menu page?
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.
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.