Context Menu

Use jQuery ContextMenu plugin to create customizable right-click context menus for your web elements.

Step 1: Install ContextMenu

You can install jQuery ContextMenu via yarn.

yarn add jquery-contextmenu

Step 2: Include ContextMenu CSS & Script

Include the jQuery ContextMenu CSS and JS files from your local libs folder.

<!-- ContextMenu CSS -->
<link rel="stylesheet" href="../assets/libs/jquery-contextmenu/jquery.contextMenu.min.css">

<!-- ContextMenu Script -->
<script src="../assets/libs/jquery-contextmenu/jquery.contextMenu.min.js"></script>

Step 3: Add Button HTML

Create a button element that triggers the right-click context menu.

<button type="button" class="btn btn-primary" id="context-menu-1">Right click me</button>

Step 4: Initialize Context Menu

Use the following JavaScript code to set up the context menu, handle clicks, and support RTL layouts.

"use strict";

$(function () {
    function positionMenu(e, t, n) {
        t = isRTL ? t - e.$menu.outerWidth() : t;
        e.$menu.css({ top: n, left: t });
    }

    function callback(key, options) {
        alert("clicked: " + key);
    }

    var isRTL = $("html").attr("dir") === "rtl";

    $.contextMenu({
        selector: "#context-menu-1",
        position: positionMenu,
        callback: callback,
        items: {
            edit: { name: "Edit", icon: "edit" },
            cut: { name: "Cut", icon: "cut" },
            copy: { name: "Copy", icon: "copy" },
            paste: { name: "Paste", icon: "paste" },
            delete: { name: "Delete", icon: "delete" },
            sep1: "---------",
            quit: {
                name: "Quit",
                icon: function (e, t, n) { return "context-menu-icon context-menu-icon-quit"; }
            }
        }
    });
});

For more options, events, and customization, visit the jQuery ContextMenu documentation.