Sidenav with toggler

Bootstrap 5 Sidenav with toggler component

Responsive Sidenav with toggler built with Bootstrap 5. Use an elegant and minimalist sidenav with a toggler to gain more space.

Basic example

If you want your sidenav to hide/show elements in the slim mode, set the data-mdb-slim attribute on them - depending on value they will be either visible only in a slim or an expanded mode. Elements without this attribute will appear in both modes.

Edit in sandbox 
        
            
        <!-- Sidenav-->
        <nav id="sidenav-4" data-mdb-sidenav-init class="sidenav" data-mdb-mode="side" data-mdb-slim="true" data-mdb-slim-collapsed="true" data-mdb-content="#slim-content">
          <ul class="sidenav-menu h-100 d-flex flex-column">
              <li class="sidenav-item">
                  <a class="sidenav-link"> <i class="far fa-smile me-3"></i><span data-mdb-slim="false">Link 1</span></a>
              </li>
              <li class="sidenav-item">
                  <a class="sidenav-link">
                      <i class="fas fa-grin me-3"></i>
                      <span data-mdb-slim="false">Category 1</span>
                      <span data-mdb-slim="false" class="ms-auto me-2 badge rounded-pill badge-primary">New</span>
                  </a>
                  <ul class="sidenav-collapse">
                      <li class="sidenav-item">
                          <a class="sidenav-link">Link 2</a>
                      </li>
                      <li class="sidenav-item">
                          <a class="sidenav-link">Link 3</a>
                      </li>
                  </ul>
              </li>
              <li class="sidenav-item">
                  <a class="sidenav-link"><i class="fas fa-grin-wink me-3"></i><span data-mdb-slim="false">Category 2</span></a>
                  <ul class="sidenav-collapse">
                      <li class="sidenav-item">
                          <a class="sidenav-link">Link 4</a>
                      </li>
                      <li class="sidenav-item">
                          <a class="sidenav-link">Link 5</a>
                      </li>
                  </ul>
              </li>
              <li id="slim-toggler" class="sidenav-item d-flex align-items-end mt-auto w-100">
                  <a class="sidenav-link w-100">
                      <i id="slim-toggler-icon" style="transition: var(--mdb-sidenav-rotate-icon-transition);" class="fas fa-angles-right me-3"></i>
                      <span id="slim-toggler-text" class="d-none">Collapse sidebar</span>
                  </a>
              </li>
          </ul>
        </nav>
        <!-- Sidenav-->

        <!-- Togglers -->
        <div id="slim-content">
          <button data-mdb-toggle="sidenav" data-mdb-target="#sidenav-4" data-mdb-button-init data-mdb-ripple-init class="btn btn-primary" aria-controls="#sidenav-4" aria-haspopup="true">
              <i class="fas fa-bars"></i>
          </button>
        </div>
        <!-- Togglers -->

        
        
    
        
            
        const sidenavElement = document.getElementById("sidenav-4");
        const slimInstance = mdb.Sidenav.getInstance(sidenavElement);
        const toggler = document.getElementById("slim-toggler");
        const togglerText = document.getElementById("slim-toggler-text");
        const togglerIcon = document.getElementById("slim-toggler-icon");
        
        slimInstance.show();
        
        toggler.addEventListener("click", (e) => {
            slimInstance.toggleSlim();
        });
        
        sidenavElement.addEventListener("expand.mdb.sidenav", (e) => {
            togglerIcon.style.transform = "rotate(180deg)";
            togglerText.classList.remove("d-none");
        });
        
        sidenavElement.addEventListener("collapsed.mdb.sidenav", (e) => {
            togglerText.classList.add("d-none");
        });
        
        sidenavElement.addEventListener("collapse.mdb.sidenav", (e) => {
            togglerIcon.style.transform = "";
        });