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

Preview:

Description:

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.

contextMenu.addSeparator();

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

var contextMenu = CtxMenu("#myContainer");

Get menu items.

myItems = myContextMenu.getItems();
myItem = myContextMenu.getItemAtIndex(1);

Changelog:

07/16/2022

• Rewrite Positioning Code

04/05/2021

• Added getItems() & getItemAtIndex(), removed removeItem() methods.

12/30/2020

• Added dark mode colors that’ll be used if the browser’s theme settings are set to dark.

v1.0.0 (07/23/2020)

• Fixed typo in AddSeparator()

07/23/2020

• Fixed typo addSeperator -> addSeparator

10/22/2019

• Fixed a position issue for pages with scrollbars

08/13/2019

• Removed CtxMenuItem class & changed some variables to constants

08/10/2019

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

08/04/2019

• Added index option to addSeperator()

08/02/2019

• added min & max width to the image icon

08/01/2019

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