HTML5 context menus in Firefox 8+

DZone 's Guide to

HTML5 context menus in Firefox 8+

· Web Dev Zone ·
Free Resource
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


Opinions expressed by DZone contributors are their own.

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

{{ parent.tldr }}

{{ parent.urlSource.name }}