Balise HTML <menuitem>
La balise HTML <menuitem> est obsolète et supprimée de tous les navigateurs. Découvrez son historique et les remplacements modernes pour les menus contextuels.
La balise HTML <menuitem> est obsolète et a été supprimée de tous les principaux navigateurs — elle ne fait plus rien lorsque vous l'utilisez sur une page. Ne l'utilisez pas. Ce chapitre explique ce qu'elle était censée faire, pourquoi elle a été abandonnée, et les façons modernes et entièrement prises en charge de créer les menus qu'elle promettait autrefois.
Lorsqu'elle était spécifiée, <menuitem> représentait une commande ou un élément de menu unique qu'un utilisateur pouvait invoquer depuis un menu contextuel défini avec la balise <menu> — généralement un menu personnalisé au clic droit (menu contextuel) ou un menu attaché à un bouton de menu.
Pourquoi elle a été supprimée
<menuitem> et l'attribut contextmenu associé sur <menu type="context"> n'ont jamais été implémentés que dans Firefox, cachés derrière un indicateur dans certaines versions, et jamais publiés dans Chrome, Safari ou Edge. Étant donné qu'aucun autre navigateur ne l'a adoptée, la fonctionnalité n'a pas pu être utilisée de manière fiable entre les navigateurs. Firefox a finalement supprimé son implémentation, et l'élément a été retiré du standard HTML Living Standard. Avec un support navigateur nul restant, <menuitem> est désormais purement historique.
Syntaxe (ancienne — non fonctionnelle)
Le balisage ci-dessous montre comment <menuitem> était écrit : imbriqué dans un élément <menu>. Ce code ne fait rien dans aucun navigateur actuel — il est présenté uniquement pour que vous puissiez le reconnaître dans d'anciens 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>Remplacement moderne : un menu contextuel personnalisé
Pour créer un menu au clic droit aujourd'hui, écoutez l'événement contextmenu, empêchez le menu par défaut du navigateur et affichez votre propre <ul> (ou <div>) positionné. Utilisez les rôles de menu WAI-ARIA pour qu'il soit accessible : role="menu" sur le conteneur, role="menuitem" sur chaque élément, ainsi que aria-checked pour les bascules et aria-disabled pour les commandes indisponibles.
<!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>Ce modèle fonctionne dans tous les navigateurs modernes et vous offre un contrôle total sur le style et la gestion du clavier.
Autres options modernes
- Élément
<menu>. La balise<menu>est encore du HTML valide, mais sa signification s'est réduite : elle représente désormais une barre d'outils (une liste sémantique de commandes), se comportant beaucoup comme<ul>. Elle ne crée plus de menus contextuels natifs. <details>et<summary>. Pour une simple divulgation au clic ou un menu déroulant léger ne nécessitant aucun JavaScript, utilisez<details>avec un libellé<summary>.
Attributs (tous obsolètes)
| Attribut | Valeur | Description |
|---|---|---|
| checked | checked | Définit que la commande / l'élément de menu doit être coché lors du chargement de la page (utilisé uniquement pour type = "radio" et type = "checkbox"). |
| default | default | Marque la commande / l'élément de menu comme commande par défaut. |
| disabled | disabled | Définit que la commande / l'élément de menu doit être désactivé. |
| icon | icon | Définit une icône pour l'élément de menu / commande. |
| label | text | Définit que la commande / l'élément de menu sera affiché pour l'utilisateur. L'attribut est obligatoire. |
| radiogroup | groupname | Définit le nom des commandes groupées qui seront basculées lorsque la commande / l'élément de menu est basculé. Utilisé uniquement pour type = "radio". |
| type | checkbox, command, radio | Définit le type de commande / d'élément de menu. La valeur par défaut est command. |
Remarque : Chaque attribut ci-dessus est obsolète et ignoré par les navigateurs, puisque l'élément lui-même n'est pas pris en charge. Le tableau est conservé uniquement à titre de référence. Lors du portage d'ancien code, remplacez ces attributs par des équivalents ARIA sur votre menu personnalisé :
checked/type="checkbox"/type="radio"→role="menuitemcheckbox"ourole="menuitemradio"avecaria-checked.disabled→aria-disabled="true".label→ le contenu textuel visible de votre élément de menu.icon,default,radiogroup→ gérez-les vous-même avec CSS et JavaScript.
Bien qu'elle n'ait jamais eu aucun effet, <menuitem> était documentée comme prenant en charge les Attributs globaux et les Attributs d'événement.