Lightweight Right Click Menu In Pure JavaScript – Ctxmenu

Preview:

Description:

A tiny, dynamic, and multi-level context menu library used to replace the native browser right-click menu.

How to use it:

1. Load the ctxmenu-native.css stylesheet for the custom context menu.

<link rel="stylesheet" href="./dist/css/ctxmenu-native.css" />

2. Create a container in which the library renders the context menu.

<div id="contextmenu-container" style="position: fixed; display: none;"></div>

3. Load the Ctxmenu’s JavaScript at the end of the document.

<script src="./dist/js/ctxmenu-native.js"></script>

4. Define menu items and commands in an array of JS objects as follows:

const data = [
      {
          name: 'Copy',
          cmd: 'copy',
          tips: '',
          separate: true,
          disabled: false,
          selectedTag: true,
          extend: []
      }, {
          name: 'Paste',
          cmd: 'paste',
          tips: '',
          separate: false,
          disabled: true,
          selectedTag: false,
          extend: []
      }, {
          name: 'New',
          cmd: 'new',
          tips: '',
          separate: false,
          disabled: false,
          selectedTag: false,
          extend: [
              {
                  name: 'Folder',
                  cmd: 'folder',
                  tips: '',
                  separate: true,
                  disabled: false,
                  selectedTag: false,
                  extend: []
              },  {
                  name: 'Extend',
                  cmd: 'extend',
                  tips: '',
                  separate: false,
                  disabled: false,
                  selectedTag: false,
                  extend: [
                      {
                          name: 'Word',
                          cmd: 'word',
                          tips: '',
                          separate: false,
                          disabled: false,
                          selectedTag: false,
                          extend: []
                      }, {
                          name: 'Excel',
                          cmd: 'excel',
                          tips: '',
                          separate: false,
                          disabled: false,
                          selectedTag: true,
                          extend: []
                      }
                  ]
              }
          ]
      }, {
          name: 'Refresh',
          cmd: 'refresh',
          tips: '',
          separate: false,
          disabled: false,
          selectedTag: false,
          extend: []       
      }
]

5. Render the custom context menu.

let ctxmRes = {}
document.addEventListener('contextmenu', function( evte ){
    evte.preventDefault()
    ctxmRes = Contextmenu.render(
        document.getElementById( 'contextmenu-container' ),
        data,
        {
            hyphen: ':',
            clickCallback( res ){
              console.log( res )
              Contextmenu.hidden( ctxmRes.$el )
            }
        }
    )
    Contextmenu.show(
        ctxmRes.$el,
        {
            left: evte.clientX,
            top: evte.clientY
        }
    )
}, false)

6. Close the context menu on click outside.

document.addEventListener('click', function( evte ){
    Contextmenu.hidden( ctxmRes.$el )
}, false)