Multi-level Sliding Side Menu In Vanilla JavaScript – Slide Menu

Category: Javascript , Menu & Navigation | May 6, 2019
Author: grubersjoe
Views Total: 7,415 views
Official Page: Go to website
Last Update: May 6, 2019
License: MIT


Multi-level Sliding Side Menu In Vanilla JavaScript – Slide Menu


This is the vanilla JavaScript version of the jQuery slide menu plugin that helps web developers implement a smoothly sliding, multi-level, off-canvas navigation in vanilla JavaScript.

How to use it:

Install & Download with NPM.

$ npm install @grubersjoe/slide-menu --save

Import the Slide Menu’s JavaScript and CSS into the document.

<link rel="stylesheet" href="styles/slide-menu.css">
<script src="scripts/slide-menu.js"></script>

Create a nested nav list for the multi-level navigation.

<nav class="slide-menu" id="example">
      <a href="#">Home</a>
      <a href="#">Category</a>
        <li><a href="#">HTML5</a></li>
        <li><a href="#">CSS3</a></li>
        <li><a href="#">JavaScript</a></li>
      <a href="#">Contact</a>
      <a href="#">About</a>

Add custom controls to the page & slide menu.

<button type="button" class="slide-menu__control" data-action="open">Open</button>
<button type="button" class="slide-menu__control" data-action="back">Back</button>

<a class="slide-menu-control" data-action="close">Close</a>
<a class="slide-menu-control" data-target="this" data-action="close">Close</a>

Initialize the slide menu and done.

document.addEventListener("DOMContentLoaded", function () {
  const myMenu = new SlideMenu(document.getElementById('example'));

Available configuration options to customize the slide menu.

document.addEventListener("DOMContentLoaded", function () {
  const myMenu = new SlideMenu(document.getElementById('example'),{

        // 'left' or 'right'
        position: 'right'

        // Add a back link to the slide menu
        showBackLink: true,

        // Keyboard event which will be used to open the slide menu
        keycodeOpen: undefined,

        // Keyboard event which will be used to close the slide menu
        keycodeClose: undefined,

        // HTML to prepend to links
        submenuLinkBefore: '',

        // HTML to append to links 
        submenuLinkAfter: '',

        // HTML to prepend to back link 
        backLinkBefore: '',

        // HTML to append to back link
        backLinkAfter: ''

API methods.

// toggle the slide menu

// open the slide menu

// close the slide menu

// back to the previous level

// navigate to a specific menu



  • v1.2.1: Bug fixes and maintenance


  • v1.2.0: Fix bug in onClick handlers and event dispatching


  • v1.1.8: Overflow auto for menu container


  • v1.1.4:  strict type checking and code cleanup


  • v1.1.3:  fix event dispatching

You Might Be Interested In:

Leave a Reply