Author: | samholford |
---|---|
Views Total: | 11,719 views |
Official Page: | Go to website |
Last Update: | September 22, 2021 |
License: | MIT |
Preview:

Description:
This is a responsive and mobile-first off-canvas sidebar navigation built using Bootstrap 5’s offcanvas component.
How to use it:
1. Load the necessary Bootstrap 5 framework and Bootstrap Icons.
<link rel=”stylesheet” href=”/path/to/cdn/bootstrap.min.css” />
<link rel=”stylesheet” href=”/path/to/cdn/bootstrap-icons.min.css” />
<script src=”/path/to/cdn/bootstrap.min.js”></script>
2. The HTML structure for the offcanvas sidebar.
<nav class="offcanvas offcanvas-start show" tabindex="-1" id="offcanvas" data-bs-keyboard="false" data-bs-backdrop="true" data-bs-scroll="true"> <div class="offcanvas-header border-bottom"> <a href="/" class="d-flex align-items-center text-decoration-none offcanvas-title d-sm-block"> <h3> <i class="bi bi-chat-right-text-fill"></i> Sidebar </h3> </a> </div> <div class="offcanvas-body px-0"> <ul class="list-unstyled ps-0"> <li class="mb-1"> <button class="btn btn-toggle align-items-center rounded" data-bs-toggle="collapse" data-bs-target="#home-collapse" aria-expanded="true" > Home </button> <div class="collapse show" id="home-collapse" style=""> <ul class="btn-toggle-nav list-unstyled fw-normal pb-1 small"> <li><a href="/" class="rounded">Overview</a></li> <li><a href="#" class="rounded">Updates</a></li> <li><a href="#" class="rounded">Reports</a></li> </ul> </div> </li> <li class="mb-1"> <button class="btn btn-toggle align-items-center rounded collapsed" data-bs-toggle="collapse" data-bs-target="#dashboard-collapse" aria-expanded="false" > Dashboard </button> <div class="collapse" id="dashboard-collapse"> <ul class="btn-toggle-nav list-unstyled fw-normal pb-1 small"> <li><a href="#" class="rounded">Overview</a></li> <li><a href="#" class="rounded">Weekly</a></li> <li><a href="#" class="rounded">Monthly</a></li> <li><a href="#" class="rounded">Annually</a></li> </ul> </div> </li> <li class="mb-1"> <button class="btn btn-toggle align-items-center rounded collapsed" data-bs-toggle="collapse" data-bs-target="#orders-collapse" aria-expanded="false" > Orders </button> <div class="collapse" id="orders-collapse"> <ul class="btn-toggle-nav list-unstyled fw-normal pb-1 small"> <li><a href="#" class="rounded">New</a></li> <li><a href="#" class="rounded">Processed</a></li> <li><a href="#" class="rounded">Shipped</a></li> <li><a href="#" class="rounded">Returned</a></li> </ul> </div> </li> <li class="border-top my-3"></li> <li class="mb-1"> <button class="btn btn-toggle align-items-center rounded collapsed" data-bs-toggle="collapse" data-bs-target="#account-collapse" aria-expanded="false" > Account </button> <div class="collapse" id="account-collapse"> <ul class="btn-toggle-nav list-unstyled fw-normal pb-1 small"> <li><a href="#" class="rounded">New...</a></li> <li><a href="#" class="rounded">Profile</a></li> <li><a href="#" class="rounded">Settings</a></li> <li><a href="#" class="rounded">Sign out</a></li> </ul> </div> </li> </ul> </div> </nav>
3. Create a menu toggle button on the page.
<button id="sidebarCollapse" class="float-end" data-bs-toggle="offcanvas" data-bs-target="#offcanvas" role="button" aria-label="Toggle menu"> <span></span> <span></span> <span></span> <span></span> </button>
4. The custom styles for the offcanvas sidebar.
/* --------------------------------------------------- OFFCANVAS ESSENTIALS ----------------------------------------------------- */ .offcanvas-start { width: 250px; } /* Desktop view */ @media (min-width: 576px) { .container { padding-left: 250px; margin-left: inherit; } #sidebarCollapse { display: none; } .offcanvas-backdrop { display: none; } } /* --------------------------------------------------- MENU TOGGLE BUTTON ANIMATIONS ----------------------------------------------------- */ #sidebarCollapse { width: 40px; height: 40px; position: relative; margin: auto; -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); -webkit-transition: .5s ease-in-out; -moz-transition: .5s ease-in-out; -o-transition: .5s ease-in-out; transition: .5s ease-in-out; cursor: pointer; background: none; box-shadow: none; outline: none !important; border: none; } #sidebarCollapse span { display: block; position: absolute; height: 5px; width: 100%; background: #000; border-radius: 5px; opacity: 1; left: 0; -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); -webkit-transition: .25s ease-in-out; -moz-transition: .25s ease-in-out; -o-transition: .25s ease-in-out; transition: .25s ease-in-out; } #sidebarCollapse span:nth-child(1) { top: 0px; } #sidebarCollapse span:nth-child(2), #sidebarCollapse span:nth-child(3) { top: 15px; } #sidebarCollapse span:nth-child(4) { top: 30px; } #sidebarCollapse.active span:nth-child(1) { top: 15px; width: 0%; left: 50%; } #sidebarCollapse.active span:nth-child(2) { -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); } #sidebarCollapse.active span:nth-child(3) { -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); } #sidebarCollapse.active span:nth-child(4) { top: 15px; width: 0%; left: 50%; } /* --------------------------------------------------- SIDEBAR STYLES ----------------------------------------------------- */ .bi { vertical-align: -.125em; pointer-events: none; fill: currentColor; } .btn-toggle { display: inline-flex; align-items: center; padding: .25rem .5rem; font-weight: 600; color: rgba(0, 0, 0, .65); background-color: transparent; border: 0; } .btn-toggle:hover, .btn-toggle:focus { color: rgba(0, 0, 0, .85); background-color: #e5e5e5; } .btn-toggle::before { width: 1.25em; line-height: 0; content: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='rgba%280,0,0,.5%29' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M5 14l6-6-6-6'/%3e%3c/svg%3e"); transition: transform .35s ease; transform-origin: .5em 50%; } .btn-toggle[aria-expanded="true"] { color: rgba(0, 0, 0, .85); } .btn-toggle[aria-expanded="true"]::before { transform: rotate(90deg); } .btn-toggle-nav a { display: inline-flex; padding: .1875rem .5rem; margin-top: .125rem; margin-left: 1.25rem; text-decoration: none; } .btn-toggle-nav a:hover, .btn-toggle-nav a:focus { background-color: #e5e5e5; } .btn-toggle-nav a.active { font-weight: bold; } /* --------------------------------------------------- OPTIONAL NAVBAR HEADER THEME ----------------------------------------------------- */ .offcanvas-header { background-color: #0d6efd!important; color: white!important; }
5. The main offcanvas sidebar script.
var sidebarCollapse = document.getElementById("sidebarCollapse"); var offcanvas_el = document.querySelector("#offcanvas"); var offcanvas = bootstrap.Offcanvas.getOrCreateInstance(offcanvas_el); offcanvas_el.addEventListener('hide.bs.offcanvas', function () { sidebarCollapse.classList.remove('active'); }) offcanvas_el.addEventListener('show.bs.offcanvas', function () { sidebarCollapse.classList.add('active'); }) function toggleMyOffcanvas() { if (window.innerWidth < 576) { // Prevent hiding animation triggering if page first loaded in mobile view offcanvas_el.style.visibility = 'hidden'; if (offcanvas_el.classList.contains('show')) { offcanvas.hide(); } } else { if (!offcanvas_el.classList.contains('show')) { offcanvas.show(); } } } function highlightNav() { var paths = location.pathname.split("/"); // uri to array paths.shift(); // Remove domain name paths = '/' + paths.join('/'); // Add leading slash and join into a string paths = (paths == '/') ? '/' : paths.replace(/\/$/, ""); // Remove trailing slash if present const menuItem = document.querySelector('.offcanvas-body a[href="' + paths + '"]'); if (menuItem) { menuItem.classList.add('active'); } } window.onload = function() { toggleMyOffcanvas(); highlightNav(); } window.onresize = function() { toggleMyOffcanvas(); }