Simple jQuery Context Menu Plugin For Bootstrap - Context-menu

A tiny jQuery plugin which allows you to create a right click context menu using native Bootstrap's dropdowns component.

Basic Usage:

1. Load the required Bootstrap's stylesheet in the head section of your web page.

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">

2. Load jQuery library and the jQuery context-menu plugin at the bottom of the web page.

<script src="//code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="contextmenu.js"></script>

3. Create a context menu that will show up inside the Html element 'example' as you right click. The context menu should always be wrapped in a container

<div id="context-menu" style="display:none"> 
  <ul class="dropdown-menu">
    <li><a href="#">Action 1</a></li>
    <li><a href="#">Action 2</a></li>
    <li><a href="#">Action 3</a></li>
    <li class="divider"></li>
    <li><a href="#">Action 4</a></li>
    <li><a href="#">Action 5</a></li>
    <li><a href="#">Action 6</a></li>
  </ul>
</div>

4. Initialize the context menu plugin.

$(document).ready(function(){
  $('#example').contextmenu({
    target: "#context-menu"
  });
});

5. Default settings.

// called just before showing the menu.
before: function() {
  return true;
},

// The identifier for the container of the menu.
target: null,

// The identifier for the actual menu.
menuIdentifier: ".dropdown-menu"

---

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