HTML contextmenu Attribute

Last Updated : 08 Mar, 2024

HTML contextmenu attribute is a global attribute that will be used to define a context-menu bar for an element. The value of the contextmenu attribute must be the same as the id of the <menu> element.

So basically, A context menu seems upon user relations, such as when a user right-clicks on the element. As know HTML5 allows us to customize this menu. Here are some implementation examples, including nested menus.

Note: HTML contextmenu Attribute is not supported in HTML5.

Syntax:

<element contextmenu="menu_id">

Attribute Values: It contains the value menu_id which represents the id of the <menu> element to be opened.

Examples of HTML contextmenu Attribute

Example: HTML code below illustrates the use of contextmenu attribute.

HTML

<!DOCTYPE html>
<html>
 
<head>
    <title>HTML contextmenu attribute </title>
    <style>
        h1 {
            color: green;
        }
    </style>
</head>
 
<body>
    <center>
        <h1>GeeksforGeeks</h1>
        <h2>HTML contextmenu attribute</h2>
        <div style="background:green;border:2px solid
                    #black;padding: 10px;" 
             contextmenu="geeks">
 
            <p>A Computer Science Portal for Geeks</p>
 
 
            <menu type="context" id="geeks">
                <menu label="Share on...">
                    <menuitem label="Twitter"
                              onclick=
"window.open('//twitter.com/intent/tweet?text=' + window.location.href);">
                    </menuitem>
                    <menuitem label="Pinterest"
                              onclick=
"window.open('http://pinterest.com/pin/create/button/?url=' + window.location.href);">
                    </menuitem>
                </menu>
                <menuitem label="Email This Page"
                          onclick=
"window.location='mailto:?body='+window.location.href;">
                </menuitem>
            </menu>
        </div>
 
        <p>A Computer Science Portal for Geeks</p>
        <hr>
        <p>Right click on green div and see the menuitem
    </center>
</body>
 
</html>