Mobile-friendly Custom Context Menu Component In JavaScript

Category: Javascript , Menu & Navigation | February 26, 2023
Author:lekoala
Views Total:86 views
Official Page:Go to website
Last Update:February 26, 2023
License:MIT

Preview:

Mobile-friendly Custom Context Menu Component In JavaScript

Description:

A lightweight yet highly customizable context menu component that provides an easy way to manage the Website’s right-click context menu and improve the Website’s usability.

The custom context menu can be attached to any DOM element (not only the whole page) and allows triggering it on mobile devices with a long press.

How to use it:

1. Install and import the context menu component.

# NPM
$ npm i pure-context-menu
import PureContextMenu from "./pure-context-menu.js";

2. Define the menu items in a JS array as follows:

const items = [
      {
        label: "Item 1",
        callback: () => {
          // do something
        },
      },
      "-", // Separator
      {
        label: "Item 2",
        callback: (e) => {
          if (e.target.id) {
            alert("You clicked on target " + e.target.id);
          } else {
            alert("You didn't click on a target");
          }
        },
      },
      {
        label: "Item 3",
        preventCloseOnClick: true,
        callback: () => {
          // do something
        },
      },
      // more items here
];

3. Attach the context menu to a specific container.

let myMenu = new PureContextMenu(document.querySelector("#container"), items, {
    // options here
});

4. All default options.

let myMenu = new PureContextMenu(document.querySelector("#container"), items, {
    contextMenuClass: "pure-context-menu",
    dropdownClass: "dropdown-menu",
    dividerClass: "dropdown-divider",
    itemClass: "dropdown-item",
    zIndex: "9999",
    preventCloseOnClick: false,
    show: event => true,
});

Changelog:

v1.1.1 (02/26/2023)

  • mobile fixes

You Might Be Interested In:


Leave a Reply