How to make use of it:

Install and import the context-menu.js into your undertaking.

# NPM
$ npm install context-menu --save

// ES 6
import ContextMenu from 'ContextMenu';

// CommonJS:
const ContextMenu = require('ContextMenu');

Include the UMD version of context-menu.js on the net web page.

<script src="context-menu.js"></script>

Define the menu objects within the JavaScript:

var items = [
    { name: 'Cut', fn: function(target) { console.log('Cut', target); }},
    { name: 'Copy', fn: function(target) { console.log('Copy', target); }},
    { name: 'Paste', fn: function(target) { console.log('Paste', target); }},
    {},
    { name: 'Select All', fn: function(target) { console.log('Select All', target); }},
];

Attach the context menu to a component.

<div class="default" tabindex="0">Default theme</div>

var myMenu = new ContextMenu('.default', items);

Add an extra CSS class to the context menu. Useful for {custom} menu styles.

var myMenu = new ContextMenu('.default', items,{
    className: 'custom-theme',
    minimalStyling: true
});

Event listeners.

// events: created, shown, hidden, itemselected
instance.on('shown', function);
instance.off('shown', function);

Option:

• selector (String) – Show context menus for elements matching this selector
• items (Array) – Array of menu items objects in the format of:
  • name (String) – Label displayed for menu item
  • fn (Function) – onclick the event handler for menu item
  • Note: to insert a divider, insert an empty object ({}) in the items array.
• options (Object)
  • className (String, default: '') – CSS class to add to the context menu element
  • minimalStyling (Boolean, default: false) – If true, does not apply default theme CSS class to context menu element

Create Custom Context Menus, context-menu Plugin/Github

See Demo And Download