Overlay Accordion Menu For Bootstrap 5

Preview:

Description:

An overlay nav system for Bootstrap 5 that enables a hamburger button to toggle a sidebar menu sliding from the left edge of the screen.

It supports a multi-level menu structure and can organize sub-menus in a vertical accordion interface.

How to use it:

1. Import the necessary Bootstrap 5 framework.

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

2. Add an accordion menu to the side nav. Note that this example uses Font Awesome for the open/close icons.

<div id="mySidebar" class="sidebar">
  <a class="closebtn collapsed" id="closeNav" type="button" aria-expanded="false"><i class="fa fa-times-circle"></i> close</a>
  <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">
            Menu 1
          </button>
        </h5>
      </div>
      <div id="collapseOne" class="accordion-collapse collapse" aria-labelledby="headingOne" data-bs-parent="#accordionExample">
        <div class="accordion-body text-left">
          Sub Menu Items Here
        </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">
            Menu 2
          </button>
        </h5>
      </div>
      <div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo" data-bs-parent="#accordionExample">
        <div class="accordion-body">
          Sub Menu Items Here
        </div>
      </div>
    </div>
    <div class="accordion-item">
      <div class="accordion-header" id="headingThree">
        <h5 class="mb-0">
          <button class="btn btn-link accordion-button collapsed custom-button" type="button" data-bs-toggle="collapse"
            data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
            Menu 3
          </button>
        </h5>
      </div>
      <div id="collapseThree" class="accordion-collapse collapse" aria-labelledby="headingThree" data-bs-parent="#accordionExample">
        <div class="accordion-body">
          Sub Menu Items Here
        </div>
      </div>
    </div>
    <div class="accordion-item">
      <div class="accordion-header" id="headingFour">
        <h5 class="mb-0">
          <button class="btn btn-link accordion-button collapsed custom-button" type="button" data-bs-toggle="collapse"
            data-bs-target="#collapseFour" aria-expanded="false" aria-controls="collapseFour">
            Menu 4
          </button>
        </h5>
      </div>
      <div id="collapseFour" class="accordion-collapse collapse" aria-labelledby="headingFour" data-bs-parent="#accordionExample">
        <div class="accordion-body">
          Sub Menu Items Here
        </div>
      </div>
    </div>
    <div class="accordion-item">
      <div class="accordion-header" id="headingFive">
        <h5 class="mb-0">
          <button class="btn btn-link accordion-button collapsed custom-button" type="button" data-bs-toggle="collapse"
            data-bs-target="#collapseFive" aria-expanded="false" aria-controls="collapseFive">
            Menu 5
          </button>
        </h5>
      </div>
      <div id="collapseFive" class="accordion-collapse collapse" aria-labelledby="headingFive" data-bs-parent="#accordionExample">
        <div class="accordion-body">
          Sub Menu Items Here
        </div>
      </div>
    </div>
  </div>
</div>

3. Add a hamburger menu toggle button to the main content.

<div id="main" class="main">
  <button class="openbtn" id="openNav">☰ open</button>
  <!-- Main Content Here -->
</div>

4. The necessary CSS styles.

.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;
}
#main {
  transition: margin-left .5s;
  height: 100%;
  width: 100%;
  position: fixed;
  z-index: 1;
}
@media only screen and (max-width:1536px) {
  .sidebar {
    font-size: .85rem;
  }
}
@media only screen and (max-width: 1366px) {
  .sidebar {
    font-size: .85rem;
  }
}
/* Accordion */
.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. The main script to toggle the sidebar nav & accordion menu.

// 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";                       
  })
})();
// 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()
  })                                  
})();