Side panel

Bootstrap 5 Side panel component

Responsive Side panel built with Bootstrap 5. Examples of responsive side panels which include slides, navigation, collapsing and more.

Basic example

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

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

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

Edit in sandbox 
<!-- Sidepanel-->

<nav id="sidepanel-1" data-mdb-sidenav-init class="sidenav" data-mdb-position="absolute">
    <div class="text-center">
        <h3 class="pt-3 pb-2">Examples</h3>
        <hr class="m-0" />
    </div>
    <ul class="sidenav-menu">
        <li>
            <a class="sidenav-link"> <i class="fas fa-tachometer-alt fa-fw fa-lg me-3"></i><span>Main dashboard</span> </a>
        </li>
        <li>
            <a class="sidenav-link"><i class="fas fa-chart-area fa-fw fa-lg me-3"></i><span>Webiste traffic</span> </a>
        </li>
        <li>
            <a class="sidenav-link"><i class="fas fa-lock fa-fw fa-lg me-3"></i><span>Password</span></a>
        </li>

        <li>
            <a class="sidenav-link"><i class="fas fa-chart-line fa-fw fa-lg me-3"></i><span>Analytics</span></a>
        </li>
        <li>
            <a class="sidenav-link"> <i class="fas fa-chart-pie fa-fw fa-lg me-3"></i><span>SEO</span> </a>
        </li>
        <li>
            <a class="sidenav-link"><i class="fas fa-chart-bar fa-fw fa-lg me-3"></i><span>Orders</span></a>
        </li>
    </ul>
</nav>

<!-- Sidepanel-->
<!-- Toggler -->
<div style="padding: 20px;" class="text-center">
    <button data-mdb-button-init data-mdb-toggle="sidenav" data-mdb-target="#sidepanel-1" data-mdb-ripple-init class="btn btn-primary">
        <i class="fas fa-bars"></i>
    </button>
</div>
<!-- Toggler -->

Slide

Passing a selector of an inner element to the scrollContainer option will initialize MDB scrollbar only on this container (by default it's initialized on the sidenav's main element).

Edit in sandbox 
<!-- Sidepanel-->

<nav id="sidepanel-2" data-mdb-sidenav-init class="sidenav" data-mdb-position="absolute" data-mdb-scroll-container="#scroll-container">
    <div class="text-center">
        <h3 class="pt-3 pb-2">Examples</h3>
        <hr class="m-0" />
    </div>
    <ul id="scroll-container" class="sidenav-menu">
        <li>
            <a class="sidenav-link"> <i class="fas fa-tachometer-alt fa-fw fa-lg me-3"></i><span>Main dashboard</span> </a>
        </li>
        <li>
            <a class="sidenav-link"><i class="fas fa-chart-area fa-fw fa-lg me-3"></i><span>Webiste traffic</span> </a>
        </li>
        <li>
            <a class="sidenav-link"><i class="fas fa-lock fa-fw fa-lg me-3"></i><span>Password</span></a>
        </li>

        <li>
            <a class="sidenav-link"><i class="fas fa-chart-line fa-fw fa-lg me-3"></i><span>Analytics</span></a>
        </li>
        <li>
            <a class="sidenav-link"> <i class="fas fa-chart-pie fa-fw fa-lg me-3"></i><span>SEO</span> </a>
        </li>
        <li>
            <a class="sidenav-link"><i class="fas fa-chart-bar fa-fw fa-lg me-3"></i><span>Orders</span></a>
        </li>
        <li>
            <a class="sidenav-link"><i class="fas fa-globe fa-fw fa-lg me-3"></i><span>International</span></a>
        </li>
        <li>
            <a class="sidenav-link"><i class="fas fa-building fa-fw fa-lg me-3"></i><span>Partners</span></a>
        </li>

        <li>
            <a class="sidenav-link"><i class="fas fa-calendar fa-fw fa-lg me-3"></i><span>Calendar</span></a>
        </li>
        <li>
            <a class="sidenav-link"><i class="fas fa-users fa-fw fa-lg me-3"></i><span>Users</span></a>
        </li>
        <li>
            <a class="sidenav-link"><i class="fas fa-money-bill fa-fw fa-lg me-3"></i><span>Sales</span></a>
        </li>
    </ul>

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

<!-- Sidepanel-->
<!-- Toggler -->
<div style="padding: 20px;" class="text-center">
    <button data-mdb-button-init data-mdb-toggle="sidenav" data-mdb-target="#sidepanel-2" data-mdb-ripple-init class="btn btn-primary">
        <i class="fas fa-bars"></i>
    </button>
</div>
<!-- Toggler -->

Collapse

Add .sidenav-collapse to ul to get collapse side panel.

Edit in sandbox 
<!-- Sidepanel-->
<nav id="sidepanel-3" data-mdb-sidenav-init class="sidenav" data-mdb-position="absolute">
    <ul class="sidenav-menu">
        <li>
            <a class="sidenav-link"> <i class="far fa-smile fa-fw me-3"></i><span>Link 1</span></a>
        </li>
        <li>
            <a class="sidenav-link"> <i class="fas fa-grin fa-fw me-3"></i><span>Category 1</span><i class="fas fa-angle-down rotate-icon"></i> </a>
            <ul class="sidenav-collapse collapse">
                <li>
                    <a class="sidenav-link">Link 2</a>
                </li>
                <li>
                    <a class="sidenav-link">Link 3</a>
                </li>
            </ul>
        </li>
        <li>
            <a class="sidenav-link"> <i class="fas fa-grin-wink fa-fw me-3"></i><span>Category 2</span><i class="fas fa-angle-down rotate-icon"></i> </a>
            <ul class="sidenav-collapse collapse">
                <li>
                    <a class="sidenav-link">Link 4</a>
                </li>
                <li>
                    <a class="sidenav-link">Link 5</a>
                </li>
            </ul>
        </li>
    </ul>
</nav>
<!-- Sidepanel-->
<!-- Toggler -->
<div style="padding: 20px;" class="text-center">
    <button data-mdb-button-init data-mdb-toggle="sidenav" data-mdb-target="#sidepanel-3" data-mdb-ripple-init class="btn btn-primary">
        <i class="fas fa-bars"></i>
    </button>
</div>
<!-- Toggler -->

Slim example

You can hide/show elements in the slim mode by setting 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="sidepanel-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">
    <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></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>
  </ul>
</nav>
<!-- Sidenav-->

<!-- Togglers -->
<div id="slim-content">
  <button data-mdb-button-init
    data-mdb-toggle="sidenav"
    data-mdb-target="#sidepanel-4"
    data-mdb-ripple-init class="btn btn-primary"
    aria-controls="#sidepanel-4"
    aria-haspopup="true"
  >
    <i class="fas fa-bars"></i>
  </button>
  <button data-mdb-button-init id="slim-toggler" data-mdb-ripple-init class="btn btn-primary">
    Toggle slim
  </button>
</div>
<!-- Togglers -->
//Use show() method to make it instantly visible
const slimInstance = mdb.Sidenav.getInstance(document.getElementById('sidenav-4'));

slimInstance.show();

document.getElementById('slim-toggler').addEventListener('click', () => {
  slimInstance.toggleSlim();
})