Context menu Attribute in HTML5
In this article I am going to describe about the implementation and use of contextmenu attribute in HTML5
Contextmenu Attribute
Basically, it allows you to add different options to a browsers 'right-click menu' with just a few lines of HTML and will even work with Javascript disabled. Although, and very sadly, it currently doesnot support any of the major browsers.
The contextmenu attribute specifies a context menu for an element. The context menu appears when a user right-clicks on the element. Contentmenu Attribute is new in HTML5.
The value of the contextmenu attribute is the id of the <menu> element to open.
Menu items may have label, icon, and onclick attributes to represent design and actions.
Using contextmenu is a lot simpler than you may think. All you need is to add the contextmenu attribute like so:
<section contextmenu="my-right-click-menu">
<!--
Add anything you want here
-->
</section>
As you can see you can add it just like you would add any id or class.
Next we create the menu:
<menu type="context" id="my-right-click-menu">
<!--
Here we will add the new 'right-click' menu items
-->
</menu>
Browser Support
Currently it is Not supported by any of the major browsers.
Syntax
<element contentmenu="menu-id">
Attribute Value
| Value |
Description |
| menu_id |
The id of the <menu> element to be open |
Example of Context menu attribute in HTML5
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>Context menu Attribute in HTML5</title>
</head>
<body>
<p contextmenu="menu">This paragraph has a context menu called "menu". The context menu should appear when a user right-clicks on this paragraph.</p>
<menu id="menu">
<command label="New">
<command label="Open">
<command label="Save">
<command label="Copy">
<command label="Paste">
<command label="Write Tutorial" onclick="doSomething()">
<command label="Edit Tutorial" onclick="doSomethingElse()">
</menu>
</menu>
<p>Contextmenu is not currentlly supported in any browser</p>
</body>
</html>
Output
