Over a million developers have joined DZone.

HTML5 context menus in Firefox 8+

DZone's Guide to

HTML5 context menus in Firefox 8+

· Web Dev Zone
Free Resource

Learn how to build modern digital experience apps with Crafter CMS. Download this eBook now. Brought to you in partnership with Crafter Software

Starting with version 8, Firefox supports HTML5 context menus. This post is a summary of “ HTML5 context menus in Firefox (Screencast and Code)” by Chris Heilmann for Mozilla Hacks.

Example: The following HTML source code defines a section with a context menu. The menu has one item and a sub-menu with two items.

    <section id="noninteractive" contextmenu="imagemenu">
      <img src="html5.png" alt="HTML5" id="menudemo">
        <menu type="context" id="imagemenu">
          <menuitem label="rotate" onclick="rotate()"
          <menu label="share">
            <menuitem label="twitter" onclick="alert('not yet')">
            <menuitem label="facebook" onclick="alert('not yet')">


Naturally, you don’t need to rely on inline event handlers, all usual registration methods are available. When the context menu is activated, it looks like this:


The article also covers:

  • How to check whether a browser supports context menus.
  • How to dynamically enable/disable menu items depending on what state and app is currently in (active selection etc.): A menu fires a contextmenu event every time it opens.
  • A CSS cursor called context-menu is available to give a visual clue as to where context menus are available.

You can try out context menus on a demo page.


Source: http://www.2ality.com/2011/11/ff8-html5-context-menus.html

Crafter is a modern CMS platform for building modern websites and content-rich digital experiences. Download this eBook now. Brought to you in partnership with Crafter Software.


Opinions expressed by DZone contributors are their own.


Dev Resources & Solutions Straight to Your Inbox

Thanks for subscribing!

Awesome! Check your inbox to verify your email so you can start receiving the latest in tech news and resources.


{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}