Smooth Performant Sliding Drawer Navigation For Web App – SuperSlide.js

Category: Javascript , Menu & Navigation , Recommended | August 12, 2018
Views Total:3,220 views
Official Page:Go to website
Last Update:August 12, 2018


Smooth Performant Sliding Drawer Navigation For Web App – SuperSlide.js


SuperSlide.js is a lightweight, customizable, high-performance sliding drawer (off-canvas) navigation designed for modern web applications.

More features:

  • 4 slide directions: top, right, left, bottom
  • Allows to toggle the navigation with drag and touch events.
  • Pushes the main content when the navigation is activated.
  • Supports promises.
  • Useful API and events.

Basic usage:

Install the SuperSlide.js with NPM.

npm install superslide.js

Import the SuperSlide.js library.

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

Code the HTML for the drawer navigation.

<div id='menuContainer'>
  <button onclick='superslideMenu.close()'>Close</button>
  <!-- Menu Items Here -->

Insert a menu toggle link into the main content.

<div id='myContent'>
  <button onclick='superslideMenu.toggle()'>Toggle</button>
  <!-- Main content here -->

Initialize & activate the drawer navigation.

window.onload = function(){
  myNav = new OSREC.superslide({
    slider: document.getElementById('menuContainer'),
    content: document.getElementById('myContent')'
  var openPromise =;

Options and defaults:

myNav = new OSREC.superslide({
  // slideLeft, slideRight, slideTop, slideBottom
  animation: 'slideLeft',
  // duration of animation
  duration: 0.5,
  // enable drag/touch events
  allowDrag: true,
  // slide the content when the drawer navigation is toggled
  slideContent: true,
  // allows content interactions
  allowContentInteraction: false,
  // close on blur
  closeOnBlur: false,
  // width/height of the drawer navigation
  width: '70vw',
  height: '100px',
  // thresholds
  dragThreshold: 70,
  openThreshold: 70,
  closeThreshold: 20

Callback functions available.

myNav = new OSREC.superslide({
  beforeOpen : function () {};
  onOpen : function () {};
  beforeClose : function () {};
  onClose : function () {};

API methods.

// open the navigation
// close the navigation
// toggle the navigation
// check if is open
// check if is fully initialised
// destroy the navigation

You Might Be Interested In:

Leave a Reply