node package manager

sidebarjs

GitHub release npm npm

SidebarJS

Create mobile sidebar/sidenav experiance in pure javascript.

npm install sidebarjs --save

Demo

Open the demo on your device and try the touch gestures!

Installation

Classic

<script src="your/path/sidebarjs.js"></script>

Require

const SidebarJS = require('sidebarjs');

ES6

import SidebarJS from 'sidebarjs';

Options

Option Default Type Description
documentMinSwipeX 10 Number Minimum swipe in px required to trigger listener: open
documentSwipeRange 40 Number Range in px where document is listening for gesture: open
nativeSwipe true Boolean Open and close sidebar with swipe gestures
nativeSwipeOpen true Boolean Enable/Disable open on swipe
position 'left' String Sidebar position, accepted values: left\right

Implementation - Superfast explanation

Insert sidebarjs.min.css and sidebarjs.min.js in your index.html file and create a tag (div, aside or what you prefer) with the attribute [sidebarjs]. All contents you will write inside tag[sidebarjs] will be rendered inside the sidebar. For open/close the sidebar, put wherever you want the [sidebarjs-toggle] attribute. Then simply init it with new SidebarJS() and you are ready!

<head>
 
  <link rel="stylesheet" href="sidebarjs.min.css">
 
</head>
<body>
 
  <div sidebarjs-toggle>Open/Close</div>
 
  <div sidebarjs>
    <div sidebarjs-toggle>Open/Close</div>
    <nav>
      <a href="link">Home</a>
      <a href="link">About</a>
      <a href="link">Contacts</a>
    </nav>
  </div>
 
  <script src="sidebarjs.min.js"></script> 
  <script>
  // Init SidebarJS 
  var sidebarjs = new SidebarJS();
  </script> 
 
</body>

Implementation - Explanation step by step

Download files

Download and save all files

$ npm install sidebarjs --save

Insert sidebarjs.min.css and sidebarjs.min.js in your index.html.

<head>
 
  <link rel="stylesheet" href="your/path/sidebarjs.min.css">
 
</head>
<body>
 
  <script src="your/path/sidebarjs.min.js"></script> 
 
</body>

Create SidebarJS element

Write [sidebarjs] attribute inside a tag (div, aside, or whatever you want).

<div sidebarjs>
  <div>Title</div>
  <nav>
    <a href="link">Home</a>
    <a href="link">About</a>
    <a href="link">Contacts</a>
  </nav>
</div>

Trigger button

Do you need a trigger button for open/close SidebarJS? Just put [sidebarjs-toggle] attribute inside a tag and it's done!

<div sidebarjs-toggle>Open/Close</div>

Init

When you have files, [sidebarjs] and [sidebarjs-toggle] you can init your SidebarJS Module like:

var sidebarjs = new SidebarJS()

Full file example

<head>
 
  <link rel="stylesheet" href="your/path/sidebarjs.min.css">
 
</head>
<body>
 
  <div sidebarjs-toggle>Open/Close</div>
 
  <div sidebarjs>
    <div>Title</div>
    <nav>
      <a href="link">Home</a>
      <a href="link">About</a>
      <a href="link">Contacts</a>
    </nav>
  </div>
 
  <script src="your/path/sidebarjs.min.js"></script> 
  <script>
    // Init SidebarJS 
    var sidebarjs = new SidebarJS();
  </script> 
 
</body>