Obsolète
Cette fonctionnalité a été supprimée des standards du Web. Bien que quelques navigateurs puissent encore la supporter, elle est en cours d'éradication. Ne l'utilisez ni dans d'anciens projets, ni dans de nouveaux. Les pages et applications Web l'utilisant peuvent cesser de fonctionner à tout moment.

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 type vaut checkbox ou radio.
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, radiogroup ou type sont 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 disabled est sémantiquement différent de hidden.
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 command est absent.
radiogroup
Cet attribut indique le nom d'un groupe de commandes étant des boutons radio. Cet attribut peut uniquement être utilisé lorsque type vaut radio.
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" checked>Une case à cocher</menuitem>
  <hr>
  <menuitem type="command" label="Cette commande ne fait rien" icon="https://developer.cdn.mozilla.net/static/img/favicon144.png">
    Les commandes n'affichent pas leurs contenus.
  </menuitem>
  <menuitem type="command" label="Cette commande contient du JavAScript" onclick="alert('command clicked')">
    Les commandes n'affichent pas leurs contenus.
  </menuitem>
  <hr>
  <menuitem type="radio" radiogroup="group1">Bouton radio 1</menuitem>
  <menuitem type="radio" radiogroup="group1">Bouton radio 2</menuitem>
</menu>

CSS

div {
  width: 300px;
  height: 80px;
  background-color: lightgreen;
}

Résultat

Compatibilité des navigateurs

Update compatibility data on GitHub
OrdinateurMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebview AndroidChrome pour AndroidEdge MobileFirefox pour AndroidOpera pour AndroidSafari pour iOSSamsung Internet
Support simple
ObsolèteNon-standard
Chrome Aucun support NonEdge Support complet OuiFirefox Support complet 8
Notes
Support complet 8
Notes
Notes Only works for <menuitem> elements defined within a <menu> element assigned to an element via the contextmenu attribute.
Notes The <menuitem> element requires a closing tag.
IE Aucun support NonOpera Aucun support NonSafari Aucun support NonWebView Android Aucun support NonChrome Android Aucun support NonEdge Mobile Support complet OuiFirefox Android Support complet 8
Notes
Support complet 8
Notes
Notes Only works for <menuitem> elements defined within a <menu> element assigned to an element via the contextmenu attribute.
Notes The <menuitem> element requires a closing tag.
Opera Android Aucun support NonSafari iOS Aucun support NonSamsung Internet Android Aucun support Non
checked
ObsolèteNon-standard
Chrome Aucun support NonEdge Support complet OuiFirefox Support complet 8
Notes
Support complet 8
Notes
Notes Only works for <menuitem> elements defined within a <menu> element assigned to an element via the contextmenu attribute.
Notes The <menuitem> element requires a closing tag.
IE Aucun support NonOpera Aucun support NonSafari Aucun support NonWebView Android Aucun support NonChrome Android Aucun support NonEdge Mobile Support complet OuiFirefox Android Support complet 8
Notes
Support complet 8
Notes
Notes Only works for <menuitem> elements defined within a <menu> element assigned to an element via the contextmenu attribute.
Notes The <menuitem> element requires a closing tag.
Opera Android Aucun support NonSafari iOS Aucun support NonSamsung Internet Android Aucun support Non
command
ObsolèteNon-standard
Chrome Aucun support NonEdge Support complet OuiFirefox Support complet 8
Notes
Support complet 8
Notes
Notes Only works for <menuitem> elements defined within a <menu> element assigned to an element via the contextmenu attribute.
Notes The <menuitem> element requires a closing tag.
IE Aucun support NonOpera Aucun support NonSafari Aucun support NonWebView Android Aucun support NonChrome Android Aucun support NonEdge Mobile Support complet OuiFirefox Android Support complet 8
Notes
Support complet 8
Notes
Notes Only works for <menuitem> elements defined within a <menu> element assigned to an element via the contextmenu attribute.
Notes The <menuitem> element requires a closing tag.
Opera Android Aucun support NonSafari iOS Aucun support NonSamsung Internet Android Aucun support Non
default
ObsolèteNon-standard
Chrome Aucun support NonEdge Support complet OuiFirefox Support complet 8
Notes
Support complet 8
Notes
Notes Only works for <menuitem> elements defined within a <menu> element assigned to an element via the contextmenu attribute.
Notes The <menuitem> element requires a closing tag.
IE Aucun support NonOpera Aucun support NonSafari Aucun support NonWebView Android Aucun support NonChrome Android Aucun support NonEdge Mobile Support complet OuiFirefox Android Support complet 8
Notes
Support complet 8
Notes
Notes Only works for <menuitem> elements defined within a <menu> element assigned to an element via the contextmenu attribute.
Notes The <menuitem> element requires a closing tag.
Opera Android Aucun support NonSafari iOS Aucun support NonSamsung Internet Android Aucun support Non
disabled
ObsolèteNon-standard
Chrome Aucun support NonEdge Support complet OuiFirefox Support complet 8
Notes
Support complet 8
Notes
Notes Only works for <menuitem> elements defined within a <menu> element assigned to an element via the contextmenu attribute.
Notes The <menuitem> element requires a closing tag.
IE Aucun support NonOpera Support complet Oui
Désactivée
Support complet Oui
Désactivée
Désactivée This feature is behind the Enable Experimental Web Platform Features preference (needs to be set to true).
Safari Aucun support NonWebView Android Aucun support NonChrome Android Aucun support NonEdge Mobile Support complet OuiFirefox Android Support complet 8
Notes
Support complet 8
Notes
Notes Only works for <menuitem> elements defined within a <menu> element assigned to an element via the contextmenu attribute.
Notes The <menuitem> element requires a closing tag.
Opera Android Aucun support NonSafari iOS Aucun support NonSamsung Internet Android Aucun support Non
icon
ObsolèteNon-standard
Chrome Aucun support NonEdge Support complet OuiFirefox Support complet 8
Notes
Support complet 8
Notes
Notes Only works for <menuitem> elements defined within a <menu> element assigned to an element via the contextmenu attribute.
Notes The <menuitem> element requires a closing tag.
IE Aucun support NonOpera Aucun support NonSafari Aucun support NonWebView Android Aucun support NonChrome Android Aucun support NonEdge Mobile Support complet OuiFirefox Android Support complet 8
Notes
Support complet 8
Notes
Notes Only works for <menuitem> elements defined within a <menu> element assigned to an element via the contextmenu attribute.
Notes The <menuitem> element requires a closing tag.
Opera Android Aucun support NonSafari iOS Aucun support NonSamsung Internet Android Aucun support Non
radiogroup
ObsolèteNon-standard
Chrome Aucun support NonEdge Support complet OuiFirefox Support complet 8
Notes
Support complet 8
Notes
Notes Only works for <menuitem> elements defined within a <menu> element assigned to an element via the contextmenu attribute.
Notes The <menuitem> element requires a closing tag.
IE Aucun support NonOpera Aucun support NonSafari Aucun support NonWebView Android Aucun support NonChrome Android Aucun support NonEdge Mobile Support complet OuiFirefox Android Support complet 8
Notes
Support complet 8
Notes
Notes Only works for <menuitem> elements defined within a <menu> element assigned to an element via the contextmenu attribute.
Notes The <menuitem> element requires a closing tag.
Opera Android Aucun support NonSafari iOS Aucun support NonSamsung Internet Android Aucun support Non
type
ObsolèteNon-standard
Chrome Aucun support NonEdge Support complet OuiFirefox Support complet 8
Notes
Support complet 8
Notes
Notes Only works for <menuitem> elements defined within a <menu> element assigned to an element via the contextmenu attribute.
Notes The <menuitem> element requires a closing tag.
IE Aucun support NonOpera Aucun support NonSafari Aucun support NonWebView Android Aucun support NonChrome Android Aucun support NonEdge Mobile Support complet OuiFirefox Android Support complet 8
Notes
Support complet 8
Notes
Notes Only works for <menuitem> elements defined within a <menu> element assigned to an element via the contextmenu attribute.
Notes The <menuitem> element requires a closing tag.
Opera Android Aucun support NonSafari iOS Aucun support NonSamsung Internet Android Aucun support Non

Légende

Support complet  
Support complet
Aucun support  
Aucun support
Fonctionnalité non-standard. Celle-ci peut être incorrectement supportée par les autres navigateurs.
Fonctionnalité non-standard. Celle-ci peut être incorrectement supportée par les autres navigateurs.
Obsolète. Les nouveaux sites web ne doivent pas utiliser cette fonctionnalité.
Obsolète. Les nouveaux sites web ne doivent pas utiliser cette fonctionnalité.
Voir les notes d'implémentation.
Voir les notes d'implémentation.
Une action explicite de l'utilisateur est nécessaire pour activer cette fonctionnalité.
Une action explicite de l'utilisateur est nécessaire pour activer cette fonctionnalité.

Voir aussi

Étiquettes et contributeurs liés au document

Contributeurs à cette page : SphinxKnight, tregagnon, Delapouite
Dernière mise à jour par : SphinxKnight,