Etiqueta HTML <menuitem>
La etiqueta HTML <menuitem> está obsoleta y eliminada de todos los navegadores. Conoce su historia y el reemplazo moderno para menús contextuales.
La etiqueta HTML <menuitem> está obsoleta y ha sido eliminada de todos los navegadores principales — ya no hace nada cuando se incluye en una página. No la utilices. Este capítulo explica para qué fue diseñada, por qué fue descartada, y las formas modernas y totalmente compatibles de crear los menús que prometía.
Cuando fue especificada, <menuitem> representaba un único comando o elemento de menú que el usuario podía invocar desde un menú emergente definido con la etiqueta <menu> — normalmente un menú personalizado al hacer clic derecho (menú contextual) o un menú asociado a un botón de menú.
Por qué fue eliminada
<menuitem> y el atributo contextmenu asociado en <menu type="context"> solo fueron implementados en Firefox, ocultos detrás de un indicador en algunas versiones, y nunca se incluyeron en Chrome, Safari ni Edge. Como ningún otro navegador lo adoptó, la funcionalidad no podía usarse de forma fiable entre navegadores. Firefox eventualmente eliminó su implementación, y el elemento fue retirado del HTML Living Standard. Sin soporte en ningún navegador, <menuitem> es ahora puramente histórico.
Sintaxis (heredada — no funcional)
El marcado a continuación muestra cómo se escribía <menuitem>: anidado dentro de un elemento <menu>. Este código no hace nada en ningún navegador actual — se muestra únicamente para que puedas reconocerlo en documentos antiguos.
<!-- 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>Reemplazo moderno: un menú contextual personalizado
Para crear un menú al hacer clic derecho hoy en día, escucha el evento contextmenu, evita el menú predeterminado del navegador y muestra tu propio <ul> (o <div>) posicionado. Usa los roles de menú de WAI-ARIA para que sea accesible: role="menu" en el contenedor, role="menuitem" en cada elemento, además de aria-checked para alternancias y aria-disabled para comandos no disponibles.
<!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 patrón funciona en todos los navegadores modernos y está completamente bajo tu control en cuanto a estilos y manejo de teclado.
Otras opciones modernas
- Elemento
<menu>. La etiqueta<menu>sigue siendo HTML válido, pero su significado se ha reducido: ahora representa una barra de herramientas (una lista semántica de comandos), comportándose de forma similar a<ul>. Ya no crea menús contextuales nativos. <details>y<summary>. Para una revelación simple al hacer clic o un menú desplegable ligero que no necesita JavaScript, usa<details>con una etiqueta<summary>.
Atributos (todos obsoletos)
| Atributo | Valor | Descripción |
|---|---|---|
| checked | checked | Define que el comando / elemento de menú debe estar marcado cuando se carga la página (usado solo para type = "radio" y type = "checkbox"). |
| default | default | Marca el comando/elemento de menú como comando predeterminado. |
| disabled | disabled | Define que el comando/elemento de menú debe estar desactivado. |
| icon | icon | Define un icono para el elemento de menú/comando. |
| label | text | Define el texto que se mostrará al usuario para el comando / elemento de menú. El atributo es obligatorio. |
| radiogroup | groupname | Define el nombre de los comandos agrupados, que se alternarán cuando se alterne el comando/elemento de menú. Usado solo para type = "radio". |
| type | checkbox, command, radio | Define el tipo de comando/elemento de menú. El valor predeterminado es command. |
Nota: Todos los atributos anteriores están obsoletos y son ignorados por los navegadores, ya que el elemento en sí no es compatible. La tabla se mantiene solo como referencia. Al migrar código antiguo, reemplaza estos atributos con equivalentes ARIA en tu menú personalizado:
checked/type="checkbox"/type="radio"→role="menuitemcheckbox"orole="menuitemradio"conaria-checked.disabled→aria-disabled="true".label→ el contenido de texto visible de tu elemento de menú.icon,default,radiogroup→ maneja estos con CSS y JavaScript.
Aunque nunca tuvo ningún efecto, <menuitem> fue documentado como compatible con los Atributos Globales y los Atributos de Evento.