Pure-context-menu NPM

Pure Context Menu

How to use

Easily manage the right click context menu.

No additional CSS needed if you are using Bootstrap!

import PureContextMenu from "./pure-context-menu.js";

const items = [
  {
    label: "Click here",
    callback: () => {
      alert("You clicked here");
    },
  },
  "-",
  {
    label: "Target click",
    callback: (e) => {
      if (e.target.id) {
        alert("You clicked on target " + e.target.id);
      } else {
        alert("You didn't click on a target");
      }
    },
  },
  {
    label: "This is a long menu item that spans on two line",
    callback: () => {
      alert("You clicked on a long line");
    },
  },
  {
    label: "This will not close",
    preventCloseOnClick: true,
    callback: () => {
      alert("It didn't close");
    },
  },
];
// bind to html if body does not have 100% height
let bodyMenu = new PureContextMenu(document.querySelector("html"), items);

Features

Built-in styles for Bootstrap

Easy context menu use default Bootstrap styles so you don't need extra css. Otherwise, look at styles.scss to see some default styles you can use. It can either use dropdown or list groups styles.

Prevent close on click

By default, clicking on an item will close the menu. You can control this with preventCloseOnClick.

Determining target

The callback receive the event that originally opened the context menu. This allow determing the target under the context menu. If you need to adjust items based on the current target, use setItems during the show callback.

Dividers

Simply pass "-" in the list of elements to mark dividers. This doesn't work well with list group styles since items are already separated.

Mobile support

Surprisingly, modern mobile browsers translate long press to a contextmenu event that it works out of the box :-)

If it's not working, long-press is supported, simply add it to your pages

<script src="https://cdn.jsdelivr.net/npm/long-press-event@2.4.6/dist/long-press-event.min.js" type="module"></script>

Options

Options can be either passed to the constructor (eg: optionName) or globally updated using PureContextMenu.updateGlobalOptions

Name	Type	Description
contextMenuClass	String	Class applied for holder element
dropdownClass	String	Class applied for dropdown. Accepts space separated classes
dividerClass	String	Class applied to the divider item
menuItemClass	String	Class applied to the li in all cases.
itemClass	String	Class applied to the menu item. Accepts space separated classes
disabledClass	String	Class applied to the disabled items
zIndex	Number	z-index assigned to the menu
preventCloseOnClick	Boolean	Global behaviour for items when clicking
useLists	Boolean	Enable list groups
listClass	String	Class applied to the list
listItemClass	String	Class applied to the list item. Accepts space separated classes
fastClick	Boolean	Triggers click on touchstart for mobile devices
closeIfOpen	Boolean	Close menu with right close if already opened
show	function	Whether to show menu based on event