HTML | DOM MenuItem Object

The DOM MenuItem Object is used to represent an HTML <menuitem> element. This tag defines the content and action for each menu item in the context menu. This can also be configured for certain types of input like checkboxes and radio buttons.

Syntax:

  • Accessing Menu Object
  • var item = document.getElementById("menuItem");
  • Creating Menu Object
  • var item = document.createElement("MENUITEM");

Properties:



  • icon: This property sets or returns an image that can be used to represent the menu item.
  • label: This property sets or returns the value of the label of the menu item. The label is the text that is shown to the user.
  • type: This property sets or returns the value of the type of the menu item. This allows the menuitem to be changed to a checkbox or radio button.
  • checked: This property sets or returns if the menu item should be checked by default.
  • command: This property sets or returns the value of the command attribute of the menu item.
  • disabled: This property sets or returns is the menu item should be disabled by default, making it unclickable.
  • radiogroup: This property sets or returns the value of the radiogroup of the menu item. This is used to distinguish between groups of radio buttons.
  • default: This property sets or returns is the menu item should be the default command. This can be used in submitting forms.

Example-1: Accessing MenuItem Object.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
  
<head>
    <title>
      DOM menuItem Object
  </title>
    <style>
        .output {
            border: 1px solid;
            background-color: lightgreen;
        }
    </style>
</head>
  
<body>
    <h1 style="color: green">
      GeeksForGeeks
  </h1>
    <b>DOM menuItem Object</b>
    <div class="output" 
         contextmenu="menu1">
        <p>Right-click inside this box to
          see the context menu. This only 
          works in Firefox!
      </p>
        <menu type="context" 
              id="menu1">
            <menuitem id="menuitem-1" 
                      label="Refresh"
                      onclick=
                "window.location.reload();">
            </menuitem>
            
            <menuitem id="menuitem-2" 
                      label="Option 1" 
                      type="checkbox" >
            </menuitem>
            
            <menuitem id="menuitem-3 " 
                      label="Option 2 " 
                      type="checkbox">
            </menuitem>
            
        </menu>
    </div>
    <button onclick="getMenuItem()">
      Get menuItem
  </button>
    <script>
        function getMenuItem() {
            var item = 
                document.getElementById('menuitem-1');
            console.log(item);
        }
    </script>
</body>
  
</html>

chevron_right


Output:
Before clicking the button:
access-before

After clicking the button:
access-after

Example-2: Creating MenuItem Object.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
  
<head>
    <title>
      DOM menuItem Object
  </title>
    <style>
        .output {
            border: 1px solid;
            background-color: 
              lightgreen;
        }
    </style>
</head>
  
<body>
    <h1 style="color: green">
      GeeksForGeeks
  </h1>
    <b>DOM menuItem Object</b>
    <div class="output" 
         contextmenu="menu1">
        
        <p>
          Right-click inside this
          box to see the context menu.
          This only works in Firefox!
      </p>
        <menu type="context" 
              id="menu1">
            <menuitem id="menuitem-1"
                      label="Refresh" 
                      onclick=
                 "window.location.reload();">
            </menuitem>
            
            <menuitem id="menuitem-2"
                      label="Option 1" 
                      type="checkbox">
          </menuitem>
            <menuitem id="menuitem-3" 
                      label="Option 2" 
                      type="checkbox">
          </menuitem>
        </menu>
    </div>
    <button onclick="createMenuItem()">
      Create menuItem
  </button>
    <script>
        function createMenuItem() {
            var item = 
                document.createElement(
                  "MENUITEM");
            
            item.label = "New Option";
            document.querySelector(
              '#menu1').appendChild(item);
        }
    </script>
</body>
  
</html>

chevron_right


Output:
Before clicking the button:
create-before

After clicking the button:
create-after

Supported Browsers:

  • Mozilla Firefox


My Personal Notes arrow_drop_up

Technical Writer Lets have an update

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.




Article Tags :
Practice Tags :


Be the First to upvote.


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.