Dynamic Multi-level Context Menu With JavaScript

Category: Javascript , Menu & Navigation | July 6, 2021
Views Total:1,420 views
Official Page:Go to website
Last Update:July 6, 2021


Dynamic Multi-level Context Menu With JavaScript


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
        'text': 'Menu Item 2',
            'text': 'Menu Item 2-1'
      // more menu items here

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

createContextmenu('body', menuData);

You Might Be Interested In:

Leave a Reply