Dynamic Multi-level Context Menu With JavaScript

Preview:

Description:

A simple, plain, multi-level context menu component implemented in vanilla JavaScript.

No third-party framework and stylesheet required.

How to use it:

1. Insert the main JavaScript contextmenu.js into the document.

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

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

const menuData = [
      {
        'text': 'Menu Item 1',
        'extraText': 'cool!',
        'onclick': e=>alert('nice'),
      },
      'divider', // divider
      'divider',
      {
        'text': 'Menu Item 2',
        'sub':[
          {
            'text': 'Menu Item 2-1'
          },
        ]
      },
      // more menu items here
]

3. Attach the context menu to the target container. That’s it.

createContextmenu('body', menuData);