Responsive Sidebar Navigation For Bootstrap 5

Category: Javascript , Menu & Navigation | March 3, 2021
Views Total:76,927 views
Official Page:Go to website
Last Update:March 3, 2021


Responsive Sidebar Navigation For Bootstrap 5


An extension to Bootstrap 5 that lets you create a responsive sidebar navigation (also called drawer navigation, off-canvas menu) on your next Bootstrap project.

How to use it:

1. Create the HTML for the sidebar navigation.

<div class="side-navbar active-nav d-flex justify-content-between flex-wrap flex-column" id="sidebar">
  <ul class="nav flex-column text-white w-100">
    <a href="#" class="nav-link h3 text-white my-2">
      Side Nav
    <li href="#" class="nav-link">
      <span class="mx-2">Home</span>
    <li href="#" class="nav-link">
      <span class="mx-2">About</span>
    <li href="#" class="nav-link">
      <span class="mx-2">Contact</span>

2. Add the menu toggle button to your main content.

<div class="p-1 my-container active-cont">
  Main Content Here
  Replace the menu toggle icon as per your needs
  <a class="btn border-0" id="menu-btn">
    <i class="bx bx-menu"></i>

3. The main styles for the sidebar navigation.

.side-navbar {
  width: 180px;
  height: 100%;
  position: fixed;
  margin-left: -300px;
  background-color: #100901;
  transition: 0.5s;
.nav-link:hover {
  background-color: #ffffff26;
.my-container {
  transition: 0.4s;
.active-nav {
  margin-left: 0;
/* for main section */
.active-cont {
  margin-left: 180px;
#menu-btn {
  background-color: #100901;
  color: #fff;
  margin-left: -62px;

4. The required JavaScript to enable the sidebar navigation.

var menu_btn = document.querySelector("#menu-btn");
var sidebar = document.querySelector("#sidebar");
var container = document.querySelector(".my-container");
menu_btn.addEventListener("click", () => {

You Might Be Interested In:

One thought on “Responsive Sidebar Navigation For Bootstrap 5

  1. Vannieca

    Hi may i know as to why when i inserted link inside the href=” “, the active nav is not highlighted when the page is being clicked on?


Leave a Reply