Easy Dynamic Context Menu Component – tui.context-menu

Preview:

Description:

tui.context-menu is a simple, dynamic, multi-level context menu UI component written in Vanilla JavaScript.

The context menu can be attached to any DOM element, which means that your users can access specific actions or options related to a particular element on a website or web app.

How to use it:

1. Install and import the tui.context-menu as an ES module.

# NPM
$ npm i tui-context-menu

import ContextMenu from 'tui-context-menu';

2. Or load the necessary JavaScript & CSS files in the document.

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

3. Create a new context menu instance and specify the container ID.

<div id="example"></div>
<div id="target">Right-click</div>

// ES6
const contextMenu = new ContextMenu(document.querySelector('#example'));
// browser
var contextMenu = new tui.ContextMenu(document.querySelector('#example'));

4. Register menu items as follows:

contextMenu.register('#target', onClick, [
  {title: 'New Folder'},
  {
    title: 'New File',
    menu: [
      {title: '20170101.xls'},
      {title: 'image.png', command: 'export-to-png'},
      {title: 'image.jpg', command: 'export-to-jpg'}
    ]
  },
  {separator: true},
  {title: 'Rename'},
  {title: 'Delete'},
  {title: 'Copy', disable: true},
  {title: 'Paste', disable: true}
]);

// onClick event
function onClick(e, cmd) {
  console.log(cmd);
}

5. Destroy the context menu.

contextMenu.destroy();