Responsive & Fluid Sidebar Plugin with jQuery and Hammer.js

File Size: 27.9 KB
Views Total: 38338
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
Responsive & Fluid Sidebar Plugin with jQuery and Hammer.js

A jQuery, hammer.js based sidebar plugin that creates responsive, fluid, mobile first on- and off-canvas navigation panels for your website and web app.


  • Supports touch gestures based on hammer.js.
  • Helps you create a regular off-canvas navigation for both mobile or desktop devices.
  • Displays an on-canvas navigation on desktop and auto convert it into an off-canvas menu on mobile device. See Demo.
  • Reveals an off-canvas sidebar navigation with a toggle button.
  • Styled with Bootstrap 3.

Basic Usage:

1. Load Bootstrap's stylesheet together with Font Awesome 4 and sidebar.css into your document's head section.

<link href="//" rel="stylesheet" >
<link href="//" rel="stylesheet" >
<link href="css/sidebar.css" rel="stylesheet">

2. Load the necessary jQuery JavaScript framework and hammer.js at the end of the document.

<script src="//"></script>
<script src="//"></script>

3. Make sure to load the sidebar.js after jQuery library but before the closing body tag.

<script src="js/sidebar.js"></script>

4. Create the Html for your sidebar navigation. Add the data-sidebar="true" attribute to the parent element for auto initialization.

<div class="sidebar-wrapper sidebar-default">
  <div class="sidebar-scroller">
    <ul class="sidebar-menu">
      <li class="sidebar-group">
        <span>Header 1</span>
        <ul class="sidebar-group-menu">
          <li class="sidebar-item"><a href="#">Item 1</a></li>
          <li class="sidebar-item"><a href="#" class="active">Item 2</a></li>
          <li class="sidebar-item"><a href="#">Item 3</a></li>
      <li class="sidebar-group">
        <span>Header 2</span>
        <ul class="sidebar-group-menu">
          <li class="sidebar-item"><a href="#">Item 4</a></li>
          <li class="sidebar-item"><a href="#">Item 5</a></li>
          <li class="sidebar-item"><a href="#">Item 6</a></li>
      <li class="sidebar-item"><a href="#">Item 7</a></li>
      <li class="sidebar-item"><a href="#">Item 8</a></li>
      <li class="sidebar-item"><a href="#">Item 9</a></li>

5. Default plugin options.

classWrapper:       'sidebar-wrapper',
classContainer:     'container-main',
classOpen:          'sidebar-open',
classLocked:        'sidebar-locked',
classForceOpen:     'sidebar-force-open',
classOnDragging:    'sidebar-dragging',
classObfuscator:     'sidebar-obfuscator',
forceToggle:        Sidebar.FORCE_TOGGLE_NO,
locked:             false,
position:           Sidebar.POSITION_LEFT,
minLockWidth:       992,
toggleId:           null,
toggleOpenOnHover:  false,
toggleOnClick:      false,
saveConfig:         false,
storageLockedKey:   'st/sidebar/locked',
clickableSwipe:     false,
draggable:          true,
closeOnSelect:      true,
closeOnSelectDelay: 0.5,
resetScrollDelay:   0.3,
itemSelector:       '.sidebar-menu a',
useScroller:        true,
scrollerScrollbar:  undefined,
scroller:           {
  contentSelector: '.sidebar-menu',
  scrollerStickyHeader: true,
  stickyOptions: {
      selector: '> .sidebar-menu > .sidebar-group > span'
hammer:             {},
disabledKeyboard:   false,
keyboardEvent:      {
  ctrlKey:  true,
  shiftKey: false,
  altKey:   true,
  keyCode:  'S'.charCodeAt(0)

Change logs:


  • Add clickable swipe option to toggle the sidebar
  • Fire the animation end only for animations of sidebar element


  • Fix force-open class for the init


  • Fix click event of link on drag action only for FF IE and Edge


  • Fix the tap item with firefox


  • Fix drag start on chrome and firefox


  • Fix reset transition after the resize of window


  • Fix reset transition after the resize of window


  • Add obfuscator background and scroll locker of body
  • Add native scroll width in unlock bosy scroll event


  • Add isClosable method


  • Trigger opened and closed events on end of transition


  • Do not close the sidebar on resizing window


  • Do not close the sidebar on resizing window


  • Fix attributes on destroy


  • Fix hammer pan with firefox mobile


  • Fix smooth scrolling on ios
  • Fix scroll on ios


  • Fix horizontal pan on scrolling


  • Add sidebar full locked
  • Add sticky header options

This awesome jQuery plugin is developed by sonatra. For more Advanced Usages, please check the demo page or visit the official website.