HTML menu - how to use <menu> tag

The HTML <menu> tag is used to define a list of commands which can be used as context menu.

The type attribute defines how the menu tag is rendered. When the type attribute is in list state, the tag is rendered as an unordered list of commands represented by li tags.

When the type attribute is in context menu state, the commands are displayed as context menu and is available to the user when the context menu is activated.

When the type attribute is in toolbar state, the commands are displayed as a list of active commands.

The menu tag is only supported in FireFox.

Attributes

The menu tag supports the global and event attributes.

label
Defines the visible label for the menu
type
Defines which type of menu to display. Available options are:
  • list
  • toolbar
  • context

Examples:

<section contextmenu="cmenu"> <p>Right click on this section to see the context menu. Note that the context menu only works in Firefox.</p> </section> <menu type="context" id="cmenu"> <menu label="Share this page" icon="images/share.gif"> <menuitem label="Twitter" icon="images/twitter.gif" onclick="shareOnTwitter()"></menuitem> <menuitem label="Facebook" icon="images/facebook.gif" onclick="shareOnFacebook()"></menuitem> </menu> </menu> <script> function shareOnTwitter() { var url = window.location.href; //share function not implemented share(url); } function shareOnFacebook() { var url = window.location.href; //share function not implemented share(url); } </script>

Useful links: