HTML Guides for contextmenu

The type attribute on the <menu> element is obsolete and should be removed.

The <menu> element was originally designed to support different types of menus, including type="context" for context menus and type="toolbar" for toolbars. These features were never widely implemented by browsers and have been removed from the HTML specification.

In the current HTML living standard, the <menu> element is simply a semantic alternative to <ul> for representing a list of interactive items or commands, such as a toolbar of buttons. It no longer accepts a type attribute.

If you need a custom context menu (right-click menu), the recommended approach is to use JavaScript to listen for the contextmenu event and display your own custom menu using standard HTML and CSS.

Invalid Example

<menu type="context" id="my-menu">
  <menuitem label="Copy"></menuitem>
  <menuitem label="Paste"></menuitem>
</menu>

Valid Example

Using <menu> as a simple list of commands:

<menu>
  <li><button>Copy</button></li>
  <li><button>Paste</button></li>
</menu>

If you need a custom context menu, handle it with JavaScript:

<div id="target">Right-click here</div>
<menu id="context-menu" style="display: none; position: absolute;">
  <li><button>Copy</button></li>
  <li><button>Paste</button></li>
</menu>

<script>
  const target = document.getElementById("target");
  const menu = document.getElementById("context-menu");

  target.addEventListener("contextmenu", (e) => {
    e.preventDefault();
    menu.style.display = "block";
    menu.style.left = e.pageX + "px";
    menu.style.top = e.pageY + "px";
  });

  document.addEventListener("click", () => {
    menu.style.display = "none";
  });
</script>

Note that the <menuitem> element is also obsolete and no longer part of the HTML specification. Use standard elements like <button> or <a> inside <li> elements instead.