{{HTMLSidebar("Global_attributes")}}
The contextmenu global attribute is the id of an {{HTMLElement("menu")}} to us 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
The following 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>
...used with this 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"; }
...will result in:
{{EmbedLiveSample("ContextMenu_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 | {{ CompatVersionUnknown() }} | {{ CompatGeckoDesktop(9) }} | {{ CompatVersionUnknown() }} | {{ CompatVersionUnknown() }} | {{ CompatVersionUnknown() }} |
Feature | Android | Chrome for Android | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|---|
Basic support | {{ CompatVersionUnknown() }} | {{ CompatGeckoMobile(9) }} | {{ CompatVersionUnknown() }} | {{ CompatVersionUnknown() }} | {{ CompatVersionUnknown() }} | {{ CompatVersionUnknown() }} |
See also
- All global attributes.