November 08, 2011

Usable Context Menus

Today, Mozilla released a version of Firefox that includes the ability for a website to add options to the context menu (bug 617528). It has awesome potential, however I had trouble getting it to do what I wanted.

I found a demo by Paul Rouget, however it assumes that there’s only one image on the page. The way context menu has been implemented means there’s no good way to figure out what element has been right clicked. The this binded to the callback is for the menuitem, not the element that was right clicked. This works fine if you don’t plan on making more than one element right-clickable. Imagine you have a list of, say, emails. You want the user to be able to right click and delete/archive/star each email separately. With the current implementation, each email would need it’s own <menu> — and that’s a lot of excess code.

So, I threw together a quick jQuery plugin prototype [demogithub]. It lets you add menu items using a familiar syntax, and most importantly binds the this in the callback to the element that was right clicked (as opposed to the menuitem that is selected).

It’s very buggy and missing important features (such as sub menus, separators, control over ordering and control over events and bubbling). Consider it version 0.1, if you will. However, it makes it very easy to add menu items.

One thing I didn’t want to do is make a polyfill. This will only work in Firefox 8. I didn’t want to override the menu bar in browsers that don’t support it. If you’re looking for that, a polyfill already exists.

Check it out »

About Gregory Koberger

I'm a freelance developer and designer, formerly of Mozilla. I talk a lot about web development, technology and user experience — sometimes on my blog but mostly on Twitter.

Keep Reading

Your Turn