How to create a custom right click menu
Tags: html, css, javascript, beginners
Published: 2021-03-15 15:57:43

***Hello, guys in this article we will create an awesome custom right-click menu (<a href="https://en.wikipedia.org/wiki/Context_menu">Context Menu</a> ) using HTML CSS, and <a href="https://blog.stackfindover.com/what-is-javascript/">JavaScript</a>.***

###What is Context Menu?###
A context menu (**also known as a context menu, shortcut menu, or pop-up menu**) is a menu that **appears when you right-click**, and whatever is available for it, or available in its context Provides a set of options. The available options you clicked are usually actions related to the selected object.

Sometimes, we want the context menu to have more options or features, but **we cannot modify the default context menu**. Therefore, we have to create a custom menu. Adding a custom context menu to our website or webpage makes it look more customized and relevant to the context and gives you the freedom to add desired features to it.

###Common Query###
1. How to add a custom right-click menu on the website
2. How to use <a href="https://blog.stackfindover.com/disable-right-click-on-website-using-javascript/">Context Menu</a>
3. Custom right click menu <a href="https://blog.stackfindover.com/what-is-html/">HTML</a>

Hello, guys In this tutorial we will try to solve above mention query. and also we will learn how to create an awesome custom right-click menu (**Context Menu**) using HTML CSS and JavaScript.

First, we need to create three files **index.html** and **style.css** then we need to do code for it.

###Step:1###
**Add below code inside index.html**
```html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Custom Right Click Menu</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <link rel="stylesheet" href="style.css" />
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  </head>
  <body>  
    <div id="contextMenu" class="context-menu" style="display: none"> 
        <ul class="menu"> 
            <li class="share"><a href="#"><i class="fa fa-share" aria-hidden="true"></i> Share</a></li> 
            <li class="rename"><a href="#"><i class="fa fa-pencil" aria-hidden="true"></i> Rename</a></li> 
            <li class="link"><a href="#"><i class="fa fa-link" aria-hidden="true"></i> Copy Link Address</a></li> 
            <li class="copy"><a href="#"><i class="fa fa-copy" aria-hidden="true"></i> Copy to</a></li> 
            <li class="paste"><a href="#"><i class="fa fa-paste" aria-hidden="true"></i> Move to</a></li> 
            <li class="download"><a href="#"><i class="fa fa-download" aria-hidden="true"></i> Download</a></li> 
            <li class="trash"><a href="#"><i class="fa fa-trash" aria-hidden="true"></i> Delete</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>
```
###Step:2###
Then we need to add code for **style.css** which code I provide in the below screen.

```css
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  font-family: 'Montserrat', sans-serif;
}
body {
  width: 100vw;
  height: 100vh;
  background: #f2f4f6;
  overflow: hidden;
}
ul {
  list-style: none;
}
.context-menu { 
  position: absolute; 
} 
.menu {
  display: flex;
  flex-direction: column;
  background-color: #fff;
  border-radius: 10px;
  box-shadow: 0 10px 20px rgb(64 64 64 / 5%);
  padding: 10px 0;
}
.menu > li > a {
  font: inherit;
  border: 0;
  padding: 10px 30px 10px 15px;
  width: 100%;
  display: flex;
  align-items: center;
  position: relative;
  text-decoration: unset;
  color: #000;
  font-weight: 500;
  transition: 0.5s linear;
  -webkit-transition: 0.5s linear;
  -moz-transition: 0.5s linear;
  -ms-transition: 0.5s linear;
  -o-transition: 0.5s linear;
}
.menu > li > a:hover {
  background:#f1f3f7;
  color: #4b00ff;
}
.menu > li > a > i {
  padding-right: 10px;
}
.menu > li.trash > a:hover {
  color: red;
}
```
***If we right-click on this page, the custom menu will pop up.***

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xfsfn8p9cot8k3x13oxg.png)

###Custom Right Click Menu Video Output:###
{% youtube Wg69GjJ0XfA %}

###Custom Right Click Menu Codepen Output:####
{% codepen https://codepen.io/stack-findover/pen/yLgwbrL %}