Open In App

HTML contextmenu Attribute

Last Updated : 30 Aug, 2024
Comments
Improve
Suggest changes
Like Article
Like
Report

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>

Output: 

HTML contextmenu Attribute
HTML contextmenu Attribute

Supported Browsers: 

HTML contextmenu Attribute no longer supports any browsers.


Next Article
Article Tags :

Similar Reads