This repository has been archived by the owner. It is now read-only.
A lightweight accessible side-nav JS library
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
dist
src
.gitignore
.npmignore
LICENSE
README.md
package-lock.json
package.json

README.md

butane-sidenav

⚠️ This project is no longer maintained, checkout butane-show-hide instead. ⚠️

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