Dynamic Sidebar Menu (Off-canvas Nav) In jQuery

An easy and configurable jQuery sidebar menu (also called off-canvas side nav) that allows you to dynamically add menu items via JavaScript.

How to use it:

1. Append the main script sidebar.js after jQuery library.

<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/js/sidebar.js"></script>

2. Create a container to hold the sidebar menu.

<div id="sidebar"></div>

3. Create a menu toggle button inside your main content.

<button id="sidebar-open">
  Open Sidebar Menu
</button>

4. Determine your menu links in a JS object as follows:

let menuItems = {
    'Home': '/home',
    'Dashboard': '/dashboard',
    'Profile': '/profile',
    'Latest': '/latest',
    'Updates': '/updates',
    'News': '/news'
}

5. Initialize the plugin and inject those menu links to the sidebar menu.

$('#sidebar').Sidebar({
  items: menuItems
});

6. Customize the appearance of the sidebar menu.

$('#sidebar').Sidebar({

  // header text
  header: 'Header',

  // header link
  headerRef: '#',

  // menu width
  width: 120,

  // background color
  sidebarColor: 'gray',

  // color of close button
  closeButtonColor: 'black',

  // color of header text
  headerColor: 'white',

  // text color
  textColor: 'white',

  // text alignment
  textAlign: 'left',

  // customize the close icon here
  closeButtonIcon: '×'
  
});

7. All default selectors.

$('#sidebar').Sidebar({

  // trigger ID
  openTriggerId: 'sidebar-open',

  // close ID
  closeTriggerId: 'sidebar-close',

  // default CSS classes
  sidebarClass: 'sidebar-menu', 
  headerClass: 'sidebar-header',
  itemsClass: 'sidebar-item',
  closeButtonClass: 'sidebar-close',

});

---

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