Tag HTML <menuitem>
Il tag HTML <menuitem> è obsoleto e rimosso da tutti i browser. Scopri la sua storia e il sostituto moderno per il menu contestuale.
Il tag HTML <menuitem> è obsoleto ed è stato rimosso da tutti i principali browser — non fa più nulla quando lo si inserisce in una pagina. Non usarlo. Questo capitolo spiega cosa era destinato a fare, perché è stato eliminato e i modi moderni e completamente supportati per costruire i menu che un tempo prometteva.
Quando era specificato, <menuitem> rappresentava un singolo comando o voce di menu che un utente poteva richiamare da un menu popup definito con il tag <menu> — tipicamente un menu personalizzato al tasto destro (menu contestuale) o un menu collegato a un pulsante di menu.
Perché è stato rimosso
<menuitem> e l'attributo contextmenu associato su <menu type="context"> sono stati implementati solo in Firefox, nascosti dietro un flag in alcune versioni, e non sono mai stati distribuiti in Chrome, Safari o Edge. Poiché nessun altro browser lo ha adottato, la funzionalità non poteva essere utilizzata in modo cross-browser affidabile. Firefox alla fine ha rimosso la propria implementazione e l'elemento è stato eliminato dallo standard HTML Living Standard. Con zero supporto browser rimanente, <menuitem> è ora puramente storico.
Sintassi (legacy — non funzionale)
Il markup seguente mostra come <menuitem> veniva scritto: annidato all'interno di un elemento <menu>. Questo codice non fa nulla in nessun browser corrente — viene mostrato solo per riconoscerlo nei documenti vecchi.
<!-- 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>Sostituto moderno: un menu contestuale personalizzato
Per costruire un menu al tasto destro oggi, ascolta l'evento contextmenu, impedisci il menu predefinito del browser e mostra il tuo <ul> (o <div>) posizionato. Usa i ruoli WAI-ARIA per i menu in modo che sia accessibile: role="menu" sul contenitore, role="menuitem" su ogni voce, più aria-checked per i toggle e aria-disabled per i comandi non disponibili.
<!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>Questo pattern funziona in ogni browser moderno ed è completamente sotto il tuo controllo per lo stile e la gestione della tastiera.
Altre opzioni moderne
- Elemento
<menu>. Il tag<menu>è ancora HTML valido, ma il suo significato si è ristretto: ora rappresenta una barra degli strumenti (un elenco semantico di comandi), comportandosi in modo simile a<ul>. Non crea più menu contestuali nativi. <details>e<summary>. Per una semplice apertura al clic o un menu a tendina leggero che non richiede JavaScript, usa<details>con un'etichetta<summary>.
Attributi (tutti obsoleti)
| Attributo | Valore | Descrizione |
|---|---|---|
| checked | checked | Definisce che il comando / la voce di menu deve essere selezionato al caricamento della pagina (usato solo per type = "radio" e type = "checkbox"). |
| default | default | Contrassegna il comando/la voce di menu come comando predefinito. |
| disabled | disabled | Definisce che il comando/la voce di menu deve essere disabilitato. |
| icon | icon | Definisce un'icona per la voce di menu/comando. |
| label | text | Definisce che il comando / la voce di menu sarà visualizzato per l'utente. L'attributo è obbligatorio. |
| radiogroup | groupname | Definisce il nome dei comandi raggruppati, che verranno attivati/disattivati quando il comando/la voce di menu viene attivato/disattivato. Usato solo per type = "radio". |
| type | checkbox, command, radio | Definisce il tipo di comando/voce di menu. Il valore predefinito è command. |
Nota: Ogni attributo sopra è obsoleto e ignorato dai browser, poiché l'elemento stesso non è supportato. La tabella è mantenuta solo a scopo di riferimento. Quando si porta del codice vecchio, sostituisci questi attributi con gli equivalenti ARIA nel tuo menu personalizzato:
checked/type="checkbox"/type="radio"→role="menuitemcheckbox"orole="menuitemradio"conaria-checked.disabled→aria-disabled="true".label→ il contenuto testuale visibile della tua voce di menu.icon,default,radiogroup→ gestiscili tu stesso con CSS e JavaScript.
Sebbene non abbia mai avuto alcun effetto, <menuitem> era documentato come supportante gli Attributi Globali e gli Attributi Evento.