En varias ocasiones, las aplicaciones web han hecho uso de menús contextuales a través de plugins, con el objetivo de mejorar la experiencia de usuario y acercar la funcionalidad a los objetos con los que necesitamos interactuar.

HTML 5 Context Menu nos permite olvidarnos de estos plugins e integrar esta funcionalidad directamente en el menú contextual del navegador. Lamentablemente esta API sólo está implementada a día de hoy por Firefox, por lo que no puede ser una funcionalidad más que complementaria para aquellos usuarios que utilicen este navegador.

¿Cómo funciona?

Si hacemos clic con el botón derecho sobre el texto anterior (en Firefox) podremos ver que existen elementos adicionales a los ya ofrecidos por el navegador: Share on Twitter, Share on Facebook y un tercer elemento llamado Submenu.

Implementación

Para mostrar estas opciones, basta con incluir la siguiente estructura en nuestro código HTML:

    <section id="starWarsIntro" contextmenu="socialmenu">
        A long time ago, in a galaxy far, far away...
        It is a period of civil war. Rebel
        spaceships, striking from a hidden
        base, have won their first victory
        against the evil Galactic Empire.
    </section>
    <script>
        function navigateTo(url) {
            window.open(url);
        }
    </script>
    <menu type="context" id="socialmenu">
        <menuitem label="Share on Twitter" icon="/icons/twitter.png" onclick="navigateTo('//twitter.com/intent/tweet?text=' + window.starWarsIntro.innerHTML);"></menuitem>
        <menuitem label="Share on Facebook" icon="/icons/facebook.png" onclick="navigateTo('//facebook.com/sharer.php?u=//www.returngis.net');"></menuitem>
        <menu label="Submenu">
            <menuitem label="Share on Tumblr" icon="/icons/tumblr.png" onclick="navigateTo('//tumblr.com/share/quote?quote=' + window.starWarsIntro.innerHTML)"></menuitem>
        </menu>
    </menu>

En primer lugar, debemos indicar sobre qué bloque de HTML queremos que se muestren nuestras opciones. Para ello, asociamos a través del atributo contextmenu el ID del menú con el bloque. Acto seguido, se ha creado una función JavaScript que nos permitirá abrir una nueva ventana con la URL que le asignemos por parámetro.
Por último, creamos el elemento menu, el cual debe ser del tipo context y debe tener el mismo ID que asociamos al bloque anterior. Una vez definido el primer nivel, incluimos tantos menuitem como queramos mostrar al usuario. Cada uno de ellos tiene asociado el texto a mostrar (label), un icono (icon) y un evento onclick para poder interactuar con él.
También podemos crear submenús dentro del contextual, lo cual nos permite separar nuestras funcionalidades de otras que podamos llegar a tener.

Espero que haya sido de utilidad 😀

¡Saludos!