HTML <menuitem> Tag

The <menuitem> tag in HTML defines a command that a user can invoke from a menu. It's used within a <menu> element, creating interactive options that a user can select, similar to a context menu or toolbar item. The tag is crucial for building custom context menus and toolbars.

Syntax

<menuitem 
    type="checkbox|command|radio" 
    label="text" 
    icon="url"
    disabled="disabled"
    checked="checked"
    radiogroup="name"
    default="default"
    command="id"
    >
</menuitem>

Attributes

Example

<menu type="context" id="mymenu">
  <menuitem label="Refresh" onclick="location.reload()"></menuitem>
  <menuitem type="checkbox" label="Enable Notifications"></menuitem>
  <menuitem type="radio" label="Option 1" radiogroup="myradio"></menuitem>
  <menuitem type="radio" label="Option 2" radiogroup="myradio"></menuitem>
</menu>

<div oncontextmenu="document.getElementById('mymenu').popup(event, 'left', 'top'); return false;">
  Right-click here to see the menu.
</div>

More Examples

Basic Command Item

A menu item of command type executes a script or action.

<menu type="context" id="myContext">
  <menuitem label="Alert" onclick="alert('Clicked!')"></menuitem>
</menu>
<div oncontextmenu="document.getElementById('myContext').popup(event); return false;">
  Right-click to see the alert menu.
</div>

Checkbox Menu Item

A checkbox menu item toggles a setting, showing whether it is selected or not.

<menu type="context" id="checkMenu">
  <menuitem type="checkbox" label="Show Grid" onclick="toggleGrid()"></menuitem>
</menu>
<div id="gridArea" style="width:200px;height:200px;border:1px solid black;">
  Right-click here for grid options
</div>

<script>
  function toggleGrid() {
    var gridArea = document.getElementById('gridArea');
    var menuItem = event.target;

     if (menuItem.checked) {
         gridArea.style.backgroundImage = "linear-gradient(to right, grey 1px, transparent 1px),linear-gradient(to bottom, grey 1px, transparent 1px)";
         gridArea.style.backgroundSize = "20px 20px";
        } else {
         gridArea.style.backgroundImage = "none";
        }
  }
</script>
<div oncontextmenu="document.getElementById('checkMenu').popup(event); return false;">
  Right-click to toggle grid.
</div>

Radio Menu Item

Radio buttons allow a user to select one option from a group.

<menu type="context" id="radioMenu">
    <menuitem type="radio" label="Small" radiogroup="sizeGroup" onclick="changeSize('small')"></menuitem>
    <menuitem type="radio" label="Medium" radiogroup="sizeGroup" onclick="changeSize('medium')"></menuitem>
    <menuitem type="radio" label="Large" radiogroup="sizeGroup" onclick="changeSize('large')"></menuitem>
</menu>
<p id="textToChange">This is sample text.</p>

<script>
    function changeSize(size){
      var textElement = document.getElementById('textToChange');
      if(size == 'small'){
        textElement.style.fontSize = "12px"
      } else if (size == 'medium'){
        textElement.style.fontSize = "16px";
      } else if (size == 'large'){
        textElement.style.fontSize = "20px";
      }
    }
</script>
<div oncontextmenu="document.getElementById('radioMenu').popup(event); return false;">
    Right-click to change size.
</div>

Menu Item with Icon

Adding icons enhances user experience by visualizing the actions.

<menu type="context" id="iconMenu">
  <menuitem label="Save" icon="save.png" onclick="alert('Saving...')"></menuitem>
  <menuitem label="Print" icon="print.png" onclick="alert('Printing...')"></menuitem>
</menu>
<div oncontextmenu="document.getElementById('iconMenu').popup(event); return false;">
  Right-click to see icons.
</div>

Browser Support

The <menuitem> tag is not widely supported across all browsers. It has limited support.

• Chrome: Supported
• Edge: Supported
• Firefox: Not Supported
• Safari: Not Supported
• Opera: Supported
• It is advised to check specific browser compatibility before using it in production. For Firefox and Safari, alternative implementations may be required.

Notes and Tips

• The <menuitem> tag is designed to be used within a <menu> element, typically of type context, for context menus, or toolbar for toolbars.
• For accessibility, provide labels for your menu items that clearly describe their function.
• JavaScript is typically used to handle the onclick events of <menuitem> elements.
• While <menuitem> has limited browser support, it is still the correct way to specify a command inside a <menu> and it might get standardized in the future. For wider compatibility, use alternative solutions like list of <a> or <button> or other suitable element.
• Make sure your icon images are accessible and use appropriate formats to ensure they display correctly across different browsers.
• Use radiogroup attribute to create group of radio options.
• When designing context menus, consider the context of where and when it will be displayed so it serves the user appropriately.
• Keep your menu items focused and avoid over populating with too many options.