Contextify is a lightweight JavaScript context menu library with FontAwesome support. This library was written for use on my personal project as the AIO solution for context menu features that I wanted to find spread only across multiple different context menu libraries. These are very early doors and I will continue to maintain them but slowly it may happen as I create my personal projects and change use cases or arise the need for features.

Contextify is a lightweight, customizable, customizable, and multi-level context menu library to override the default browser’s context menu. Allows selecting menu items in JSON format for maximum customization.

How to make use of it:

1. Load the Font Awesome Iconic Font for the menu icons.

<script src="https://kit.fontawesome.com/df7df855c2.js" crossorigin="anonymous"></script>

2. Load the Contextify JavaScript library.

<script src="Contextify.js"> </script>

3. Define your menu objects in a JS array as follows:

let mainMenu = [
    { 
      icon: 'fa-home', 
      type: 'button', 
      hotkey: 'Ctrl + 1', 
      text: 'Home', 
      enabled: false 
    },
    { type: 'separator'},
    { 
      icon: 'fa-share', 
      type: 'button', 
      text: 'Social', 
      child: subMenu 
    },
    { 
      icon: 'fa-times-circle', 
      type: 'button', 
      text: 'Cancel', 
      click: function() { 
        // Do something
      } 
    }
];
let subMenu = [
    { 
      icon: 'fa-twitter', 
      type: 'button', 
      hotkey: 'Alt + 1', 
      text: 'Twitter', 
      click: function(event) { 
        // Do something
      } 
    },
    { 
      icon: 'fa-facebook', 
      type: 'button', 
      hotkey: 'Alt + 1', 
      text: 'Facebook', 
      click: function(event) { 
        // Do something
      } 
    },
    { 
      icon: 'fa-instagram', 
      type: 'button', 
      hotkey: 'Alt + 1', 
      text: 'Instagram', 
      click: function(event) { 
        // Do something
      } 
    },
];

4. Initialize the context menu, outline the theme you wish to use, and decide by which container you wish to show the context menu.

const contextMenu = new Contextify(mainMenu, "dark", document.body);

5. Show the context menu at a selected X, Y coordinate place on the display screen.

contextMenu.show(x, y);

6. Hide the menu by setting the active state to false and removing every of the child elements together with the children’s context menu objects.

contextMenu.hide(hideParent);

7. Change the theme manually.

assignTheme(themeName);

Themeable Context Menu Library, Contextify Plugin/Github

See Demo And Download