HTML <menuitem> Tag

<script type="text/javascript">
function changeColor (thisColor) {
 document.getElementById('myMsg').style.borderColor = thisColor;
}
</script>
<div id="myMsg" contextmenu="myMenu" style="width:50%;padding:0.5em;border:10px solid black;">
<p>Right click on the me to invoke the context menu (look for <samp>Change Border Color...</samp>).</p> 
<p><strong>Note</strong>: Only supported in Firefox at time of writing.</p>
</div>
<menu type="context" id="myMenu">
 <menu type="popup" label="Change Border Color...">
  <menuitem label="Black (default)" onclick="changeColor('black');"></menuitem>
  <menuitem label="Orange" onclick="changeColor('orange');"></menuitem>
  <menuitem label="Red" onclick="changeColor('red');"></menuitem>
  <menuitem label="Green" onclick="changeColor('green');"></menuitem>
  <menuitem label="Blue" onclick="changeColor('blue');"></menuitem>
 </menu>
</menu>

Right click on the me to invoke the context menu (look for Change Border Color...).

Note: Only supported in Firefox at time of writing.

The above example demonstrates usage of the <menuitem> element.

The <menuitem> element represents a command that the user can invoke from a popup menu. It is used as a child of a <menu> element whose type="popup".

You can use one or more of the type, label, icon, disabled, checked, and radiogroup attributes to set a new command.

Otherwise you can use the command attribute to reference another command. This allows you to define a command once, and set its state (e.g. whether it is active or disabled) in one place, and have all references to that command in the user interface change at the same time.