Simple jQuery Context Menu Plugin For Bootstrap - Context-menu

File Size: 10.7 KB
Views Total: 11030
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
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="//">

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

<script src="//"></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>

4. Initialize the context menu plugin.

    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.