custom-right-click-context-menu

Custom Right-Click Context Menu With HTML and JavaScript

by

Custom right-clicks (context) menu is a great context menu that is triggered by right-clicking. Dark and light themes are included. Written in JavaScript and CSS/CSS3.

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

How to make use of it:

1. Load the ContextMenu.css and JavaScript ContextMenu.js stylesheet into the document.

<link rel="stylesheet" href="ContextMenu.css" />
<script src="ContextMenu.js"></script>

2. Create a set of links for the context menu.

const menuItems = [
  {
    content: `Item 1`,
    events: {
      click: (e) => console.log(e, "Copy Button Click")
      // You can use any event listener from here
    }
  },
  { content: `Item 2` },
  { content: `Item 3` },
  { content: `Item 4` },
  {
    content: `Item 5`,
    divider: "top" // top, bottom, top-bottom
  }
];

3. Attach the context menu to the target item.

const myMenu = new ContextMenu({
  target: ".target",
  menuItems
});

4. Configuration of the context menu.

myMenu.init();

5. Change the theme to “Light”.

const myMenu = new ContextMenu({
  target: ".target",
  mode: "light",
  menuItems
});

Cool Custom Right-Click Context Menu Plugin/Github

See Demo And Download

Demo & Download

Official Website(knyttneve): Click Here

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

Leave a Comment