When you use an online utility websites such as web ftp, online photo editing etc, you can notice that they have a custom right click context menu which has options and links in favor of their service and functionality. If you have the same kind of requirements, you can also create one on your own using jQuery.


Basic Setup

Create a simple HTML file with jQuery library included.

<!DOCTYPE html>
 <title>Custom Right Click Context Menu</title>
 <script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
//This is the menu block
<div class="menu">
 <a href="#"><li>Menu 1</li></a>
 <a href="#"><li>Menu 2</li></a>
 <a href="#"><li>Menu 3</li></a>
 <a href="#"><li>Menu 4</li></a>
 <a href="#"><li>Menu 5</li></a>


Initially menu div should be hidden. We can bring it into action whenever we want using jQuery.

			width: 100px;
			background: #000;
			color: #fff;
			z-index: 999999;
			display: none;
			box-shadow: 0 0 10px #713C3C;
		.menu ul{
			list-style: none;
			padding: 0;
		.menu ul a{
			text-decoration: none;
		.menu ul li{
			width: 88%;
			padding: 6%;
			background-color: #F04D44;
			color: #fff;
		.menu ul li:hover{
			background-color: #F7BA4B;
	    		color: #444343;


we have to disable the default functionality for right click event using preventDefault function. Then we should find the event position and place the menu div near to it.

	$(document).ready(function () {
		       //prevent default context menu for right click

		       var menu = $(".menu"); 

		       //hide menu if already shown
		       //get x and y values of the click event
		       var pageX = e.pageX;
		       var pageY = e.pageY;

		       //position menu div near mouse cliked area
		       menu.css({top: pageY , left: pageX});

		       var mwidth = menu.width();
		       var mheight = menu.height();
		       var screenWidth = $(window).width();
		       var screenHeight = $(window).height();

		       //if window is scrolled
		       var scrTop = $(window).scrollTop();

		       //if the menu is close to right edge of the window
		       if(pageX+mwidth > screenWidth){

		       //if the menu is close to bottom edge of the window
		       if(pageY+mheight > screenHeight+scrTop){

		       //finally show the menu
		$("html").on("click", function(){

We are also detecting the window width and height in order to make the menu div adjusts its position automatically near the right and bottom edges. You can add some values near mheight or mwidth variables to adjust menu div’s position on edges as per your comfort.

I have used html element for .on(“contextmenu”) and .on(“click”) functions as I want my custom right click context menu to be appeared on everywhere of my web page. But some websites need it on sidebar or some part of the page only. In that case, you can select the parent div instead.

Try this code and give your feedback. I’ll post another tutorial to show how you can add action buttons such as cut, copy, paste etc. to the custom context menu.

Anand Roshan

Author: Anand Roshan

An entrepreneur, programmer and a passionate artist who loves to work independently. Get social: Twitter | Google + | Artist Page

2 comments on “Create custom Right Click Context Menu Using jQuery”

Leave a Reply

Your email address will not be published. Required fields are marked *