Simple and Lightweight Vertical 3-Dot Context Menu

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.


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

How to make use of it:

1. In the header tag of your webpage, add the following:

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

2. Add a category context menu and a data attribute called date-container-id with the id value of the div containing the menu items.

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

3. Create a new ContextMenu and pass two parameters.

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

4. You can create a context menu with an array of options as follows:

var varContextMenu = null;
    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);

5. Here is how to disable the menu item from openCallBack the method.

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

See Also –

Javascript Library Context Menu Functionality Library | class2context.js
Skinnable Right-Click Context Menu Library for Web | context-js
jQuery Enable Right-click Context Menu for Bootstrap


See Demo And Download

Official Website(BoardiesITSolutions): Click Here

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

Related Posts


Multi-purpose Navigation Menu for Javascript Library | jQuery Corenav

coreNavigation is a multipurpose navigation menu for a jquery based javascript library, comes with more style, and is easy to integrate. 11 Default Menu 2 Responsive Navigation…


Simple Multi-Select Dropdown Pure Vanilla Javascript | multiSelect.js

MultiSelect.js is a simple, clean, and progressive JavaScript library designed for easy integration with any type of project or system. The design was heavily influenced by the…


Confetti Falling Animation Effect In JavaScript | party.js

Party.js is a JavaScript library to brighten user site experience with visual effects! Celebrate success with dom confetti! The library is written in TypeScript and compiled into…


How To Create A Popup in HTML with CSS

How to create popup in html with css – Popup without JavaScript is an elegant pop-up panel component with an animated scale, written in CSS. Have you…


Responsive Image Gallery & Lightbox Plugin using Bootstrap

Bootstrap Gallery With this script and Bootstrap 4, you can easily create an image gallery. You just have to put the thumbnails on the page. The BS Gallery…


Bootstrap 5 Floating Label Form Controls Library

A bootstrap floating label is a CSS / SCSS library that adds floating labels to Bootstrap 5 or Bootstrap 4 form controls such as input, text area,…