The menu element

One of the less talked about elements that is included in the HTML5 specification is the menu element. This is probably due to the fact that most browsers either don’t support it at all, or only fleetingly. Here I will take a quick look at this element and how it can be used.

As its name suggests, the function of the menu element is to mark-up a menu. On first glance I initially thought that a menu is just navigation and surely the new nav element would suffice? But of course I was thinking about websites and not webapps where menus, akin to those contained in desktop applications, are a distinct reality.

Another possible use for this element is in the definition of popup menus on a mobile application.

The element

The menu element is defined in the W3C as representing a list of commands.

The menu element can take two attributes; label and type.

The label attribute assigns a label to the menu for identification purposes.

The type attribute specifies the type of menu that is being defined and can be one of: list, toolbar or context. If this attribute is missing, then a value of list is assumed.

A list menu type indicates that the menu is either an unordered list of li elements or that it contains a number of commands that the user can carry out.

<menu label="information" type="list">
   <li><a href="info.html">Information</a></li>
   <li><a href="help.html">Help</a></li>
   <li><a href="about.html">About</a></li>
</menu>

A menu type of toolbar indicates that the menu contains a list of commands that the user can immediately interact with.

<menu label="mapOptions" type="toolbar">
   <button type="button" onclick="toggleIcons()">Show/hide icons</button>
   <button type="button" onclick="toggleLabels()">Show/hide map labels</button>
</menu>

A context menu contains commands of a context menu which can only be interacted with if that context menu is active. This can be a sub-menu within a menu. The label used for a context menu should be connected to the context that activates it via the label.

<menu type="list">
   <li><a href="help.html">Help</a></li>
   <li><label for="mapOptions">Map Options</label></li>
   <menu label="mapOptions" type="context">
     <button type="button" onclick="toggleIcons()">Show/hide icons</button>
     <button type="button" onclick="toggleLabels()">Show/hide map labels</button>
  </menu>
</menu>

There is also a contextmenu attribute which can be used to attach a context menu to an element. The value of the attribute must the id of a valid context menu defined elsewhere in the document.

<label>Password: <input id="pwd" name="pwd" type="password" contextmenu="choosepassword" required></label>
<menu type="context" id="choosepassword">
  <button onclick="document.getElementById('pwd').value = generatePassword()">Generate password</button>
</menu>

This has only been a quick look at the menu element and how it might be used. Since no browsers supprt it fully at the moment, its usage is limited but hopefully it’s given you an idea of how it could be used in the future.

I have also purposely not mentioned the command menuitem element which can be used in conjunction with the menu element. That’s for a future article.