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.
Responsive Bottom Navigation Bar Using HTML CSS & JavaScript
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 </a> <li href="#" class="nav-link"> <span class="mx-2">Home</span> </li> <li href="#" class="nav-link"> <span class="mx-2">About</span> </li> <li href="#" class="nav-link"> <span class="mx-2">Contact</span> </li> </ul> </div>
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> </a> </div>
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:active, .nav-link:focus, .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", () => { sidebar.classList.toggle("active-nav"); container.classList.toggle("active-cont"); });
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.
Be First to Comment