Feature-rich Custom jQuery Context Menu Plugin - contextMenu

contextMenu is a feature-rich and high performance jQuery plugin for replacing the default browser's right-click menu with a custom one.

Features:

• Allows to append the context menu to any element.
• Multilevel context menus.
• Custom icons: Font Awesome Icons, etc.
• Callback function which will be fired on click.
• Custom menu type: text, textarea, checkbox, radio, select, html
• Keyboard interaction.
• Custom trigger events, not only right click.
• Auto adjusts position and size to fit in viewport.
• Dynamic menu creation.
• Custom animations.

Basic usage:

1. Include the jQuery contextMenu's CSS file in the head section of the html document.

<link href="jquery.contextMenu.css" rel="stylesheet">

2. Create an element where you want to append the context menu to.

<span class="demo">Right Click Me</span>

3. Include jQuery library, jQuery UI Position (OPTIONAL) and the jQuery contextMenu plugin's JavaScript at the bottom of the html document.

<script src="//code.jquery.com/jquery.min.js"></script>
<script src="dist/jquery.ui.position.js"></script>
<script src="dist/jquery.contextMenu.js"></script>

4. Create your custom menu items and bind the context menu to the element 'demo'.

$.contextMenu({

  selector: '.demo', 

  items: { // menu items here

    "edit": { // with full options
      name: "Edit", 
      icon: "edit",
      isHtmlName: true, // use HTML in the name
      callback: function(itemKey, opt, e){ // callback
        alert("Clicked on " + itemKey + " on element " + opt.$trigger.id);
        return false;             
      },
      className: 'myCustomClass',
      disabled: function(key, opt){        
        // Disable this item if the menu was triggered on a div
        if(opt.$trigger.nodeName === 'div'){
          return true;
        }            
      },
      visible: function(key, opt){        
        // Hide this item if the menu was triggered on a div
        if(opt.$trigger.nodeName === 'div'){
          return false;
        }            
      },
      type: 'text', // or null, textarea, checkbox, radio, select, html
      events: { // event handlers
        keyup: function(e){
          alert(e.keyCode);
          alert(e.data.$trigger.attr("id"));
        }
      },
      accesskey: 'a',
      dataAttr: { // data attribute
        menuTitle: "My custom title"            
      },
      value: "default value", // for 'text' type
      options: {1: 'one', 2: 'two', 3: 'three'}, // for 'select' type
      selected: "2", // for 'select' type
      radio: 'radio', // for 'radio' type
      value: '2', // for 'radio' type
      selected: true, // for 'radio' type
      height: 200, // for 'textarea' type
    },

    "separator1": "-----", // separator
    "separator2": { "type": "cm_separator" },

    "cut": { // with sub menus
      name: "Cut", 
      {
        items: {
          mySubmenu: {
            name: "Command 1"
              callback: function(key, opt){ 
                alert("Clicked on " + key); 
              }
            }
          }
        }
    }
  }
  
});

5. Here's a full list of configuration options you can use to customize the context menu.

// selector of contextMenu trigger
selector: null,

// where to append the menu to
appendTo: null,

// method to trigger context menu ["right", "left", "hover"]
trigger: 'right',

// hide menu when mouse leaves trigger / menu elements
autoHide: false,

// ms to wait before showing a hover-triggered context menu
delay: 200,

// flag denoting if a second trigger should simply move (true) or rebuild (false) an open menu
// as long as the trigger happened on one of the trigger-element's child nodes
reposition: true,

// Flag denoting if a second trigger should close the menu, as long as
// the trigger happened on one of the trigger-element's child nodes.
// This overrides the reposition option.
hideOnSecondTrigger: false,

//ability to select submenu
selectableSubMenu: false,

// Default classname configuration to be able avoid conflicts in frameworks
classNames: {
  hover: 'context-menu-hover', // Item hover
  disabled: 'context-menu-disabled', // Item disabled
  visible: 'context-menu-visible', // Item visible
  notSelectable: 'context-menu-not-selectable', // Item not selectable

  icon: 'context-menu-icon',
  iconEdit: 'context-menu-icon-edit',
  iconCut: 'context-menu-icon-cut',
  iconCopy: 'context-menu-icon-copy',
  iconPaste: 'context-menu-icon-paste',
  iconDelete: 'context-menu-icon-delete',
  iconAdd: 'context-menu-icon-add',
  iconQuit: 'context-menu-icon-quit',
  iconLoadingClass: 'context-menu-icon-loading'
},

// offset to add to zIndex
zIndex: 1,

// show hide animation settings
animation: {
  duration: 50,
  show: 'slideDown',
  hide: 'slideUp'
},

// events
events: {
  preShow: $.noop,
  show: $.noop,
  hide: $.noop,
  activated: $.noop
},

// default callback
callback: null,

// list of contextMenu items
items: {}

6. API methods.

// disable/enable a menu trigger
$(".trigger").contextMenu(false);
$(".trigger").contextMenu(true);

// show/hide the menu
$(".trigger").contextMenu();
$(".trigger").contextMenu({x: 123, y: 123});
$(".trigger").contextMenu("hide");

// destroy the menu
$.contextMenu('destroy', selector);
$.contextMenu('destroy');

7. Event handlers.

• contextmenu: Trigger context menu to be shown for a trigger object.
• prevcommand: Select / highlight the previous possible command
• nextcommand: Select / highlight the next possible command
• contextmenu:hide: Hide the menu
• contextmenu:focus: React to a command item being focused
• contextmenu:blur: Available on each context menu item.
• keydown: Available on each context menu item.

Changelog:

v2.9.2 (2020-05-13)

• Fix reflow when adding click layer to page

v2.9.1 (2020-05-07)

• Fix error when closing the menu by clicking on the page without any element under that click point. 

v2.9.0 (2019-10-14)

• Added dataAttr option to add arbitrary data attributes to menu items.

v2.8.1 (2019-10-05)

• Added FontAwesome fab class to known classes.

v2.8.0 (2019-01-17)

• Added support for events.preShow so you can enable default browser menu if needed

v2.7.1 (2018-10-03)

• Fixed Font-awesome 5 icons not always visible in submenu
• Fixed A context menu appears outside the screen Under certain conditions

v2.7.0 (2018-07-12)

• Added support for Font Awesome 5

v2.6.5 (2018-07-10)

• Add getting started to the documentation.
• Fix typo in documentation which breaks the callback demo.

v2.6.4 (2018-03-17)

• Bugs fixed.

v2.6.3 (2018-01-27)

• Revert sauce launcer to fix sauce labs tests
• Add options argument to events.activates.
• Add `box-sizing: content-box;` to scss to fix bootstrap.

v2.6.2 (2017-10-31)

• Ability to define touchstart as trigger.
• Extra event activated that triggers after the menu is activated.
• Flag denoting if a second trigger should close the menu.
• Added update call to update visibility, disabled, icon and form value stats for items. 
• Fix for out of bounds problem on window edges.
• Broke build script after 2.5.0 which ment no updates to dist folder.

v2.6.0 (2017-09-09)

• Fixed Dev dependency ended up in normal dependencies.

v2.5.0 (2017-07-16)

• Callback function now supplies original event
• Ability to define touchstart as trigger

v2.4.5 (2017-05-06)

• ContextMenu appears with wrong position 
• Check if given selected value is a 0, if it is a zero so return it as is
• Events are never trigger when opening a contextMenu right after the other 
• Accesskey jQuery Modal Dialog not working
• Fix submenu hover not always staying active if hovering over a submenu item

v2.4.4 (2017-03-15)

• Fixed: trigger is sometimes called on undefined objects because of typecheck on null. 

v2.4.3 (2017-02-28)

• Changed the inline style causes a Content Security Policy violation if style-src 'unsafe-inline' is not defined in the policy. 
• Added SauceLabs tests for common browsers.

v2.4.2 (2017-01-02)

• Fixed: Focus not set on content editable element when right clicking the second time
• Fixed: selectableSubMenu broke disabling click menu

v2.4.1 (2016-12-10)

• Quick fix for error in visible check
• Added Selectable Sub Menus
• Fixed The contextmenu shows even if all items are set to visible:false

2016-10-26

• v2.3.1

2016-06-18

• Small fix for hover color of input item.

2016-05-25

• added more options

---

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