🚨 Get Your Free NFT Certificate Mint by Completing the Web3 Exam! START NOW

Code has been added to clipboard!

HTML menu Tag

Reading time 2 min
Published Jun 29, 2017
Updated Oct 2, 2019

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:

Example
<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.

DataCamp
Pros
  • Easy to use with a learn-by-doing approach
  • Offers quality content
  • Gamified in-browser coding experience
  • The price matches the quality
  • Suitable for learners ranging from beginner to advanced
Main Features
  • Free certificates of completion
  • Focused on data science skills
  • Flexible learning timetable
Udacity
Pros
  • Simplistic design (no unnecessary information)
  • High-quality courses (even the free ones)
  • Variety of features
Main Features
  • Nanodegree programs
  • Suitable for enterprises
  • Paid Certificates of completion
Udemy
Pros
  • Easy to navigate
  • No technical issues
  • Seems to care about its users
Main Features
  • Huge variety of courses
  • 30-day refund policy
  • Free certificates of completion

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:

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

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

Example
<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

Browser image
Chrome
-
Browser image
Edge
All
Browser image
Firefox
8+
Browser image
IE
-
Browser image
Opera
-
Browser image
Safari
-

Mobile browser support

Browser image
Chrome
-
Browser image
Firefox
8+
Browser image
Opera
-
Browser image
Safari
-