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

Bugsnag monitors application stability, so you can make data-driven decisions on whether you should be building new features, or fixing bugs. Learn more.

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

Monitor application stability with Bugsnag to decide if your engineering team should be building new features on your roadmap or fixing bugs to stabilize your application.Try it free.


Opinions expressed by DZone contributors are their own.

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

{{ parent.tldr }}

{{ parent.urlSource.name }}