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

html

responsive-design

javascript

css-transitions

byNikita Barsukov·Feb 14, 2025

Capture the contextmenu event using JavaScript and disable the default menu by invoking event.preventDefault(). Next, concoct your own custom menu using dynamic HTML and CSS, aligning its position using the mouse coordinates event.pageX and event.pageY. Here's a quick flavor of the recipe you need:

document.addEventListener('contextmenu', e => {
  e.preventDefault();  // Bye default menu, you're under house arrest!
  const menu = document.getElementById('custom-menu').style;
  menu.display = 'block';  // Unleash the Kraken, er... I mean custom menu!
  menu.top = `${e.pageY}px`;
  menu.left = `${e.pageX}px`;
});

window.addEventListener('click', () => {
  document.getElementById('custom-menu').style.display = 'none'; // Back to the obscurity, menu. You're dismissed!
});

Don't forget to create an HTML element with the id="custom-menu" that will be stylized with CSS and initially hidden (display: none) until summoned.

To pull off a slick custom context menu, it's about more than slapping together some HTML, CSS and JavaScript. Think of it like creating a mouth-watering menu for your favorite restaurant. It should mix both style and substance - a dash of interaction design, a sprinkle of functionality, all seasoned to perfection with the finest user experience.

The design of your context menu should be in harmony with your website’s overall aesthetic. Tailor your layout with CSS flexbox or grid properties for the ultimate responsive design.

#custom-menu {
  display: none;
  position: absolute;
  z-index: 1000;
  /* Introduce more styling as per your taste */
}

And the pièce de résistance: powerful functionality. For added value to your users, make sure each menu item does what it says on the tin. Hook up suitable functions to the click events of your menu items.

Accessibility: Don’t forget the seasoning

Remember, good design is accessible design. Ensure your custom menu is both keyboard-friendly and screen reader friendly using aria attributes, because your website should be a universal restaurant that's open for everybody!

What if you want different menu options for different types of content? No problemo! You can tailor your context menu to context-specific needs. For instance, display image-specific options when the user right-clicks on an image. Here's a JavaScript example:

document.addEventListener('contextmenu', e => {
  // The usual right-click event handling code...
  const clickedElement = e.target;

  let menuContent = '';
  if(clickedElement.matches('img')) {
    menuContent += '<a href="#">Save Image</a>';  // More image-specific options, or add caviar for royalty.
  } else {
    menuContent += '<a href="#">Generic Option</a>';  // Add the side dishes for the main course.
  }
  document.getElementById('custom-menu').innerHTML = menuContent; // Assign the banquet for the day.
  // Don't forget to wire up the functionality for these menu options!
});

Adding that special touch

Sprinkle a little magic on your user experience with these extra additions:

Fade effects: Add CSS transitions for a smoother menu display.
Icons: Use Font Awesome icons next to the options for visual appeal.
Outside click detection: Close the menu when the user clicks outside.

window.addEventListener('click', () => {
  document.getElementById('custom-menu').style.display = 'none'; // The feast is over!
});

// Hide on Escape key
window.addEventListener('keydown', e => {
  if (e.key === 'Escape') {
    document.getElementById('custom-menu').style.display = 'none'; // Hide faster than a kid hides broccoli!
  }
});

Troubleshooting the recipes

Remember, over-customization is like adding too many spices – it ruins the taste! Make sure you don't frustrate your customers or users by stripping away useful features from the original browser menu. Always check for cross-browser compatibility and remember to have a backup plan for older browsers like attachEvent.

explain-codes / Html / How to add a custom right-click menu to a webpage?

Linked

How do I *really* justify a horizontal menu in HTML+CSS?



How can I capture the right-click event in JavaScript?



Twitter bootstrap dropdown goes outside the screen



Should I use ``s and ``s inside my ``s?



Bootstrap Dropdown with Hover

