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.

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

GET 25% OFF

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

UP TO 70% OFF

Pros

• A wide range of learning programs
• University-level courses
• Easy to navigate
• Verified certificates
• Free learning track available

Main Features

• University-level courses
• Suitable for enterprises
• Verified certificates of completion

FREE COURSES

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

Chrome

-

Edge

All

Firefox

8+

IE

-

Opera

-

Safari

-

Mobile browser support

Chrome

-

Firefox

8+

Opera

-

Safari

-