{{HTMLSidebar("Global_attributes")}}
The contextmenu
global attribute is the id of a {{HTMLElement("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="window.open('https://twitter.com/intent/tweet?text=Hurray! I am learning ContextMenu from MDN via Mozilla');"></menuitem> <menuitem label="Facebook" onclick="window.open('https://facebook.com/sharer/sharer.php?u=https://https://developer.mozilla.org/en/HTML/Element/Using_HTML_context_menus');"></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><pre 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</pre></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.</li><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> </ol> </body>
JavaScript
function incFont(){ document.getElementById("fontSizing").style.fontSize="larger"; } function decFont(){ document.getElementById("fontSizing").style.fontSize="smaller"; } function changeImage(){ var j = Math.ceil(Math.random() * 39 + 1); document.images[0].src = "https://developer.mozilla.org/media/img/promote/promobutton_mdn" + j + ".png"; }
Result
{{EmbedLiveSample("Example", 550, 200)}}
Specifications
Specification | Status | Comment |
---|---|---|
{{SpecName('HTML WHATWG', "forms.html#attr-contextmenu", "contextmenu")}} | {{Spec2('HTML WHATWG')}} | No change from latest snapshot, {{SpecName('HTML5.1')}} |
{{SpecName('HTML5.1', "interactive-elements.html#context-menus", "contextmenu")}} | {{Spec2('HTML5.1')}} | Snapshot of {{SpecName('HTML WHATWG')}}, initial definition. |
Browser compatibility
{{CompatibilityTable}}
Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|
Basic support | {{CompatNo}}[1] | {{CompatGeckoDesktop(9)}} | {{CompatNo}} | {{CompatNo}}[1] | {{CompatNo}} |
Feature | Android | Chrome for Android | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|---|
Basic support | {{CompatNo}} | {{CompatNo}} | {{CompatGeckoDesktop(20)}} | {{CompatNo}} | {{CompatNo}} | {{CompatUnknown}} |
[1] An experimental implementation is 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. Support for this feature is requested in {{ChromeBug(87553)}}.
See also
- All global attributes
- {{domxref("HTMLElement.contextMenu")}}