Web/HTML/Global attributes/contextmenu

The contextmenu attribute is obsolete and will be removed from all browsers

The contextmenu global attribute is the id of a <menu> to use as the contextual menu for this element.

A context menu is a menu that appears upon user interaction, such as a right-click. HTML5 now allows us to customize this menu. Here are some implementation examples, including nested menus.

Example

HTML

<body contextmenu="share">
  <menu type="context" id="share">
    <menu label="share">
      <menuitem label="Twitter" onclick="shareViaTwitter()"></menuitem>
      <menuitem label="Facebook" onclick="shareViaFacebook()"></menuitem>
    </menu>
  </menu>
  <ol>
    <li>
      Anywhere in the example you can share the page on Twitter and
      Facebook using the Share menu from your context menu.
    </li>
    <li contextmenu="changeFont" id="fontSizing">
      On this specific list element, you can change the size of the text
      by using the "Increase/Decrease font" actions from your context menu
    </li>
    <menu type="context" id="changeFont">
      <menuitem label="Increase Font" onclick="incFont()"></menuitem>
      <menuitem label="Decrease Font" onclick="decFont()"></menuitem>
    </menu>
    <li contextmenu="ChangeImage" id="changeImage">
      On the image below, you can fire the "Change Image" action
      in your Context Menu.<br />
      <img src="https://developer.mozilla.org/media/img/promote/promobutton_mdn5.png"
          contextmenu="ChangeImage" id="promoButton" />
      <menu type="context" id="ChangeImage">
        <menuitem label="Change Image" onclick="changeImage()"></menuitem>
      </menu>
    </li>
  </ol>
</body>

JavaScript

function shareViaTwitter() {
  window.open("https://twitter.com/intent/tweet?text=" +
      "Hurray! I am learning ContextMenu from MDN via Mozilla");
}

function shareViaFacebook() {
  window.open("https://facebook.com/sharer/sharer.php?u=" +
      "https://developer.mozilla.org/en/HTML/Element/Using_HTML_context_menus");
}

function incFont() {
  document.getElementById("fontSizing").style.fontSize = "larger";
}

function decFont() {
  document.getElementById("fontSizing").style.fontSize = "smaller";
}

function changeImage() {
  var index = Math.ceil(Math.random() * 39 + 1);
  document.images[0].src =
      "https://developer.mozilla.org/media/img/promote/promobutton_mdn" +
      index + ".png";
}

Result

Specifications

Specification	Status	Comment
HTML 5.1The definition of 'contextmenu' in that specification.	Recommendation	Snapshot of HTML Living Standard, initial definition.

Browser compatibility

Update compatibility data on GitHub

	Desktop						Mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet
`contextmenu` Deprecated'	Chrome Full support 52 Notes' Disabled' Full support 52 Notes' Disabled' Notes' This was removed from the Enable Experimental Web Platform Features due to a Web compatibility issue. In June 2017, it was removed entirely from the browsers. This is documented in Chromium bug 87553. Disabled' From version 52: this feature is behind the `--enable-blink-features` runtime flag (needs to be set to `ContextMenu`). No support ? — 52 Disabled' Disabled' Until version 52 (exclusive): this feature is behind the `Enable experimental Web Platform features` preference. To change preferences in Chrome, visit chrome://flags.	Edge Full support 79 Disabled' Full support 79 Disabled' Disabled' From version 79: this feature is behind the `--enable-blink-features` runtime flag (needs to be set to `ContextMenu`).	Firefox Full support 9	IE No support No	Opera Full support 39 Notes' Disabled' Full support 39 Notes' Disabled' Notes' This was removed from the Enable Experimental Web Platform Features due to a Web compatibility issue. In June 2017, it was removed entirely from the browsers. This is documented in Chromium bug 87553. Disabled' From version 39: this feature is behind the `--enable-blink-features` runtime flag (needs to be set to `ContextMenu`). No support ? — 39 Disabled' Disabled' Until version 39 (exclusive): this feature is behind the `Enable experimental Web Platform features` preference.	Safari No support No	WebView Android No support No	Chrome Android No support ? — 52 Disabled' No support ? — 52 Disabled' Disabled' Until version 52 (exclusive): this feature is behind the `Enable experimental Web Platform features` preference. To change preferences in Chrome, visit chrome://flags.	Firefox Android No support 32 — 56 Notes' No support 32 — 56 Notes' Notes' Support for the `contextmenu` attribute has been removed from Firefox for Android (See bug 1424252).	Opera Android No support No	Safari iOS No support No	Samsung Internet Android No support ? — 6.0

Legend

Full support: Full support
No support: No support
Deprecated. Not for use in new websites.': Deprecated. Not for use in new websites.
See implementation notes.': See implementation notes.
User must explicitly enable this feature.': User must explicitly enable this feature.

[1] An experimental implementation was originally available via the command line option --enable-blink-features=ContextMenu. Until Chrome 52 and Opera 39 it was additionally available by enabling the Experimental Web Platform features option, but got removed from that due to a Web compatibility issue. In June 2017, it was removed entirely from the browsers. This is documented in Chrome bug 87553.

[2] Support for the contextmenu attribute has been removed from Firefox Mobile (bug 1424252).