Custom Right-click Menu (Context Menu) In Vanilla JavaScript – CtxMenu

Category: Javascript , Menu & Navigation | October 22, 2019
Author: nils-soderman
Views Total: 203
Official Page: Go to website
Last Update: October 22, 2019
License: MIT


Custom Right-click Menu (Context Menu) In Vanilla JavaScript – CtxMenu


CtxMenu is a dynamic, customizable context menu plugin to replace the native browser right-click menu.

How to use it:

Add the CtxMenu plugin’s JavaScript to the page.

<script src="/path/to/CtxMenu/CtxMenu.js"></script>

Create a new context menu for the entire page.

var contextMenu = CtxMenu();

Add items together with onClick functions, custom icons, list index to the context menu.

contextMenu.addItem("Item 1", function(){
  // fired on click

contextMenu.addItem("Item 2", function(){
  // fired on click
},Icon = "icon.png", 3);

Add a separator to the context menu.


You can also attach the context menu to any container element you specify.

var contextMenu = CtxMenu("#myContainer");



  • Fixed a position issue for pages with scrollbars


  • Removed CtxMenuItem class & changed some variables to constants


  • Fixed an issue that could break the menu if the page had scrollbars


  • Added index option to addSeperator()


  • added min & max width to the image icon


  • The box-shadow now uses rgba instead of hex
  • Fixed elements not being detected if it had multiple class names

You Might Be Interested In:

Leave a Reply