Add Contextual Menu on Your Website With HTML5

By Thoriq Firdaus. in Web Design. Updated on July 22, 2022.

The contextual menu is the menu that is listed when you right-click on your computer screen. The menu usually comprises of shortcuts for some of our favorite repeated actions like creating or sorting folders/files, opening a new application window, or accessing System Preferences to change an option.

For years “contextual menu” resides in native applications. Nowadays, contextual menu brings tons of benefits for web apps, for example in cPanel’s File Manager and Gmail. These menus are built with a heavy JavaScript scripting.

In the future, we may be able to build contextual menus for use in our website via HTML5. Come check it out with me.

Building a Contextual Menu

HTML5 has introduced two new elements, menu and menuitem, for you to build a contextual menu. In order for the browser to treat the menu element as “contextual menu”, we have to set the menu type as context and also give it a unique ID.

Below is an example where we’ve created a contextual menu with two items.

<menu type="context" id="context-menu-id">
	<menuitem>Edit Content</menuitem>
	<menuitem>Email Selection</menuitem>
</menu>

It is also possible to add a sub-menu by nesting the menu element this way:

<menu type="context" id="context-menu-id">
	<menuitem>Edit Content</menuitem>
	<menuitem>Email Selection</menuitem>
	<menu label="Share...">
		<menuitem>Facebook</menuitem>
		<menuitem>Twitter</menuitem>
	</menu>
</menu>

Now, for the contextual menu to appear on the screen when we perform a right-click, we use a new HTML attribute named contextmenu. This attribute is used to pick up the menu with the ID specified; given our example above we can target our contextual menu with contextmenu=context-menu-id.

We can assign the attribute in a body tag if we want to use the contextual menu on the whole page. We can also add it in an HTML element to use the menu exclusively within that element.

The new contextual menu will appear within the Operating System menu as seen below.

Adding an Icon

I’m sure that many of you have seen some contextual menu appear with an icon beside it. In some cases, an icon could be a great visual aid that could help users to relate to and understand the menu purpose quickly. Additionally it also give users a clue of which application is associated with the new menus.

We can also add an icon to our HTML5-based contextual menu easily using the icon attribute, for example:

<menu type="context" id="context-menu-id">
	<menuitem icon="img/edit.png">Edit Content</menuitem>
	<menuitem icon="img/mail.png">Email Selection</menuitem>
	<menu label="Share...">
		<menuitem>Facebook</menuitem>
		<menuitem>Twitter</menuitem>
	</menu>
</menu>

Here is what we see in the browser.

Make the menu functioning

At this point, our new contextual menu does not do anything yet when we click on it. But it is very easy to make it function with bare JavaScript. In our example, we have a menu named “Email Selection”. This menu will let users send highlighted text with their email application.

To make this idea happen, let’s add the function to grab the user’s highlighted text.

function getSelectedText() {
	var text = "";
	if(window.getSelection) {
		text = window.getSelection().toString();
	} else if (document.selection && document.selection.type != 'Control') {
		text = document.selection.createRange().text;
	}
	return text;
};

Then we create one more function, say sendEmail(), that will open the email application. The subject of the email will be pre-populated with the document title, while email content will be populated with the user’s selected text.

function sendEmail() {
	var bodyText = getSelectedText();
    window.location.href = 'mailto:?subject='+ document.title +'&body='+ bodyText +'';
};

Lastly, we add it in our menu with onclick attribute to make it work upon clicking.

<menuitem icon="img/mail.png" onclick="sendEmail();">Email Selection</menuitem>

In the past, we have covered how to use HTML5 EditableContent, which allows us to edit web content directly from the front-end. We can utilize this function, adding it into our menu called “Edit Content”.

Sidenote

I’m very excited with this new feature. I can see many possibilities of things we can build with HTML5 Contextual Menu. Unfortunately, at the time of this writing, only Firefox has implemented this feature. I hope that the other browsers will catch up soon.

You can see the demo below (It only works on Firefox).