W3docs
en
Log in

HTML <menu> Tag

The HTML <menu> tag is used for creating context menus, toolbars and listing form controls, and commands. It was deprecated in HTML 4.01 but has been redefined in HTML5. Also, see examples.

The <menu> tag defines a list of commands or menu items. Historically, it was used for creating context menus, toolbars, and listing form controls.

A context menu historically consisted of a <menu> element that had <menuitem> elements for each selectable option, as well as <hr> elements that broke up the content of the menu into sections with the help of separator lines. However, these features have been removed from the HTML specification.

A toolbar menu uses a <menu> element. Its content can be structured in two ways:

  • It can contain an unordered list of items that are represented by the HTML <li> element.
  • It can contain flow content that describes the accessible options and commands.
Danger

The <menu> tag is considered obsolete, and the <menuitem> tag has been completely removed from the HTML specification. Support for context menus and toolbars via these tags has been largely removed from all major browsers. For modern context menus, use CSS and JavaScript. For standard lists, use the <ul> element instead.

Syntax

The <menu> tag comes in pairs. The content is written between the opening (<menu>) and closing (</menu>) tags.

Example of the HTML <menu> tag with <li> elements:

HTML <menu> Tag Example

Note: Modern browsers do not render <menu> as a list by default, so display: block and list-style: none are used to reset default styling.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      menu {
        display: block;
        list-style: none;
        padding: 0;
      }
      menu li {
        display: block;
        padding: 5px;
        border: 1px solid #ccc;
        margin-bottom: 2px;
      }
    </style>
  </head>
  <body>
    <menu>
      <li>ol - ordered list</li>
      <li>ul - unordered list</li>
      <li>menu - menu list</li>
    </menu>
  </body>
</html>
Try it Yourself »

Result

menu tag example

Example of the HTML <menu> tag for creating a toolbar menu:

HTML <menu> Tag in Modern Browsers

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      menu {
        display: flex;
        gap: 10px;
        padding: 10px;
        background: #f0f0f0;
        border: 1px solid #ccc;
      }
      menu li {
        list-style: none;
        padding: 8px 12px;
        background: #1c87c9;
        color: #fff;
        cursor: pointer;
        border-radius: 4px;
      }
    </style>
  </head>
  <body>
    <menu>
      <li onclick="alert('Refresh')">Refresh</li>
      <li onclick="alert('Share')">Share</li>
      <li onclick="alert('Email')">Email</li>
    </menu>
  </body>
</html>
Try it Yourself »

The difference between the <menu> and <ul> tags

These two elements have similar behavior. Both the <menu> and <ul> elements are used to create unordered lists. The main difference is that the <menu> tag is specifically designed for commands, toolbars, and context menus, while the <ul> tag is used for general unordered lists.

Attributes

AttributeValueDescription
labeltextDefines a visible label for the menu.
typepopup, toolbar, contextDefines the type of the menu. Note: The type attribute and its values were experimental and removed in HTML5.1.

The <menu> tag also supports the Global attributes and the Event Attributes.

Practice

Practice

What is the purpose of the '<menu>' HTML tag, and on which browsers can it be used?