butane-sidenav

Demo

A lightweight accessible side-nav JS library.

Install

Install butane-sidenav, and add it to your package.json dev dependencies.

$ npm install butane-sidenav --save-dev

Then import it into the file where you'll use it.

import ButaneSideNav from 'butane-sidenav'

Instantiate

// using the default options
ButaneSideNav.init()

Expected DOM structure

Below is the minimum required elements and attributes needed. An additional styling layer is also required to show/hide side-navs. View the demo styles for example CSS setup.

<div id="main" data-butane-sidenav-container>
  <button data-butane-sidenav-show="side-nav-example">Show side-nav 1</button>
</div>
 
<div id="side-nav-example">
  <nav>
    <button data-butane-sidenav-hide>&times;</button>
  </nav>
  <!--
    An overlay is optional but recommended.
    See docs/styles.css for recommended usage.
    -->
  <div data-butane-sidenav-hide></div>
</div>

License

MIT. © 2017 Alex Carpenter