Off-canvas Accordion Menu With Bootstrap 5

Preview:

Description:

Sidebar menus are great. ​They bring order to your website, saving your visitors from the chaos that is horizontal scrolling. ​One problem with sidebar menus though – they take up valuable screen space and even hide parts of the webpage you’re viewing! This is where an off-canvas menu might be useful.

In this post, we’ll show you how to create an off-canvas sidebar navigation with an accordion menu and hide it until a user wants it, then display it without distracting them.

This Off-canvas Accordion Menu is made with the latest Bootstrap 5 framework, which also works with Bootstrap 4.

See It In Action:

How to use it:

1. Include the latest Bootstrap 5 or Bootstrap 4 framework.

<link rel="stylesheet" href="/path/to/cdn/bootstrap.min.css" />
<script src="/path/to/cdn/bootstrap.bundle.min.js"></script>

2. Create the HTML for the off-canvas sidebar navigation that includes an accordion menu and a close button:

<div id="mySidebar" class="sidebar">
  <!-- Close Button -->
  <a class="closebtn collapsed" id="closeNav" type="button" aria-expanded="false">
    Close
  </a>
  <!-- Accordion Menu -->
  <div class="accordion text-left" id="accordionExample">
    <div class="accordion-item">
      <div class="accordion-header" id="headingOne">
        <h5 class="mb-0">
          <button class="btn accordion-button collapsed" type="button" data-bs-toggle="collapse"
            data-bs-target="#collapseOne" aria-expanded="false" aria-controls="collapseOne">
            Accordion 1
          </button>
        </h5>
      </div>
      <div id="collapseOne" class="accordion-collapse collapse" aria-labelledby="headingOne" data-bs-parent="#accordionExample">
        <div class="accordion-body text-left">
          <p>
            Accordion 1 Content
          </p>
        </div>
      </div>
    </div>
    <div class="accordion-item">
      <div class="accordion-header" id="headingTwo">
        <h5 class="mb-0">
          <button class="btn btn-link accordion-button collapsed custom-button" type="button" data-bs-toggle="collapse"
            data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
            Accordion 2
          </button>
        </h5>
      </div>
      <div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo" data-bs-parent="#accordionExample">
        <div class="accordion-body">
          <p>
            Accordion 2 Content
          </p>
        </div>
      </div>
    </div>
    <!-- More Accordion Items Here -->
  </div>
</div>

3. Create a toggle button to reveal the sidebar navigation.

<button class="openbtn" id="openNav">
  ☰ open
</button>

4. The main CSS styles for the sidebar navigation.

.btn {
  padding: .375rem !important;
  color: #f1f1f1;
  font-size: 20px;
  background-color: transparent;
  text-transform: lowercase;
}
.btn:hover, .btn:focus {
  color: #fff;
  text-decoration: none;
  box-shadow: none;
}
.stronger {
  color: #8bc34a !important;
  font-weight: 700
}
.sidebar {
  height: 100%;
  width: 0;
  position: fixed;
  white-space: nowrap;
  z-index: 999999;
  top: 0;
  left: 0;
  /* background-color: rgba(27,80,119,0.3); */
  background-color: rgba(0,0,0,0.6);
  border-right: 1px solid #000;
  overflow-x: hidden;
  overflow-y: auto;
  transition: 0.5s;
  padding-top: 30px;
  font-size: 18px;
}
/* width */
::-webkit-scrollbar {
    width: 7px;
  }
  
  /* Track */
  ::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0);
    opacity: 0; 
  }
   
  /* Handle */
  ::-webkit-scrollbar-thumb {
    background: rgba(136, 136, 136, 0.20);
    opacity: 0.20; 
  }
  
  /* Handle on hover */
  ::-webkit-scrollbar-thumb:hover {
    background:rgba(241, 241, 241, 0.20);
    opacity: 0.20; 
  }
.sidebar a {
    padding: 10px 15px;
    text-decoration: none;
    font-size: 25px;
    color: rgba(255, 255, 255, 1);
    display: block;
    opacity: 0;
    /* transition: 0.5s; */
}
.sidebar a:hover {
  color: rgba(255,255,255, 1);
}
.sidebar .closebtn {
  position: absolute;
  top: 0;
  right: 0;
  font-size: 20px;
  margin-left: 50px;
  cursor: pointer;
  user-select: none;
}
.openbtn {
  font-size: 20px;
  cursor: pointer;
  background-color: transparent;
  color: white;
  padding: 10px 15px;
  outline: none;
  box-shadow: none;
  border: none;
  position: fixed;
  z-index: 999999;
  opacity: 1;
  user-select: none;
}
.openbtn:hover {
  background-color: transparent;
}
button:focus {
  outline: none;
}
@media only screen and (max-width:1536px) {
  .sidebar {
    font-size: .85rem;
  }
}
@media only screen and (max-width: 1366px) {
  .sidebar {
    font-size: .85rem;
  }
}

5. The main CSS styles for the accordion menu.

.accordion-body {
  color: #fff;
  padding-left: 15px;
  white-space: normal !important;
}
.accordion-item, .accordion-button {
  background-color: transparent !important;
  text-decoration: none !important;
}
.accordion-button::before{
  flex-shrink:0;
  width:1.25rem;
  height:1.25rem;
  margin-left: 10px;    
  margin-right: 10px;    
  content:"";
  background-image: url(../images/arrow-verde.png);
  background-repeat:no-repeat;
  background-size:1.25rem;
  transition:transform .2s ease-in-out;
  /* background-color:lightblue; */
}
.accordion-button:not(.collapsed)::before {
  background-image: url(../images/arrow-verde.png);
  transform: rotate(-180deg);
}
.accordion-button:not(.collapsed) {
  color: #fff;    
}
.accordion-button {
  transition: ease .6s;
}
button > span {
  padding: 0 6px 0 0px;
}
.accordion {
  padding-top: 15px;
}

5. Enable the sidebar navigation.

// Open Sidebar
(function () {
document.querySelector("#openNav").addEventListener('click', function() {
    document.querySelector(".openbtn").style.cssText = "opacity: 0";
    document.querySelector("#mySidebar").style.cssText = "width: 30%";
    document.querySelector("#main").style.cssText = "margin-left: 0";                                
    document.querySelector("#closeNav").style.cssText = "opacity: 1; transition: 2s";                       
})
})();
// Open Sidebar Mobile 100% and Ipad width 50% JS        
(function () {
if (window.innerWidth <= 490) {
    document.querySelector("#openNav").addEventListener('click', function() {
        document.querySelector("#mySidebar").style.cssText = "width: 100%";
        document.querySelector("#main").style.cssText = "margin-left: 0";
        document.querySelector(".openbtn").style.cssText = "opacity: 0";                
        document.querySelector("#closeNav").style.cssText = "opacity: 1; transition: 2s";               
        document.querySelector(".footer").style.cssText = "opacity: 0; transition: 2s";                                 
    })
} else if (window.innerWidth <= 1024) {
    document.querySelector("#openNav").addEventListener('click', function() {
        document.querySelector("#mySidebar").style.cssText = "width: 50%";
        document.querySelector("#main").style.cssText = "margin-left: 0";
        document.querySelector(".openbtn").style.cssText = "opacity: 0";                
        document.querySelector("#closeNav").style.cssText = "opacity: 1; transition: 2s";               
        document.querySelector(".footer").style.cssText = "opacity: 0; transition: 2s";                                   
    })
}
})();
// Close Sidebar
function recolheBarraLateral () {
document.querySelector("#mySidebar").style.cssText = "width: 0";
document.querySelector("#main").style.cssText = "margin-left: 0";
document.querySelector(".openbtn").style.cssText = "opacity: 1";
document.querySelector("#closeNav").style.cssText = "opacity: 0; transition: 0.3s";    
}        
// Close Accordion
(function () { 
var myCollapseOne = document.getElementById('collapseOne');
var myCollapseTwo = document.getElementById('collapseTwo');
var myCollapseThree = document.getElementById('collapseThree');
var myCollapseFour = document.getElementById('collapseFour');
var myCollapseFive = document.getElementById('collapseFive');            
var btnFecha = document.querySelector("#closeNav");                      
btnFecha.addEventListener('click', function() {                                              
    recolheBarraLateral();
    
    // Collapse One
    var bsCollapseOne = new bootstrap.Collapse(myCollapseOne, {
    toggle: false 
    })
    bsCollapseOne.hide()
    
    // Collapse Two
    var bsCollapseTwo = new bootstrap.Collapse(myCollapseTwo, {
    toggle: false 
    })
    bsCollapseTwo.hide()
    // Collapse Three
    var bsCollapseThree = new bootstrap.Collapse(myCollapseThree, {
    toggle: false 
    })
    bsCollapseThree.hide()
    // Collapse Four
    var bsCollapseFour = new bootstrap.Collapse(myCollapseFour, {
    toggle: false 
    })
    bsCollapseFour.hide()
    // Collapse Five
    var bsCollapseFive = new bootstrap.Collapse(myCollapseFive, {
    toggle: false 
    })
    bsCollapseFive.hide()
})                                  
})();