---
title: "Bootstrap ContextMenu"  
description: "In this blog I’m explaining about Bootstrap contextmenu.  Discription:A contextual menu is a graphical user interface menu that appears on user intera"  
author: "Anonymous User"  
published: 2014-10-13  
updated: 2014-10-13  
canonical: https://www.mindstick.com/blog/697/bootstrap-contextmenu  
category: "bootstrap"  
tags: ["jquery", "bootstrap"]  
reading_time: 2 minutes  

---

# Bootstrap ContextMenu

In this blog I’m explaining about [Bootstrap](https://www.mindstick.com/articles/1555/image-viewer-using-bootstrap-carousel) contextmenu.\

##### Discription:

A contextual menu is a graphical [user interface](https://www.mindstick.com/interview/22909/user-interface-objects-in-cocoa) menu that appears on [user interactions](https://www.mindstick.com/forum/158690/how-can-you-handle-user-interactions-such-as-button-clicks-using-jquery) such as right-mouse clicks or middle-click mouse operation. This menu only offers a limited set of choices based on the [application](https://www.mindstick.com/articles/12824/calculator-application-in-android)'s [current state](https://www.mindstick.com/forum/158105/what-is-the-current-state-of-research-and-development-in-nanotechnology). The choices available are related to the object that has been selected. \
\
Contextual menus are also [referred to as](https://answers.mindstick.com/qa/39930/at-the-turn-of-the-century-widespread-panic-occurred-that-at-midnight-all-computers-would-reset-to-zero-and-life-as-we-knew-it-would-cease-to-exist-what-was-this-doomsday-theory-commonly-referred-to-as) [context](https://www.mindstick.com/forum/23245/what-is-context-in-android), shortcut or pop-up menus.

To [implement custom](https://www.mindstick.com/forum/160314/how-to-implement-custom-authentication-and-authorization-logic-in-a-dot-net-core-api) right click context menu using Bootstrap we need to write the code as shown below.

Firstly you create html page.

##### Add bellow files in your page:

```
<script type="text/javascript" src="//code.jquery.com/jquery-2.0.2.js"></script> <link rel="stylesheet" type="text/css" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
```

##### and the after write javascript code:

```
 <script type="text/javascript">    $(window).load(function () {        (function ($, window) {            $.fn.contextMenu = function (settings) {                return this.each(function () {                    $(this).on("contextmenu", function (e) {                        $(settings.menuSelector)                            .data("invokedOn", $(e.target))                            .show()                            .css({                                position: "absolute",                                left: getLeftLocation(e),                                top: getTopLocation(e)                            })                            .off('click')                            .on('click', function (e) {                                $(this).hide();                                 var $invokedOn = $(this).data("invokedOn");                                var $selectedMenu = $(e.target);                                 settings.menuSelected.call(this, $invokedOn, $selectedMenu);                            });                         return false;                    });                });                 function getLeftLocation(e) {                    var mouseWidth = e.pageX;                    var pageWidth = $(window).width();                    var menuWidth = $(settings.menuSelector).width();                    if (mouseWidth + menuWidth > pageWidth &&                        menuWidth < mouseWidth) {                        return mouseWidth - menuWidth;                    }                    return mouseWidth;                }                 function getTopLocation(e) {                    var mouseHeight = e.pageY;                    var pageHeight = $(window).height();                    var menuHeight = $(settings.menuSelector).height();                    if (mouseHeight + menuHeight > pageHeight &&                        menuHeight < mouseHeight) {                        return mouseHeight - menuHeight;                    }                    return mouseHeight;                }             };        })(jQuery, window);         $("#myTable td").contextMenu({            menuSelector: "#contextMenu",            menuSelected: function (invokedOn, selectedMenu) {                //console.log($(invokedOn).close.first().html());                var tr = $(invokedOn).parent("tr");                alert($(tr).find('td:not(:empty):first').html());            }        });    });   </script>
```

##### Html code:

```
<div style="width:80%;margin:100px auto;">    <table id="myTable" class="table table-hover">        <thead>            <tr>                <th>#</th>                <th>First Name</th>                <th>Last Name</th>                <th>Username</th>            </tr>        </thead>        <tbody>            <tr>                <td>1</td>                <td>Kamlakar</td>                <td>Singh</td>                <td>abc&#64;gmail.com</td>            </tr>            <tr>                <td>2</td>                <td>Rohit</td>                <td>Kesharwani</td>                <td>abc&#64;outlook.com</td>            </tr>            <tr>                <td>3</td>                <td>Pawan</td>                <td>Shukla</td>                <td>abc&#64;yahoo.com</td>            </tr>        </tbody>    </table></div> <ul id="contextMenu" class="dropdown-menu" role="menu" style="display: none">    <li><a tabindex="-1" href="#">Action</a></li>    <li><a tabindex="-1" href="#">Another action</a></li>    <li><a tabindex="-1" href="#">Something else here</a></li>    <li class="divider"></li>    <li><a tabindex="-1" href="#">Separated link</a></li></ul>
```

in my next post i'll explain about [Convert Text Document to PDF File](https://www.mindstick.com/blog/698/Convert%20Text%20Document%20to%20PDF%20File#.VPabufmUdz8)

---

Original Source: https://www.mindstick.com/blog/697/bootstrap-contextmenu

Copyright © MindStick Software Pvt. Ltd. This Markdown version is provided for developers, AI systems, and offline reading.