HTML5 Context Menus

Written by David Walsh on February 23, 2012 · 28 Comments

Update: These context menus display even when JavaScript is disabled; so best practice will be to create these menu structures via JavaScript. Mass innerHTML injection can be used or basic DOM node injection.

Firefox Context Menu

One of the hidden gems within the HTML5 spec is context menus. The HTML5 context menu spec allows developers to create custom context menus for given blocks within simple menu and menuitem elements. The menu information lives right within the page so there's no need to create a custom plugin. Let me show you how you can create your own custom context menus from basic HTML!


Let's first start by defining a block of HTML and assigning the ID of the menu nodes to be used:

<section contextmenu="mymenu">
		For the purpose of cleanliness, 
		I'll put my menu inside the element that will use it 

With the block defined, now it's time to create the additional context menu items for the given block:

<menu type="context" id="mymenu">
	<menuitem label="Refresh Post" onclick="window.location.reload();" icon="/images/refresh-icon.png"></menuitem>
	<menuitem label="Skip to Comments" onclick="window.location='#comments';" icon="/images/comment_icon.gif"></menuitem>
	<menu label="Share on..." icon="/images/share_icon.gif">
		<menuitem label="Twitter" icon="/images/twitter_icon.gif" onclick="goTo('//' + document.title + ':  ' + window.location.href);"></menuitem>
		<menuitem label="Facebook" icon="/images/facebook_icon16x16.gif" onclick="goTo('//' + window.location.href);"></menuitem>

With a base menu tag with the type of context and id to match the context attribute for the blog it's to be used for, menu items or submenus may be created. Menu items may have label, icon, and onclick attributes to represent design and actions. Actions can have predefined functions or inline javascript code, just as any element can. Multiple parents can use the same menu, so no need to repeat the same menus.

This is where I'd insert more detail, but this is so damn easy that there's no point in boring you...

Mozilla Firefox is currently the only browser to support this API. I wouldn't consider adding context menus a critical necessity but the ability to do so is quite nice, and I plan to add them to my blog soon. This API is the epitome of "used for enhancement and wont harm". My "share" example is fairly basic and supplemental; have an scenario which the contextmenu API may be more useful? Share!


  1. Great! context menus.

    But only FF :(

  2. At this point, yes, but I anticipate other browser vendors implementing context menus.

  3. Hi,

    I´m trying to use a context menu on my application, but I can´t figure out how to get the id of the element where the user right-clicked (the li elements in this example)

    Example code:

    element 1
    element 2
    element 3

    Can you help me?

  4. Hi David,

    This is a very interesting feature, I was just wondering if you could remove or hide any of the system context menu items? otherwise I think that the use of these context menu could be limited for application use.


    • Good question. Couldn’t find anything in the way of more documentation, but I’m assuming you could display:none; an element to hide it.

  5. My initial idea is audio / video controls for players… Play, pause, stop, rewind, fast-forward, etc…

  6. Why isn’t there the icon ( /images/share_icon.gif ) in the screenshot?

  7. Hola David, te sigo hace bastante y me gustaría que hagas screencast que son muy útiles para aprender. Saludos desde Argentina. Martin.

  8. I’m wondering if that is really a good idea.

    I can already see a bunch of websites polluting our context menu…

    • totaly agree.
      It should be clear what part is influenced by the site itself

  9. Interesting that even with disabling JavaScript in the browser the items still appear in the context menu, but selecting them does nothing. I know this was just a demo, but it seems like maybe if browsers are going to implement context menu items in this manner, we should take a more progressively enhanced approach and only apply these menu elements to the page using JavaScript. That way, if JS is unavailable these items don’t appear in the menu and therefore won’t cause confusion for the user when they don’t work as expected.

  10. Great stuff even if only in firefox supported!

  11. Awesome! I really like HTML5, and I’m sad that it’s still not widely supported. I’d love to see Chrome support for this feature, too.

  12. Great stuff David!
    I just hope that site creators do not begin to fill the context menu with unnecessary things and, of course, all browsers support this feature (Internet Explorer is not a valid browser, in my opinion :P )

  13. This is a hidden gem.

    As you mention, full browser support is required for this to be a viable option for clients sites, but getting ahead of the game and understanding the principles always help (none of this is rocket science).

  14. alfian July 4, 2012

    wow, great tutz david. Very good idea, i`m using javascript before and now i can use this for FF users.

    i hope other vendors have this too.

    thank you very much.

  15. hey David,
    Its an amazing example for a beginners like me.. Really appreciate your work. I was just trying what our friend Motti was discussing with you, removing the system context menu items. Can you help me out? Which element should I display as none?

  16. Any way to hide the default context menu items? So you don’t have double “Play” menu items for player controls and such.

  17. Hey David,
    Is there any other way to contact you for technical assistance other than posting on your blog?

  18. Hello,
    Sorry for my bad english.
    If I have more than an element which uses the same contextmenü, how am I able to know, which contextmenu was clicked?


  19. Are there an easy way to use jQuery when adding such menu?

Be Heard

Tip: Wrap your code in <pre> tags or link to a GitHub Gist!

Use Code Editor
Use Elements as Background Images with -moz-element
HTML5 Element Printing in Internet Explorer