The 3-dot Context Menu allows for a simple and lightweight implementation to show 3 vertical dots allowing the user to click and show a menu. Below is a screenshot showing an example of what it looks like.

Requirements

Jquery is required and most modern browsers should support the library. We have tested the latest versions of Google Chrome, Internet Explorer, Microsoft Edge, and Firefox.

Implement a three (3)-dot context menu

Implementing a 3-dot context menu is as straightforward as adding a single javascript file and css file with a single line of javascript code to implement the menu.

The three-dot list can be added inside <td> tags inside tables, within <p> tags, and html heading tags like <h1>, <h2>, etc. (even <h5>).

Customize the 3-dot context menu

You can also add a third parameter to the ContextMenu call which is an options array. Right now, this set of options only has one option available, but it’s done in such a way that it’s future-proof if there are new customization options to be added in the future.

Disable menu items

You can disable the menu item so that it is not dynamically clickable. This can be done in two ways. You can either disable a menu item from within the openCallBack method or by calling the disable method via the ContextMenu object, in the above example it would be varContextMenu.

The method to disable the menu item is DisableMenuItem(param). The parameter of this method is the menu item that must be disabled. This can be a number (the position of the element within the list (0 indexed)). The parameter can also be a string, where the string is the text of the menu item.

Must Read: A Simple Vue Context Menu Component Javascript Library

<script src="/3dot-context-menu/context-menu.js"></script>
<link href="/3dot-context-menu.css" rel="stylesheet">

<td class="context-menu" data-container-id="my-context-menu-items"></td>

var varContextMenu = null;
$(document).ready(function(){
    varContextMenu = new ContextMenu("context-menu-items", function (menu_item, parent)
         {
             alert("Menu Item Clicked: " + menu_item.text() + "\nRecord ID: " + parent.attr("data-row-id"));
         });
});

var varContextMenu = null;
$(document).ready(function(){
    var options = {
        openCallBack: function(contextMenu) {
            console.log("Opening context menu call back called");
        }
    };
    varContextMenu = new ContextMenu("context-menu-items", function (menu_item, parent)
         {
             alert("Menu Item Clicked: " + menu_item.text() + "\nRecord ID: " + parent.attr("data-row-id"));
         }, options);
});

var options = {
    openCallBack: function(contextMenu) {
        contextMenu.disableMenuItem(0); //Delete the first menu item
    }
}

Official Website(BoardiesITSolutions): Click Here

This superior jQuery/javascript plugin is developed by BoardiesITSolutions. For extra advanced usage, please go to the official website.