Dynamic Drawer Navigation In Pure JavaScript – Drawer.js

Drawer.js is a small JavaScript plugin to dynamically generate a drawer-style off-canvas navigation menu from an array of menu JS objects. No 3rd JavaScript library required.

How to use it:

Import the JavaScript Drawer.js and style sheet Drawer.css into the html page.

<link href="drawer.css" rel="stylesheet">
<script src="drawer.js"></script>

Create a placeholder element for the drawer navigation.

<div id="drawer-holder"></div>

Create an array of objects for the drawer navigation.

var myNav = [{
      content: 'Home',
      href: 'example.com'
    },
    {
      content: 'Blog',
      href: 'example.com'
    },
    {
      content: 'Contact',
      href: 'example.com'
    },
    {
      content: 'About',
      href: 'example.com'
    }
]

Initialize the drawer navigation and done.

new Drawer().addListItems(myNav)

Apply the settings to the drawer navigation.

new Drawer()
  .setWidth(300)
  .addListItems(myNav)
  .setFontSize(18)
  .setListItemColor('red')
  .setDrawerBackgroundColor('white')
  .setHamMenuBackgroundColor('white')
  .setHamMenuBackgroundColorActive('red')