Responsive Side Navbar Navigation With Bootstrap 5

Side Navbar is an extension for Bootstrap 5 that allows you to create responsive sidebar navigation (also called tray navigation, menu outside the canvas) in your next Bootstrap project.

How to make use of 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 important content material.

<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 important types 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 allow 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", () => {

Responsive Sidebar Navigation, Side Navbar Plugin/Github

See Demo And Download

Official Website(harshitjain-hj): Click Here

This superior jQuery/javascript plugin is developed by harshitjain-hj. For extra advanced usage, please go to the official website.