HTML menu Tag

HTML menu: Main Tips

• The menu tag has been deprecated in HTML4 and reintroduced again in HTML5.
• It is currently in the experimental stage: some functionalities have been deprecated, and some haven't been introduced yet.
• The purpose of the HTML menu tag is to define command groups (menus).
• It supports global attributes and has two tag-specific ones.

Creating HTML Menus

The HTML5 menu tag defines a menu of commands:

<menu type="context" id="menu">
  <menu label="Check on"> 
    <menuitem label="These courses are empowered by Gaming" icon="https://cdn.bitdegree.org/banners/doggos-bg.png" onclick="window.open('https://www.bitdegree.org/tag/gamified' + window.location.href);"></menuitem>
    <menuitem label="This is a place to go!" icon="https://cdn.bitdegree.org/logos/1000x600_horizontal_plain_blue_bg.png?raw=true" onclick="window.open('https://www.bitdegree.org/' + window.location.href);"></menuitem>
  </menu>
</menu>

While it might seem similar to an unordered list, menu tag is meant to define interactive items for users to access and not simply view.

You can create two types of menus in HTML:

• context menus activated via another element by right-clicking it
• toolbar menus listing a series of commands

Warning: the context menus feature is deprecated, and toolbar menus haven't been implemented yet.

Attributes for menu Tag

When creating a menu in HTML, you can use two tag-specific attributes: type and label.

type defines which type of HTML menu needs to be displayed. It can have one of two values - context or toolbar:

<menu type="context" id="menu">

label defines a detectable label for an HTML5 menu and allows users to access submenus:

<menu label="Check on"> 
    <menuitem label="These courses are empowered by Gaming" icon="https://cdn.bitdegree.org/banners/doggos-bg.png" onclick="window.open('https://www.bitdegree.org/tag/gamified' + window.location.href);"></menuitem>

Note: the label attribute can only be used for context menus.

Browser support

Mobile browser support