This mobile-friendly Side Drawer example implementation was made entirely with Bootstrap 4, a couple of custom styles and two simple JS functions. To access the Side Drawer, click on the menu button in the navbar above. The width of the Side Drawer component is fixed at 336px since it's the standard width of a sidebar, but you can customize this. It's pretty simple and can be implemented with ease in any of your projects.

Be sure to include public/css/side-drawer.css and public/js/side_drawer.js in your source code first!

<div id="side-drawer" class="position-fixed">
  <div class="h-100 bg-white">
    <div class="p-4 bg-dark">
      <a href="#">
        <h1 class="text-white">Title</h1>
      </a>
    </div>
    <ul class="list-group" onclick="closeSideDrawer()">
      <a href="#" class="list-group-item list-group-item-action border-0 rounded-0 active">Link</a>
      <a href="#" class="list-group-item list-group-item-action border-0 rounded-0">Link</a>
    </ul>
  </div>
</div>
<div class="position-absolute w-100" style="bottom: 0">
  <div class="container px-4 py-3 text-muted">
    <small>
      Side Drawer by
      <a class="text-muted text-decoration-none" href="http://github.com/danielflachica/" target="_blank">Daniel Lachica</a>
    </small>
  </div>
</div>
<div id="side-drawer-void" class="position-fixed d-none" onclick="closeSideDrawer()"></div>

<nav class="navbar navbar-dark bg-primary fixed-top">
  <button class="navbar-toggler" type="button" onclick="openSideDrawer()">
    <span class="navbar-toggler-icon"></span>
  </button>
  <span class="navbar-text">
    <!-- Project Title -->
  </span>
</nav>

<main class="container my-5 bg-white">
  <div class="p-4 p-md-5">
    <!-- Place Content Here -->
  </div>
</main>

#side-drawer {
  height: 100vh;
  width: 336px;  /* Reference: https://forums.envato.com/t/standard-sidebar-width/75633 */
  z-index: 1032;  /* z-index of standard bootstrap navbar is 1030 + 1 offset due to side-drawer-void */
  top: 0;
  left: -336px;
  transition: left 0.25s ease;
}

#side-drawer-void {
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 1031;  /* z-index of standard bootstrap navbar is 1030 */
  background: rgba(0,0,0,.6);
}

The #side-drawer component needs its height explicitly set to 100vh for it to cover the full screen height. By default, its left property is set to -336px so the Side Drawer is hidden on page load. Opening the Side Drawer will set left to 0 so it's visible on the viewport.

#side-drawer-void styles the clickable area outside the Side Drawer when it's open. Basically, it's a div that covers the entire viewport.

The z-index property, as you may have noticed, is set to very specific values for both elements. By trial-and-error, I found that Bootstrap's navbar class is set to z-index: 1030 by default. Therefore, the #side-drawer-void is set to z-index: 1031 so it's above the navbar (and consequently, everything under the navbar), but beneath the #side-drawer element which is set at z-index: 1032. This way, clicking anywhere outside the Side Drawer will close it, but clicking on the Side Drawer itself (except for the links section) won't do anything.

The only JavaScript needed (in addition to Bootstrap's core JS) for the Side Drawer is documented below. Be sure to include it before the end of the body tag. Huge thanks to this W3Schools Tutorial for the idea/reference.

function openSideDrawer() {
  document.getElementById("side-drawer").style.left = "0";
  document.getElementById("side-drawer-void").classList.add("d-block");
  document.getElementById("side-drawer-void").classList.remove("d-none");
}

function closeSideDrawer() {
  document.getElementById("side-drawer").style.left = "-336px";
  document.getElementById("side-drawer-void").classList.add("d-none");
  document.getElementById("side-drawer-void").classList.remove("d-block");
}

window.openSideDrawer = openSideDrawer;
window.closeSideDrawer = closeSideDrawer;

The JavaScript functions shown above are pretty straightforward. The first, when called via the navbar-toggler button's onclick attribute, will cause the Side Drawer to slide in from the left side of the viewport.

Conversely, the second function, as its name suggests, will hide the Side Drawer when the either the <div id="side-drawer-void"></div> or Side Drawer's <ul class="list-group"></ul> HTML elements are clicked.

In the last two lines of side_drawer.js, the window.<function-name> = <function-name>; code segments simply assign the two Side Drawer JS functions to the current window DOM object so that they're directly callable from anywhere within your views.

That's all there is to it! Now go code something.Back to Top