Add Contextual Menu on Your Website With HTML5

By . in Web Design. Updated on .

The contextual menu is the menu listed when you right-click on your computer screen. The menu usually comprises 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, the contextual menu has resided in native applications. Nowadays, the contextual menu brings tons of benefits to web apps, for example in cPanel’s File Manager and Gmail. These menus are built using extensive JavaScript.

In the future, we may be able to build contextual menus for our websites using HTML5. Come check it out with me.

Recommended Reading: Create Customize Shortcut In Mac’s Right Click Menu [Guide]

Building a Contextual Menu

HTML5 has introduced two new elements, menu and menuitem, for you to build a contextual menu. For the browser to treat the menu element as a contextual menu, set the menu type to context and give it a unique ID.

Below is an example where we create a contextual menu with two items.

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

It’s also possible to add a sub-menu by nesting the menu element:

<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>

For the contextual menu to appear on screen when right-clicking, use the new HTML attribute contextmenu. This attribute selects the menu with the specified ID. In our example, target the menu with contextmenu="context-menu-id".

Assign the attribute to the <body> tag to use the contextual menu on the entire page. Alternatively, add it to a specific HTML element to use the menu exclusively within that element.

The new contextual menu appears within the operating system menu, as shown below.

HTML5 Contextual Menu Example

Adding an Icon

Many of you have likely seen contextual menus with icons beside them. In some cases, an icon can be a great visual aid, helping users quickly understand the menu’s purpose. Additionally, it gives users a clue about which application is associated with the new menus.

Dropbox Contextual Menu Icon

Add an icon to the HTML5 contextual menu using the icon attribute:

<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’s what it looks like in the browser.

Contextual Menu with Icon

Make the menu functioning

At this point, the contextual menu doesn’t do anything when clicked. However, making it functional with basic JavaScript is straightforward. In our example, the “Email Selection” menu will **let users send highlighted text via their email application**.

To implement this, let’s add a 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, create another function, like `sendEmail()`, that opens the email application. The email subject will be pre-populated with the document title, and the email content with the user’s selected text.

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

Finally, add the `onclick` attribute to the menu item to trigger this function on click.

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

Previously, we covered HTML5 EditableContent, which allows editing web content directly from the front end. We can utilize this function by adding it to our “Edit Content” menu item.

Sidenote

I’m excited about this new feature. I see many possibilities for what we can build with the HTML5 Contextual Menu. Unfortunately, at the time of writing, only Firefox implemented this feature. Hopefully, other browsers will catch up soon.

See the demo below (Only works in Firefox).

View Demo Download Source
WebsiteFacebookTwitterInstagramPinterestLinkedInGoogle+YoutubeRedditDribbbleBehanceGithubCodePenWhatsappEmail