W3docs
en
Log in

HTML <menuitem> Tag

The HTML <menuitem> tag is obsolete and removed from all browsers. Learn its history and the modern context-menu replacement.

The HTML <menuitem> tag is obsolete and has been removed from every major browser — it no longer does anything when you put it on a page. Do not use it. This chapter explains what it was meant to do, why it was dropped, and the modern, fully supported ways to build the menus it once promised.

When it was specified, <menuitem> represented a single command or menu item that a user could invoke from a popup menu defined with the <menu> tag — typically a custom right-click (context) menu or a menu attached to a menu button.

Why it was removed

<menuitem> and the associated contextmenu attribute on <menu type="context"> were only ever implemented in Firefox, hidden behind a flag in some builds, and never shipped in Chrome, Safari, or Edge. Because no other browser adopted it, the feature could not be relied on cross-browser. Firefox eventually removed its implementation, and the element was struck from the HTML Living Standard. With zero browser support remaining, <menuitem> is now purely historical.

Syntax (legacy — non-functional)

The markup below shows how <menuitem> was written: nested inside a <menu> element. This code does nothing in any current browser — it is shown only so you can recognize it in old documents.

<!-- Legacy, non-functional. Do NOT use in new projects. -->
<menu type="context" id="popup">
  <menuitem label="Ordered list"></menuitem>
  <menuitem label="Unordered list"></menuitem>
  <menuitem label="Menu"></menuitem>
</menu>

Modern replacement: a custom context menu

To build a right-click menu today, listen for the contextmenu event, prevent the browser's default menu, and show your own positioned <ul> (or <div>). Use the WAI-ARIA menu roles so it is accessible: role="menu" on the container, role="menuitem" on each item, plus aria-checked for toggles and aria-disabled for unavailable commands.

<!DOCTYPE html>
<html>
  <head>
    <title>Custom context menu</title>
    <style>
      #menu {
        position: absolute;
        display: none;
        margin: 0;
        padding: 4px 0;
        list-style: none;
        background: #fff;
        border: 1px solid #ccc;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
        font: 14px sans-serif;
      }
      #menu li {
        padding: 6px 16px;
        cursor: pointer;
      }
      #menu li:hover {
        background: #0d6efd;
        color: #fff;
      }
      #menu li[aria-disabled="true"] {
        color: #999;
        cursor: default;
      }
    </style>
  </head>
  <body>
    <p>Right-click anywhere on this page.</p>

    <ul id="menu" role="menu">
      <li role="menuitem">Ordered list</li>
      <li role="menuitem">Unordered list</li>
      <li role="menuitemcheckbox" aria-checked="false">Show line numbers</li>
      <li role="menuitem" aria-disabled="true">Print (unavailable)</li>
    </ul>

    <script>
      const menu = document.getElementById("menu");

      document.addEventListener("contextmenu", (e) => {
        e.preventDefault();
        menu.style.left = e.pageX + "px";
        menu.style.top = e.pageY + "px";
        menu.style.display = "block";
      });

      document.addEventListener("click", () => {
        menu.style.display = "none";
      });

      menu.addEventListener("click", (e) => {
        const item = e.target.closest('[role="menuitemcheckbox"]');
        if (item) {
          const checked = item.getAttribute("aria-checked") === "true";
          item.setAttribute("aria-checked", String(!checked));
        }
      });
    </script>
  </body>
</html>

This pattern works in every modern browser and is fully under your control for styling and keyboard handling.

Other modern options

  • <menu> element. The <menu> tag is still valid HTML, but its meaning has narrowed: it now represents a toolbar (a semantic list of commands), behaving much like <ul>. It no longer creates native context menus.
  • <details> and <summary>. For a simple click-to-open disclosure or lightweight dropdown that needs no JavaScript, use <details> with a <summary> label.

Attributes (all obsolete)

AttributeValueDescription
checkedcheckedDefines that the command / menu item must be checked when the page is being loaded (used only for type = "radio" and type = "checkbox").
defaultdefaultMarks command/menu item as a default command.
disableddisabledDefines that the command/menu item must be disabled.
iconiconDefines an icon for the menu /command item.
labeltextDefines that the command / menu item will be displayed for the user. The attribute is required.
radiogroupgroupnameDefines the name of grouped commands, which will be toggled when command/menu item is toggled. Used only for type = "radio".
typecheckbox, command, radioDefines the type of command/menu item. The default value is command.

Note: Every attribute above is obsolete and ignored by browsers, since the element itself is unsupported. The table is kept only for reference. When porting old code, replace these attributes with ARIA equivalents on your custom menu:

  • checked / type="checkbox" / type="radio" → role="menuitemcheckbox" or role="menuitemradio" with aria-checked.
  • disabled → aria-disabled="true".
  • label → the visible text content of your menu item.
  • icon, default, radiogroup → handle these yourself with CSS and JavaScript.

Although it never had any effect, <menuitem> was documented as supporting the Global Attributes and the Event Attributes.

Practice

Practice
What is true about the HTML menuitem tag?
What is true about the HTML menuitem tag?
Was this page helpful?