JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<ul class="dropdown-menu" id="menu">
    <li><a href="#">Download file</a>

    </li>
    <li><a href="#">Upload file</a>

</ul>

CSS

#menu {
    position:absolute;
    top:20px;
    left:20px;
}
html, body {
    height: 100%;
}

JavaScript

//context menu for orders table
$(document).on("contextmenu", "body", function (event) {
    //we won't show the default context menu
    event.preventDefault();

    $('#menu').dropdown('toggle')

    //showing it close to our cursor
    $('#menu').dropdown('toggle').css({
        top: (event.pageY) + "px",
        left: (event.pageX) + "px"
    });
});