Add Custom Context Menus To Any HTML Element – vanilla-context-menu

Preview:

Description:

A context menu is a feature of many applications. It’s a listing of options that appears on right-click. That usually provides some additional functions to process the thing that was right-clicked.

vanilla-context-menu is a simple JavaScript library that easily adds custom context menus to any HTML elements. This is a vanilla JS approach that doesn’t depend on other libraries and frameworks.

How to use it:

1. Install and import the vanilla-context-menu.

# NPM
$ npm i vanilla-context-menu
import VanillaContextMenu from 'vanilla-context-menu';

// Browser
<script src="/path/to/dist/vanilla-context-menu.js"></script>

2. Define your menu items in a JS array as follows:

const myMenu = [
      {
      label: 'Copy',
      callback: () => {
        console.log('Option 1 was clicked');
      },
      },
      'hr', // separator
      {
        label: 'Option 2',
        iconClass: null, // custom icon
        iconHTML: null, // custom icon
        callback: anotherFunction,
        preventCloseOnClick: false,
        nestedMenu: [], // sub-menus
      },
      // ...
],

3. Initialize the library and attach the context menu to the element you specify.

const myContextMenu = new window.VanillaContextMenu({
      scope: document.querySelector('#container'),
      menuItems: myMenu,
});

4. Optional settings:

const myContextMenu = new window.VanillaContextMenu({
      // required
      scope: document.querySelector('#container'),
      menuItems: myMenu,
      // optional
      customClass: '',
      customThemeClass: '',
      preventCloseOnClick: false,
      transitionDuration: 200,
      theme: 'black', // or 'white'
      normalizePosition: true, // If true, the position of the contextmenu is bound to the scope. Otherwise the left top corner of the contextmenu is bound to the mouse position.
});

5. Close the menu manually.

myContextMenu.close()

6. Update options.

myContextMenu.updateOptions(configurableOptions)

Changelog:

v1.6.0 (09/21/2023)

• feat(api): close context-menu

v1.4.2 (12/15/2022)

• Update

v1.4.0 (11/11/2022)

• feat(nested-menu): implement nested menu

v1.3.0 (09/20/2022)

• Add a new property for MenuItem to display an icon as an HTML string. The HTML will be sanitized internally using DOMPurify.