Tiny Context Menu Plugin For The Web – VanillaContextMenu

Preview:

Description:

A tiny, dynamic, multi-level context menu library that can be attached to any DOM element via vanilla JavaScript.

How to use it:

1. Download and unzip the package, then include the following JavaScript and CSS files on the webpage.

<link href="vanilla-context.min.css" rel="stylesheet" />
<script src="vanilla-context.min.js"></script>

2. Define your hierarchical menu items (nodes) in a JS array as follows:

const myNodes = [{
      renderer: (params) => {
        const td = params.originEvent.target.closest('td');
        return '<b>' + td.textContent + '</b>';
      },
      disabled: true,
      style: {
        height: '60px'
      }
      }, {
      renderer: 'Menu Item',
      onClick: ({ api, originEvent }) => {
        const row = originEvent.target.closest('tr');
        if (row) {
          row.parentElement.removeChild(row);
        }
        api.close();
      },
      }, {
      renderer: '<bold>Menu Item</bold>',
      onClick: (e) => {
        console.log(e);
      },
      children: [{
        renderer: 'Menu Item',
        onClick: (e) => {
          console.log(e);
        }
      }, {
        renderer: '<bold>Menu Item</bold>',
        onClick: (e) => {
          console.log(e);
        },
        children: [{
          renderer: (e) => {
            const p = document.createElement('p');
            p.innerHTML = 'Menu Description';
            return p;
          },
          onClick: (e) => {
            console.log(e);
          }
        }, {
          renderer: '<bold>Menu Item</bold>',
          onClick: (e) => {
            console.log(e);
          },
          children: [{
            renderer: 'Menu Item',
            onClick: (e) => {
              console.log(e);
            }
          }, {
            renderer: '<bold>Menu Item</bold>',
            onClick: (e) => {
              console.log(e);
            }
          }]
        }]
      }]
}]

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

const targetElement = document.getElementById('example');
const basicTableContext = new VanillaContext(targetElement, {
      nodes: myNodes
});

Changelog:

09/15/2020

• v1.0.6: Bugfixed