ContextMenu.js is a lightweight context menu JavaScript library that allows you to associate any actions with menu items.

custom context menu codepen, custom context menu jquery, js custom context menu, custom context menu react, custom right click menu html, javascript context menu example

How to make use of it:

1. Import Contextmenu.js into your document.

<script src="./src/contextMenu.min.js" ></script>

2. Select a set of menu items as follows:

const menuItem = [
      {
        template: "<span>Menu Item 1</spa>",
        onClick : function(){
          // do something
        }
      },
      {
        template: "<span>Menu Item 2</spa>",
        onClick : function(){
          // do something
        }
      },
      {
        template: "<span>Menu Item 3</spa>",
        onClick : function(){
          // do something
        }
      },
]

3. Configure the context menu and attach it to the target item you select.

contextMenu({
  items: menuItems
}).init(document.getElementById("myContainer"));

4. Apply your own CSS styles to the context menu.

.contextMenu{
  background-color: #7d5fff;
}

.contextMenuItem{
  transition: all 0.4s ease;
  display: flex;
  justify-content: center;
  align-items: center;
  align-content: center;
  padding: 10px;
  color:#fff;
}

.contextMenuItem:hover{
  background-color: #5f27cd;
  color:#fff;
}

5. Customize CSS class and context menu identifier.

contextMenu({
  items: menuItems,
  className: "myClassName",
  id:"myId",
}).init(document.getElementById("myContainer"));

Lightweight Custom Context Menu In Vanilla JavaScript, ContextMenu.js Plugin/Github, custom right click menu chrome

See Demo And Download

Official Website(mboussaid): Click Here

This superior jQuery/javascript plugin is developed by mboussaid. For extra Advanced Usages, please go to the official website.