A lightweight, configurable sliding menu for your next PWA with promises. Only 2k gzipped!

This library aims to provide a highly configurable, ready-to-use sliding menu for your next web application, while delivering native-like animation performance. It was created by the OSREC Technologies while developing Bx, our invoicing, time-tracking and project management PWA.


npm install superslide.js


Reference the library in a script tag

<script src='superslide.js'></script>

Add basic HTML markup

  <div id='content'>Content</div>
  <div id='menu'>Menu</div>

Add styles (so we can see what’s going on!)

  body     { padding: 0px; margin: 0px; }
  #menu    { background: #ccc; }
  #content { min-height: 100vh; min-width: 100vw; }

Initialise the menu

var myMenu = new OSREC.superslide
    slider: document.getElementById('menu'),
    content: document.getElementById('content'),
    animation: 'slideLeft'

// Promise resolves once menu is open
var openPromise =;

Try the demo here


Standard Version has 4 animation options available:

slideLeft slideRight slideBottom slideTop

PRO version :star: contains many more menu animations (check it out @




Created by the Bx team at OSREC Technologies.


The library was developed as part of our business and project management app called Bx (you can check it out here).