A JavaScript Library for Adding Context Menus to Any HTML Element | context-menu.js

A context menu is a small (4.4kb / 1.7kb compressed) JavaScript library for adding that helps you create custom, dynamic, and original-looking context menus within any container element you select.

Must Read – Simple and Lightweight Vertical 3-Dot Context Menu

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

.destroy()

Removes DOM elements and event listeners.

Create Custom Context Menus, context-menu Plugin/Github

Read More – 

Skinnable Right-Click Context Menu Library for Web | context-js
jQuery Enable Right-click Context Menu for Bootstrap


See Demo And Download

Official Website(mturco): Click Here

This superior jQuery/javascript plugin is developed by mturco. For extra Advanced Usages, please go to the official website.

Share