Sidebar menu collapse

Bootstrap 5 Sidebar menu collapse component

Responsive Sidebar menu collapse built with Bootstrap 5. Create sleek, user-friendly sidebars that expand and collapse effortlessly and navigation.

Basic example

In the basic version, the side navigation will appear over your website's content after clicking on a toggler.

Note: Use show and hide methods to toggle navigation with JavaScript.

Note: Adding the show class to a sidenav collapse element will expand this category on render.

Edit in sandbox 
<!-- Sidenav -->
<nav
  data-mdb-sidenav-init
  id="sidenav-1"
  class="sidenav"
  data-mdb-hidden="false"
>
  <ul class="sidenav-menu">
    <li class="sidenav-item">
      <a class="sidenav-link">
        <i class="far fa-smile fa-fw me-3"></i><span>Link 1</span></a
      >
    </li>
    <li class="sidenav-item">
      <a class="sidenav-link"
        ><i class="fas fa-grin fa-fw me-3"></i><span>Category 1</span></a
      >
      <ul class="sidenav-collapse show">
        <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 fa-fw me-3"></i><span>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>
  </ul>
</nav>
<!-- Sidenav -->

<!-- Toggler -->
<button
  data-mdb-ripple-init
  data-mdb-toggle="sidenav"
  data-mdb-target="#sidenav-1"
  class="btn btn-primary"
  aria-controls="#sidenav-1"
  aria-haspopup="true"
>
  <i class="fas fa-bars"></i>
</button>
<!-- Toggler -->
// Initialization for ES Users
import { Sidenav, initMDB } from "mdb-ui-kit";

initMDB({ Sidenav });

Menu item scroll

You can use custom styles and our Scrollbar to add inner scroll for menu items.

Edit in sandbox 
<!-- Sidenav -->
  <nav
  data-mdb-sidenav-init
  id="sidenav-8"
  class="sidenav"
  data-scroll-container="#scroll-container2"
  data-mdb-mode="side"
>
  <div class="text-center">
    <h3 class="py-4">Examples</h3>
    <hr class="m-0" />
  </div>
  <ul id="scroll-container2" class="sidenav-menu">
    <li class="sidenav-item">
      <a class="sidenav-link"
        ><i class="fas fa-grin fa-fw me-3"></i><span>Scrolling Category 1</span></a
      >
      <ul class="sidenav-collapse scroll-section">
        <li class="sidenav-item">
          <a class="sidenav-link">Link 1</a>
        </li>
        <li class="sidenav-item">
          <a class="sidenav-link">Link 2</a>
        </li>
        <li class="sidenav-item">
          <a class="sidenav-link">Link 3</a>
        </li>
        <li class="sidenav-item">
          <a class="sidenav-link">Link 4</a>
        </li>
        <li class="sidenav-item">
          <a class="sidenav-link">Link 5</a>
        </li>
        <li class="sidenav-item">
          <a class="sidenav-link">Link 6</a>
        </li>
      </ul>
    </li>
    <li class="sidenav-item">
      <a class="sidenav-link"
        ><i class="fas fa-grin fa-fw me-3"></i><span>Scrolling Category 2</span></a
      >
      <ul class="sidenav-collapse scroll-section">
        <li class="sidenav-item">
          <a class="sidenav-link">Link 1</a>
        </li>
        <li class="sidenav-item">
          <a class="sidenav-link">Link 2</a>
        </li>
        <li class="sidenav-item">
          <a class="sidenav-link">Link 3</a>
        </li>
        <li class="sidenav-item">
          <a class="sidenav-link">Link 4</a>
        </li>
        <li class="sidenav-item">
          <a class="sidenav-link">Link 5</a>
        </li>
        <li class="sidenav-item">
          <a class="sidenav-link">Link 6</a>
        </li>
      </ul>
    </li>
    <li class="sidenav-item">
      <a class="sidenav-link"
        ><i class="fas fa-grin fa-fw me-3"></i><span>Scrolling Category 2</span></a
      >
      <ul class="sidenav-collapse scroll-section">
        <li class="sidenav-item">
          <a class="sidenav-link">Link 1</a>
        </li>
        <li class="sidenav-item">
          <a class="sidenav-link">Link 2</a>
        </li>
        <li class="sidenav-item">
          <a class="sidenav-link">Link 3</a>
        </li>
        <li class="sidenav-item">
          <a class="sidenav-link">Link 4</a>
        </li>
        <li class="sidenav-item">
          <a class="sidenav-link">Link 5</a>
        </li>
        <li class="sidenav-item">
          <a class="sidenav-link">Link 6</a>
        </li>
      </ul>
    </li>
    <li class="sidenav-item">
      <a class="sidenav-link"
        ><i class="fas fa-grin fa-fw me-3"></i><span>Scrolling Category 3</span></a
      >
      <ul class="sidenav-collapse scroll-section">
        <li class="sidenav-item">
          <a class="sidenav-link">Link 1</a>
        </li>
        <li class="sidenav-item">
          <a class="sidenav-link">Link 2</a>
        </li>
        <li class="sidenav-item">
          <a class="sidenav-link">Link 3</a>
        </li>
        <li class="sidenav-item">
          <a class="sidenav-link">Link 4</a>
        </li>
        <li class="sidenav-item">
          <a class="sidenav-link">Link 5</a>
        </li>
        <li class="sidenav-item">
          <a class="sidenav-link">Link 6</a>
        </li>
      </ul>
    </li>
    <li class="sidenav-item">
      <a class="sidenav-link"
        ><i class="fas fa-grin fa-fw me-3"></i><span>Scrolling Category 4</span></a
      >
      <ul class="sidenav-collapse scroll-section">
        <li class="sidenav-item">
          <a class="sidenav-link">Link 1</a>
        </li>
        <li class="sidenav-item">
          <a class="sidenav-link">Link 2</a>
        </li>
        <li class="sidenav-item">
          <a class="sidenav-link">Link 3</a>
        </li>
        <li class="sidenav-item">
          <a class="sidenav-link">Link 4</a>
        </li>
        <li class="sidenav-item">
          <a class="sidenav-link">Link 5</a>
        </li>
        <li class="sidenav-item">
          <a class="sidenav-link">Link 6</a>
        </li>
      </ul>
    </li>
    <li class="sidenav-item">
      <a class="sidenav-link"
        ><i class="fas fa-grin fa-fw me-3"></i><span>Scrolling Category 5</span></a
      >
      <ul class="sidenav-collapse scroll-section">
        <li class="sidenav-item">
          <a class="sidenav-link">Link 1</a>
        </li>
        <li class="sidenav-item">
          <a class="sidenav-link">Link 2</a>
        </li>
        <li class="sidenav-item">
          <a class="sidenav-link">Link 3</a>
        </li>
        <li class="sidenav-item">
          <a class="sidenav-link">Link 4</a>
        </li>
        <li class="sidenav-item">
          <a class="sidenav-link">Link 5</a>
        </li>
        <li class="sidenav-item">
          <a class="sidenav-link">Link 6</a>
        </li>
      </ul>
    </li>
    <li class="sidenav-item">
      <a class="sidenav-link"
        ><i class="fas fa-grin fa-fw me-3"></i><span>Scrolling Category 6</span></a
      >
      <ul class="sidenav-collapse scroll-section">
        <li class="sidenav-item">
          <a class="sidenav-link">Link 1</a>
        </li>
        <li class="sidenav-item">
          <a class="sidenav-link">Link 2</a>
        </li>
        <li class="sidenav-item">
          <a class="sidenav-link">Link 3</a>
        </li>
        <li class="sidenav-item">
          <a class="sidenav-link">Link 4</a>
        </li>
        <li class="sidenav-item">
          <a class="sidenav-link">Link 5</a>
        </li>
        <li class="sidenav-item">
          <a class="sidenav-link">Link 6</a>
        </li>
      </ul>
    </li>
  </ul>

  <div class="text-center" style="min-height: 3rem">
    <hr class="mt-0 mb-2" />
    <small>mdbootstrap.com</small>
  </div>
</nav>
  <!-- Sidenav-->

  <div style="padding: 20px;" class="text-center">
    <button
      data-mdb-toggle="sidenav"
      data-mdb-target="#sidenav-8"
      class="btn btn-primary"
      aria-controls="#sidenav-8"
      aria-haspopup="true"
    >
      <i class="fas fa-bars"></i>
    </button>
    <div class="d-flex justify-content-center my-5"></div>
  </div>
.scroll-section {
  max-height: 100px;
  overflow-y: auto;
  margin-right: 10px;
}
// Initialization for ES Users
import { Sidenav, PerfectScrollbar, initMDB } from "mdb-ui-kit";

initMDB({ Sidenav });

const scrollSection = document.getElementsByClassName('scroll-section');

scrollSection.forEach((el) => {
  const ps = new PerfectScrollbar(el, { suppressScrollX: true });
});
const scrollSection = document.getElementsByClassName('scroll-section');

scrollSection.forEach((el) => {
  const ps = new mdb.PerfectScrollbar(el, { suppressScrollX: true });
});

Accordion example

Using accordion option will allow expanding only one category at once.

Edit in sandbox 
<!-- Sidenav-->
<nav
  data-mdb-sidenav-init
  id="sidenav-5"
  class="sidenav"
  data-mdb-accordion="true"
>
  <ul class="sidenav-menu">
    <li class="sidenav-item">
      <a class="sidenav-link">
        <i class="far fa-smile fa-fw me-3"></i><span>Link 1</span></a
      >
    </li>
    <li class="sidenav-item">
      <a class="sidenav-link"
        ><i class="fas fa-grin fa-fw me-3"></i><span>Category 1</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 fa-fw me-3"></i><span>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>
  </ul>
</nav>
<!-- Sidenav-->

<!-- Toggler -->
  <button
    data-mdb-toggle="sidenav"
    data-mdb-target="#sidenav-5"
    class="btn btn-primary"
    aria-controls="#sidenav-5"
    aria-haspopup="true"
  >
    <i class="fas fa-bars"></i>
  </button>
<!-- Toggler -->
// Initialization for ES Users
import { Sidenav, initMDB } from "mdb-ui-kit";

initMDB({ Sidenav });

Groups

You can use more than one menu inside the side navigation - in this case, accordions will be independent of one another.

Edit in sandbox 
<!-- Sidenav-->
<nav
  data-mdb-sidenav-init
  id="sidenav-6"
  class="sidenav"
  data-mdb-accordion="true"
  data-mdb-mode="side"
>
  <ul class="sidenav-menu">
    <li class="sidenav-item">
      <a class="sidenav-link">
        <i class="far fa-smile fa-fw me-3"></i><span>Link 1</span></a
      >
    </li>
    <li class="sidenav-item">
      <a class="sidenav-link"
        ><i class="fas fa-grin fa-fw me-3"></i><span>Category 1</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 fa-fw me-3"></i><span>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>
  </ul>
  <hr />
  <ul class="sidenav-menu">
    <li class="sidenav-item">
      <a class="sidenav-link">
        <i class="far fa-smile fa-fw me-3"></i><span>Link 6</span></a
      >
    </li>
    <li class="sidenav-item">
      <a class="sidenav-link"
        ><i class="fas fa-grin fa-fw me-3"></i><span>Category 3</span></a
      >
      <ul class="sidenav-collapse">
        <li class="sidenav-item">
          <a class="sidenav-link">Link 7</a>
        </li>
        <li class="sidenav-item">
          <a class="sidenav-link">Link 8</a>
        </li>
      </ul>
    </li>
    <li class="sidenav-item">
      <a class="sidenav-link"
        ><i class="fas fa-grin-wink fa-fw me-3"></i><span>Category 4</span></a
      >
      <ul class="sidenav-collapse">
        <li class="sidenav-item">
          <a class="sidenav-link">Link 9</a>
        </li>
        <li class="sidenav-item">
          <a class="sidenav-link">Link 10</a>
        </li>
      </ul>
    </li>
  </ul>
</nav>

<!-- Sidenav-->

<!-- Toggler -->
<button
  data-mdb-toggle="sidenav"
  data-mdb-target="#sidenav-6"
  class="btn btn-primary"
  aria-controls="#sidenav-6"
  aria-haspopup="true"
>
  <i class="fas fa-bars"></i>
</button>
<!-- Toggler -->
// Initialization for ES Users
import { Sidenav, initMDB } from "mdb-ui-kit";

initMDB({ Sidenav });