Cool Custom Context Menu With JavaScript

Preview:

Description:

A pretty cool custom context menu triggered by right click.

Dark and Light themes are included. Written in plain JavaScript and CSS/CSS3.

How to use it:

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

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

2. Create an array 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 element.

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

4. Initialize the context menu. Done.

myMenu.init();

5. Change the theme to ‘light’.

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