How to add a custom right-click menu to a webpage ?

A right-click menu or context menu in a browser is a menu with multiple choices that appears on right-click mouse operation. It provides multiple functionalities relevant to that particular context. Sometimes, we want the context menu to have more options or features but we cannot modify the default context menu. So, we have to create a custom menu. Adding a custom context menu to your website or webpage makes it look more customized and relevant to the context and offers you the freedom to add desired features to it.

In this article, we will be creating a custom context menu for a webpage. It mainly involves two steps.

  • Preventing the default context menu from popping up when the right mouse button is clicked.
  • Creating our own custom context menu with HTML and CSS and displaying it on right-click.

Let us go through them in a step by step manner.

HTML code: The following HTML code snippet only shows the HTML page with the default menu which is displayed on right-click event.

HTML



filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
  
<body>
    <h1 style="text-align: center;">
        Welcome to GeeksforGeeks.
    </h1>
    <h1 style="text-align: center;">
        Hi, We are creating a 
        custom context menu here.
    </h1>
</body>
  
</html>

chevron_right


If we right-click on this page, the default menu will pop up.

JavaScript code is used to block this default menu and then we will create our custom context menu. To block the default menu, we will add an event handler for processing right-click events on the webpage. We will use the oncontextmenu property to listen to the right-click events.

We will create a rightClick() function. In this function, we will call the preventDefault() method of the mouse click event which will cancel the default behavior of the right-click event. We can also return “false” to cancel the event. Now, the default menu will not pop-up on right-click mouse button.

HTML code: The following HTML code demonstrates how to prevent the default right click event.

HTML

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
  
<body>
    <h1 style="text-align: center;">
        Welcome to GeeksforGeeks.
    </h1>
    <h1 style="text-align: center;">
        Hi, We are creating a 
        custom context menu here.
    </h1>
    <script type="text/javascript">
        document.oncontextmenu = rightClick;
  
        function rightClick(clickEvent) {
            clickEvent.preventDefault();
            // return false;
        }
    </script>
</body>
  
</html>

chevron_right


The default menu is blocked. Let us create our own custom context menu. The context menu we are going to create will be an HTML list. We will also add some CSS to make it look good.

We are creating an unordered list inside a “div” tag with id and class. Add some options to the list. We will keep it hidden by setting the value of “display” property to none.



HTML

filter_none

edit
close

play_arrow

link
brightness_4
code

<div id="contextMenu" class="context-menu" 
    style="display: none">
    <ul>
        <li><a href="#">Element-1</a></li>
        <li><a href="#">Element-2</a></li>
        <li><a href="#">Element-3</a></li>
        <li><a href="#">Element-4</a></li>
        <li><a href="#">Element-5</a></li>
        <li><a href="#">Element-6</a></li>
        <li><a href="#">Element-7</a></li>
    </ul>
</div>

chevron_right


We will add some JavaScript code to show up the context menu on right-click. We will also modify the rightClick() function to add the functionality of showing and hiding the menu on mouse-click events.

We will add an event handler for the click event and bind it with the hideMenu() function so that if the user clicks anywhere on the page and the context menu is already being displayed, it hides. Also, we have to place the menu where the right button is clicked. To do this, we will use two properties pageX and pageY of the mouse click event which will give us the coordinates where the right button was clicked. We will hide the context menu on the mouse button click if it is already being displayed.

JavaScript code:

HTML

filter_none

edit
close

play_arrow

link
brightness_4
code

<script>
    document.onclick = hideMenu;
    document.oncontextmenu = rightClick;
      
    function hideMenu() {
        document.getElementById("contextMenu")
                .style.display = "none"
    }
  
    function rightClick(e) {
        e.preventDefault();
  
        if (document.getElementById("contextMenu")
                .style.display == "block")
            hideMenu();
        else{
            var menu = document.getElementById("contextMenu")
  
            menu.style.display = 'block';
            menu.style.left = e.pageX + "px";
            menu.style.top = e.pageY + "px";
        }
    }
</script>

chevron_right


Output: The following output shows the custom context-menu appearing on the right-click.

On right-click, the menu appears but this is not what we want. We want it to appear where the button was clicked and it should actually look like a menu.

CSS code: We will add some CSS properties for the proper positioning and styling of the menu.

HTML

filter_none

edit
close

play_arrow

link
brightness_4
code

<style type="text/css">
    .context-menu {
        position: absolute;
        text-align: center;
        background: lightgray;
        border: 1px solid black;
    }
  
    .context-menu ul {
        padding: 0px;
        margin: 0px;
        min-width: 150px;
        list-style: none;
    }
  
    .context-menu ul li {
        padding-bottom: 7px;
        padding-top: 7px;
        border: 1px solid black;
    }
  
    .context-menu ul li a {
        text-decoration: none;
        color: black;
    }
  
    .context-menu ul li:hover {
        background: darkgray;
    }
</style>

chevron_right


Final code: The following is the combination of the above code snippets.

HTML

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
  
<head>
    <style type="text/css">
        .context-menu {
            position: absolute;
            text-align: center;
            background: lightgray;
            border: 1px solid black;
        }
  
        .context-menu ul {
            padding: 0px;
            margin: 0px;
            min-width: 150px;
            list-style: none;
        }
  
        .context-menu ul li {
            padding-bottom: 7px;
            padding-top: 7px;
            border: 1px solid black;
        }
  
        .context-menu ul li a {
            text-decoration: none;
            color: black;
        }
  
        .context-menu ul li:hover {
            background: darkgray;
        }
    </style>
  
</head>
  
<body>
    <h1 style="text-align: center;">
        Welcome to GeeksforGeeks.
    </h1>
    <h1 style="text-align: center;">
        Hi, We are creating a 
        custom context menu here.
    </h1>
  
    <div id="contextMenu" class="context-menu" 
        style="display:none">
        <ul>
            <li><a href="#">Element-1</a></li>
            <li><a href="#">Element-2</a></li>
            <li><a href="#">Element-3</a></li>
            <li><a href="#">Element-4</a></li>
            <li><a href="#">Element-5</a></li>
            <li><a href="#">Element-6</a></li>
            <li><a href="#">Element-7</a></li>
        </ul>
    </div>
  
    <script>
        document.onclick = hideMenu;
        document.oncontextmenu = rightClick;
  
        function hideMenu() {
            document.getElementById(
                "contextMenu").style.display = "none"
        }
  
        function rightClick(e) {
            e.preventDefault();
  
            if (document.getElementById(
                "contextMenu").style.display == "block")
                hideMenu();
            else {
                var menu = document
                    .getElementById("contextMenu")
                      
                menu.style.display = 'block';
                menu.style.left = e.pageX + "px";
                menu.style.top = e.pageY + "px";
            }
        }
    </script>
</body>
  
</html>

chevron_right



Output:

This was a basic context menu that we created. You can do much more by adding some cool hover effects, shadow effects, coloring, borders, etc.

full-stack-img




My Personal Notes arrow_drop_up

Wear your failure as a badge of honour

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.