Tag HTML <menuitem>

A tag HTML <menuitem> é obsoleta e foi removida de todos os principais navegadores — ela não faz mais nada quando você a coloca em uma página. Não a utilize. Este capítulo explica para que ela foi criada, por que foi descontinuada e as formas modernas e totalmente suportadas de criar os menus que ela prometia.

Quando foi especificada, <menuitem> representava um único comando ou item de menu que um usuário poderia invocar a partir de um menu popup definido com a tag <menu> — normalmente um menu personalizado de clique com o botão direito (contexto) ou um menu vinculado a um botão de menu.

Por que foi removida

<menuitem> e o atributo contextmenu associado em <menu type="context"> foram implementados apenas no Firefox, ocultos por trás de uma flag em algumas versões, e nunca enviados para Chrome, Safari ou Edge. Como nenhum outro navegador o adotou, o recurso não podia ser utilizado de forma confiável entre navegadores. O Firefox eventualmente removeu sua implementação e o elemento foi retirado do HTML Living Standard. Com zero suporte de navegadores restante, <menuitem> é agora puramente histórico.

Sintaxe (legado — não funcional)

A marcação abaixo mostra como <menuitem> era escrito: aninhado dentro de um elemento <menu>. Este código não faz nada em nenhum navegador atual — é mostrado apenas para que você possa reconhecê-lo em documentos antigos.

<!-- 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>

Para criar um menu de clique com o botão direito hoje, escute o evento contextmenu, impeça o menu padrão do navegador e exiba seu próprio <ul> (ou <div>) posicionado. Use os roles de menu WAI-ARIA para que seja acessível: role="menu" no contêiner, role="menuitem" em cada item, além de aria-checked para alternâncias e aria-disabled para comandos indisponíveis.

<!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>

Este padrão funciona em todos os navegadores modernos e está totalmente sob seu controle para estilização e tratamento de teclado.

Outras opções modernas

Elemento <menu>. A tag <menu> ainda é HTML válido, mas seu significado foi restringido: agora representa uma barra de ferramentas (uma lista semântica de comandos), funcionando de forma similar ao <ul>. Ela não cria mais menus de contexto nativos.
<details> e <summary>. Para uma divulgação simples de clique para abrir ou dropdown leve que não requer JavaScript, use <details> com um label <summary>.

Atributos (todos obsoletos)

Atributo	Valor	Descrição
checked	checked	Define que o comando/item de menu deve estar marcado quando a página é carregada (usado apenas para type = "radio" e type = "checkbox").
default	default	Marca o comando/item de menu como comando padrão.
disabled	disabled	Define que o comando/item de menu deve estar desabilitado.
icon	icon	Define um ícone para o item de menu/comando.
label	text	Define que o comando/item de menu será exibido para o usuário. O atributo é obrigatório.
radiogroup	groupname	Define o nome dos comandos agrupados, que serão alternados quando o comando/item de menu for alternado. Usado apenas para type = "radio".
type	checkbox, command, radio	Define o tipo de comando/item de menu. O valor padrão é command.

Nota: Todos os atributos acima são obsoletos e ignorados pelos navegadores, pois o próprio elemento não é suportado. A tabela é mantida apenas para referência. Ao portar código antigo, substitua esses atributos por equivalentes ARIA em seu menu personalizado:

checked / type="checkbox" / type="radio" → role="menuitemcheckbox" ou role="menuitemradio" com aria-checked.
disabled → aria-disabled="true".
label → o conteúdo de texto visível do seu item de menu.
icon, default, radiogroup → trate esses casos você mesmo com CSS e JavaScript.

Embora nunca tenha tido qualquer efeito, <menuitem> foi documentado como suportando os Atributos Globais e os Atributos de Evento.

Prática

O que é verdadeiro sobre a tag HTML menuitem?

É obsoleta e removida de todos os principais navegadores, portanto não deve ser usada em novos projetos.É a forma recomendada de criar menus de contexto em HTML moderno.É suportada em todos os principais navegadores.Renderiza um dropdown estilizado sem nenhum JavaScript.

Por que foi removida

Sintaxe (legado — não funcional)

Substituição moderna: um menu de contexto personalizado

Outras opções modernas

Atributos (todos obsoletos)

Prática