jQuery Contextify - Lightweight Context Menu

A lightweight jQuery plugin for creating Bootstrap powered context menus.


Load from CDN

The easiest way to get up and running is to load jQuery Contextify using a CDN. Make sure jQuery is loaded first though.

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-contextify/1.0.8/jquery.contextify.min.js"></script>


<script src="//cdn.jsdelivr.net/jquery.contextify/1.0.8/jquery.contextify.min.js"></script>

Install with Bower

Use the following command to install jQuery Contextify using bower.

$ bower install jquery-contextify

Or simply add jquery-contextify to your project's bower.json.

  "dependencies": {
    "jquery-contextify": "latest"


You can also just download the latest package.


jQuery Contextify needs to be activated via JavaScript.


The menu items are passed as an array in options.items. See the following example for creating a basic context menu.

<a class="foo" href="#" data-name="John">Click me</a>

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-contextify/1.0.8/jquery.contextify.min.js"></script>
var options = {items:[
  {header: 'Options'},
  {text: 'First Link', href: '#'},
  {text: 'Second Link', onclick: function(e) {
    alert('Hello ' + e.data.name);
  {divider: true},
  {text: 'Stuff', href: '#'}

This will initiate jQuery Contextify on the .foo elements with the menu items specified in options.items.


Name Type Default Description
items array [] An array of menu item objects.
action string contextmenu The action on which to display the context menu (can be contextmenu, click or mouseover).
menuId string contextify-menu The id attribute of the context menu.
menuClass string dropdown-menu The class attribute of the context menu.
headerClass string dropdown-header The class attribute of menu headers.
dividerClass string divider The class attribute of menu dividers.


© 2014-2016 Adam Bouqdib - http://abemedia.co.uk