html tutorial - Menu item tag in HTML - html5 - html code - html form



  • The <menuitem> tag specifies a command/menu item which the user can request from a popup menu.
  • The <menuitem> tag supports Global Attributes and Event Attributes.

Syntax for <menuitem> tag:

<menuitem label = “text”>content</menuitem>

Differences between HTML 4.01 and HTML5 for <menuitem> tag:

HTML 4.01

  • The <menuitem> tag is not supported.

HTML5

  • The <menuitem> tag is new in HTML5.

Sample Coding for <menuitem> tag:

Tryit<!DOCTYPE html>
<html >
    <head>
        <title>Wikitechy Menuitem Tag</title>
    </head>
    <body>
        <div style="background:cyan;padding:20px;" contextmenu="wikiContext">
            <p>Right click the box to View Wikitechy Context Menu</p>
            <menu type="context" id="wikiContext">
                <menuitem label="Wikitechy"                           
                          onclick="window.open('http://www.wikitechy.com');"                           
                          icon="icon.png">
                </menuitem>
                <menu label="Online">
                    <menu type="context" id="wikiContext">
                        <menuitem label="Tutorials" 
                                icon="icon.png" 
                                onclick="window.open('http://www.wikitechy.com/
                                        online-tutorials');">
                        </menuitem>
                    </menu>
                </menu>
            </menu>
        </div>
    </body>
</html>

Code Explanation for menuitem tag:

code explanation for menuitem tag

  1. <menuitem> tag used to define a menuitem in a <menu> element .
  2. label attribute used to define the name to be shown in the menuitem.
  3. onclick event opens a new window.
  4. icon attribute is used to set the icon for the menuitem.

Output of menuitem tag:

output for context menu menuitem tag

  1. When User right click over the box the context menu appears with the “wikitechy” menuitem.
  2. output for context menu sub menu menuitem tag

  3. The <menuitem> has its sub menu Online-> Tutorials.
  4. When User Click the Tutorials menuitem.
  5. output for navigation menuitem tag

  6. The online tutorials page of wikitechy will be appears.

Attributes List :

Attribute Value HTML4 HTML5 Description
label text No Yes Provides the name of the command/menu item, as displayed to the user.
type checkbox
command
radio
No Yes Describes that the type of command/menu item to show.
checked checked No Yes Defines if the command/menu item have been checked though the page loads.
icon URL No Yes Provides an image for the command/menu item.
radiogroup groupname No Yes Describes the name of the group of commands which will be switched though the command/menu item itself is switched.
default default No Yes Points the command/menu item as being a default command.
disabled disabled No Yes Defines if the command/menu item should not be displayed.

Browser Support for table tag:

Yes Yes Yes Yes Yes

Tips and Notes

  1. The <menuitem> tag is only supported in Firefox.
  2. The <menuitem> tag is only works for context menus.

Related Searches to Menu-item tag in html