Cette fonction est expérimentale
Puisque cette fonction est toujours en développement dans certains navigateurs, veuillez consulter le tableau de compatibilité pour les préfixes à utiliser selon les navigateurs.
Il convient de noter qu'une fonctionnalité expérimentale peut voir sa syntaxe ou son comportement modifié dans le futur en fonction des évolutions de la spécification.
L'élément HTML <menuitem> représente une commande qu'un utilisateur peut utilisé via un menu contextuel ou un menu rattaché à un bouton.
Une commande peut être définie explicitement, avec un texte voire une icône ou bien faire référence à une commande décrite dans un autre él��ment. Une commande peut prendre la forme d'une case à cocher ou d'un groupe de boutons radio.
| Catégories de contenu | Aucune. |
|---|---|
| Contenu autorisé | Aucun, c'est un élément vide. |
| Omission de balises | Cet élément doit avoir une balise ouvrante et ne doit pas avoir de balise fermante. |
| Parents autorisés | Un élément <menu> lorsque son attribut vaut type ou que cet élément <menu> est lui même le fils d'un élément <menu>. |
| Rôles ARIA autorisés | Aucun. |
| Interface DOM | HTMLMenuItemElement |
Attributs
Cet élément inclut également les attributs universels et notamment title qui peut être utilisé afin de décrire une commande ou pour fournir des indications quant à l'utilisation de celle-ci.
checked- Un attribut booléen qui indique si la commande est sélectionné. Cet attribut peut uniquement être utilisé lorsque l'attribut
typevautcheckboxouradio. command- Cet attribut définit l'identifiant d'un autre élément qui indique une commande invoquée indirectement. Cet attribut ne peut pas être utilisé si les attributs
checked,disabled,icon,label,radiogroupoutypesont utilisés. default- Un attribut booléen qui indique la commande par défaut du menu.
disabled- Un attribut booléen qui indique que la commande n'est pas disponible dans l'état actuel. On notera que
disabledest sémantiquement différent dehidden. icon- Une URL vers image qui représente la commande.
label- Le nom de la commande affiché pour l'utilisateur. Cet attribut est obligatoire lorsque l'attribut
commandest absent. radiogroup- Cet attribut indique le nom d'un groupe de commandes étant des boutons radio. Cet attribut peut uniquement être utilisé lorsque
typevautradio. type- Cet attribut indique le type de commande dans le menu. C'est un attribut à valeur contrainte qui peut prendre une des valeurs suivantes :
command: une commande associée à une action donnée. C'est la valeur par défaut de l'attribut.checkbox: une commande qui peut avoir un état parmi deux états différents.radio: une commande qui représente une sélection au sein d'un groupe de commandes qui sont des boutons radio.
Exemples
HTML
<!-- Un élément <div> avec un menu contextuel -->
<div contextmenu="popup-menu">
Effectuez un clic-droit pour voir le menu contextuel
</div>
<menu type="context" id="popup-menu">
<menuitem type="checkbox" onclick="toggleOption()" checked="true">
Case à cocher
</menuitem>
<menuitem type="command" label="Command" icon="icon.png" onclick="doSomething()">
Case à cocher
</menuitem>
<menuitem type="radio" name="group1" onclick="option()" checked="true">
Bouton radio 1
</menuitem>
<menuitem type="radio" name="group1" onclick="option()">
Bouton radio 2
</menuitem>
</menu>
CSS
div {
width: 300px;
height: 80px;
background-color: lightgreen;
}
Résultat
Spécifications
| Spécification | État | Commentaires |
|---|---|---|
| WHATWG HTML Living Standard La définition de '<menuitem>' dans cette spécification. |
Standard évolutif | |
| HTML5.1 La définition de '<menuitem>' dans cette spécification. |
Recommendation | Définition initiale. |
Compatibilité des navigateurs
| Fonctionnalité | Chrome | Firefox (Gecko) | Edge | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|---|
| Support simple | Pas de support[1] | 8 (8)[2] | Pas de support | Pas de support | (Oui)[3] | ? |
| Fonctionnalité | Android | Firefox Mobile (Gecko) | Edge | IE Mobile | Opera Mobile | Safari Mobile |
|---|---|---|---|---|---|---|
| Support simple | Pas de support | 8.0 (8) | ? | Pas de support | Pas de support | Pas de support |
[1] La fonctionnalité peut être activée à la compilation avec l'option --enable-blink-features=ContextMenu (cf. le bug Chromium correspondant).
[2] Seuls les éléments <menuitems> contenus dans un élément <menu> et affectés à un autre élément via l'attribut contextmenu fonctionnent.
[3] Cette fonctionnalité est uniquement implémentée via la préférence Activer les fonctionnalités expérimentales de la plate-forme Web et ne prend en charge que le type "command".