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.

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
Coursera
Pros
  • Professional service
  • Flexible timetables
  • A variety of features to choose from
Main Features
  • Professional certificates of completion
  • University-level courses
  • Multiple Online degree programs
Datacamp
Pros
  • Great user experience
  • Offers quality content
  • Very transparent with their pricing
Main Features
  • Free certificates of completion
  • Focused on data science skills
  • Flexible learning timetable

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
-

Latest Udacity Coupon Found:

Verified STAFF PICK

75% OFF COURSES

Udacity Black Friday Offer

The best time to save on Udacity courses is now - follow this coupon to access a 75% Udacity Black Friday discount & enjoy learning at a very low cost!

Expiration date: 03/03/2021
3176 People Used
Only 97 Left
Rating
5.0