JSFiddle - React, Tailwind, and code Playground
HTML
<html>
<head>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script src="https://kit.fontawesome.com/2e92995879.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/[email protected]/css/fontawesome.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-contextmenu/2.7.1/jquery.contextMenu.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-contextmenu/2.7.1/jquery.contextMenu.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-contextmenu/2.7.1/jquery.ui.position.js"></script>
</head>
<body>
<button id="btn1">Button</button>
</body>
</html>
JavaScript
$(function() {
$.contextMenu({
selector: "#btn1",
callback: function(key, options) {
var m = "clicked: " + key;
window.console && console.log(m) || alert(m);
},
items: {
"edit": {
name: "Edit",
icon: "fas fa-solid fa-magnifying-glass"
},
"cut": {
name: "Cut",
icon: "fas fa-solid fa-stethoscope"
},
copy: {
name: "Copy",
icon: "copy"
},
"paste": {
name: "Paste",
icon: "paste"
},
"delete": {
name: "Delete",
icon: "delete"
},
"sep1": "---------",
"quit": {
name: "Quit",
icon: function() {
return "context-menu-icon context-menu-icon-quit";
}
}
}
});
$("tab1").on("click", function(e) {
console.log("clicked", this);
})
});