HTML | DOM MenuItem Object

Last Updated : 31 Aug, 2022

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 MenuItem Object
Creating MenuItem Object

Note: The menuitem object is depreciated from HTML 5.

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.

html

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

Output: Before clicking the button: access-before After clicking the button: access-after Example-2: Creating MenuItem Object.

html

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