Stylish Multi-level Sidebar Menu Plugin With jQuery - sidebar-menu.js

File Size: 154 KB
Views Total: 45140
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
Stylish Multi-level Sidebar Menu Plugin With jQuery - sidebar-menu.js

sidebar-menu.js is a lightweight jQuery plugin used for creating a nice-looking, multi-level, treeview-style sidebar navigation menu for dashboard / admin / control panel pages.

How to use it:

1. Add references to jQuery library and the jQuery Sidebar Menu plugin's files into the html page.

<link rel="stylesheet" href="sidebar-menu.css">
<script src="//"></script>
<script src="sidebar-menu.js"></script>

2. You might need to load the Font Awesome 4 for menu icons.

<link rel="stylesheet" href="font-awesome.min.css">

3. Create a nested html list for the multi-level sidebar menu.

<ul class="sidebar-menu">
  <li class="header">Navigation</li>
  <li class="treeview">
    <a href="#">
      <i class="fa fa-dashboard"></i> <span>Dashboard</span>
      <i class="fa fa-angle-left pull-right"></i>
    <ul class="treeview-menu">
      <li><i class="fa fa-circle-o"></i> Dashboard v1</li>
      <li><i class="fa fa-circle-o"></i> Dashboard v2</li>

4. Initialize the plugin and we're done.


Change log:


  • add animate


  • add .sidebar-menu-rtl class


  • optimize code

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