A stupid simple sidebar jQuery plugin.


Available on CDN! 🚢

jQuery-Sidebar is available on CDNJS and you can use it like this:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-sidebar/3.3.2/jquery.sidebar.min.js"></script>


This library depends on:

Include the script file in your HTML page:

<!-- Include jQuery -->
<script src="path/to/jquery.min.js"></script>
<!-- Include jQuery Sidebar -->
<script src="path/to/jquery.sidebar.min.js"></script>
<!-- Or from CDNJS:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-sidebar/3.3.2/jquery.sidebar.min.js"></script>
<div class="sidebar left">Hello World</div>
<div class="sidebar right">I am on right!</div>
<div class="sidebar top">I am on top!</div>
<div class="sidebar bottom">I am on bottom!</div>
    // Sidebar on left (default)

    // Sidebar on right side
    $(".sidebar.right").sidebar({side: "right"});

    // Sidebar on top side
    $(".sidebar.top").sidebar({side: "top"});

    // Sidebar on bottom side
    $(".sidebar.bottom").sidebar({side: "bottom"});

Also, please note that you must write your own CSS code for the sidebars. You can find a CSS code example here.



Initialize sidebar on selected elements.


After the call above, you can programatically open/close/toggle the sidebar using:

$(".my-sidebar").trigger("sidebar:close", [{ speed: 0 }]);

After the sidebar is opened/closed, sidebar:opened/sidebar:closed event is emitted.

$(".my-sidebar").on("sidebar:opened", function () {
   // Do something on open

$(".my-sidebar").on("sidebar:closed", function () {
   // Do something on close


  • Object options: An object that will be merged with the default options.
  • speed (Number): animation speed (default: 200)
  • side (String): left|right|top|bottom (default: "left")
  • isClosed (Boolean): A boolean value indicating if the sidebar is closed or not (default: false).
  • close (Boolean): If true, the sidebar will be closed by default.


  • jQuery The jQuery elements that were selected.


To see the versions and the changes between them go to releases page.

How to contribute

Have an idea? Found a bug? See how to contribute.


See the LICENSE file.


View Github