How to Add a Custom Right-Click Menu to a Webpage?

Last Updated : 25 Jul, 2024

Adding a custom right-click menu to a webpage can enhance user interaction by providing tailored options that improve functionality and user experience. This technique involves overriding the default browser context menu with a custom-designed menu, which can be achieved using JavaScript and CSS. Implementing a custom right-click menu allows you to offer specific actions and features relevant to your website’s context, making it a powerful tool for creating more engaging and intuitive web applications.

Approach

Create the HTML structure: Define the custom context menu as a hidden <div> with a list of menu items.
Style the menu using CSS: Set the position, appearance, and hover effects for the context menu.
Handle right-click events with JavaScript:
- Override the default context menu with document.oncontextmenu.
- Display the custom menu at the cursor position.
- Hide the menu when clicking elsewhere using document.onclick.

Example: This example shows the implementation of the above-explained approach.

HTML

<!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 {                 let menu = document                     .getElementById("contextMenu")                  menu.style.display = 'block';                 menu.style.left = e.pageX + "px";                 menu.style.top = e.pageY + "px";             }         }     </script> </body>  </html>