<div class="context-wrapper">
  <p>Right-click anywhere in this gray area to see the custom menu.</p>
</div>

<div class="context-menu" id="contextMenu">
  <ul class="menu-options">
    <li class="menu-option">
      <span class="icon">&#128193;</span>
      <span>Open Folder</span>
    </li>
    <li class="menu-option">
      <span class="icon">&#9998;</span>
      <span>Edit File</span>
    </li>
    <li class="menu-option">
      <span class="icon">&#128465;</span>
      <span>Delete</span>
    </li>
    <hr>
    <li class="menu-option">
      <span class="icon">&#9881;</span>
      <span>Properties</span>
    </li>
  </ul>
</div>

.context-wrapper {
  font-family: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  width: 100%;
  height: 300px;
  background: #f3f4f6;
  border: 2px dashed #d1d5db;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #6b7280;
}
.context-menu {
  font-family: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  position: absolute;
  width: 200px;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 10px 25px rgba(0,0,0,0.1);
  transform: scale(0);
  transform-origin: top left;
  transition: transform 0.2s ease;
  overflow: hidden;
  z-index: 100;
  border: 1px solid #e5e7eb;
}
.context-menu.visible {
  transform: scale(1);
}
.menu-options {
  list-style: none;
  padding: 5px 0;
  margin: 0;
}
.menu-option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 15px;
  cursor: pointer;
  font-size: 0.95rem;
  color: #374151;
  transition: background 0.2s;
}
.menu-option:hover {
  background: #f9fafb;
  color: #2563eb;
}
.menu-option .icon {
  width: 20px;
}
hr {
  border: 0;
  height: 1px;
  background: #e5e7eb;
  margin: 5px 0;
}

const contextMenu = document.getElementById("contextMenu");
const wrapper = document.querySelector(".context-wrapper");

wrapper.addEventListener("contextmenu", (e) => {
  e.preventDefault();
  let x = e.offsetX;
  let y = e.offsetY;
  const menuWidth = 200;
  const containerWidth = wrapper.clientWidth;
  
  if(x + menuWidth > containerWidth) {
    x = containerWidth - menuWidth;
  }

  contextMenu.style.left = `${e.clientX}px`;
  contextMenu.style.top = `${e.clientY}px`;
  contextMenu.classList.add("visible");
});

document.addEventListener("click", (e) => {
  if (e.target.offsetParent !== contextMenu) {
    contextMenu.classList.remove("visible");
  }
});

Back to Snippets

Custom Right-Click Context Menu JS

Replace the default browser menu with a custom context menu. It appears exactly where you click and allows you to add your own actions like edit or delete, so your web app feels more like native software.

429

#javascript

#css

#context menu

#right click

#ui

#custom menu

#interface

/HTML *CSS ()JS Output Live Updates

.context-wrapper {
  font-family: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  width: 100%;
  height: 300px;
  background: #f3f4f6;
  border: 2px dashed #d1d5db;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #6b7280;
}
.context-menu {
  font-family: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  position: absolute;
  width: 200px;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 10px 25px rgba(0,0,0,0.1);
  transform: scale(0);
  transform-origin: top left;
  transition: transform 0.2s ease;
  overflow: hidden;
  z-index: 100;
  border: 1px solid #e5e7eb;
}
.context-menu.visible {
  transform: scale(1);
}
.menu-options {
  list-style: none;
  padding: 5px 0;
  margin: 0;
}
.menu-option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 15px;
  cursor: pointer;
  font-size: 0.95rem;
  color: #374151;
  transition: background 0.2s;
}
.menu-option:hover {
  background: #f9fafb;
  color: #2563eb;
}
.menu-option .icon {
  width: 20px;
}
hr {
  border: 0;
  height: 1px;
  background: #e5e7eb;
  margin: 5px 0;
}