Create Custom Context Menus In Vanilla JavaScript – context-menu.js

Category: Javascript , Menu & Navigation | May 20, 2021
Views Total:3,537 views
Official Page:Go to website
Last Update:May 20, 2021


Create Custom Context Menus In Vanilla JavaScript – context-menu.js


context-menu.js is a JavaScript/LESS plugin that helps you create custom, dynamic, native-looking context menus inside any container element you specify.

How to use it:

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

$ 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 web page.

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

Define the menu items in 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 an element.

<div class="default" tabindex="0">Default theme</div>
var myMenu = new ContextMenu('.default', items);

Add an additional 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);'shown', function);


v2.0.0 (05/20/2021)

  • Update

v1.0.3 (08/07/2019)

  • Bugfix

You Might Be Interested In:

Leave a Reply