---
title: <menuitem>
slug: Web/HTML/Element/menuitem
tags:
  - Déprécié
  - Element
  - HTML
  - Reference
  - Web
translation_of: Web/HTML/Element/menuitem
---
<p>{{HTMLRef}}{{Deprecated_Header("HTML5.2")}}</p>

<p>L'élément HTML <strong><code>&lt;menuitem&gt;</code></strong> représente une commande qu'un utilisateur peut utiliser via un menu contextuel ou un menu rattaché à un bouton.</p>

<p>Une commande peut être définie explicitement, avec un texte et éventuellement 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.</p>

<h2 id="Attributs">Attributs</h2>

<p>Cet élément inclut également <a href="/fr/docs/Web/HTML/Attributs_universels">les attributs universels</a> et notamment <code>title</code> qui peut être utilisé afin de décrire une commande ou pour fournir des indications quant à l'utilisation de celle-ci.</p>

<dl>
 <dt>{{htmlattrdef("checked")}}</dt>
 <dd>Un attribut booléen qui indique si la commande est sélectionné. Cet attribut peut uniquement être utilisé lorsque l'attribut <code>type</code> vaut <code>checkbox</code> ou <code>radio</code>.</dd>
 <dt>{{htmlattrdef("command")}}</dt>
 <dd>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 <code>checked</code>, <code>disabled</code>, <code>icon</code>, <code>label</code>, <code>radiogroup</code> ou <code>type</code> sont utilisés.</dd>
 <dt>{{htmlattrdef("default")}}</dt>
 <dd>Un attribut booléen qui indique la commande par défaut du menu.</dd>
 <dt>{{htmlattrdef("disabled")}}</dt>
 <dd>Un attribut booléen qui indique que la commande n'est pas disponible dans l'état actuel. On notera que <code>disabled</code> est sémantiquement différent de <code>hidden</code>.</dd>
 <dt>{{htmlattrdef("icon")}}</dt>
 <dd>Une URL vers image qui représente la commande.</dd>
 <dt>{{htmlattrdef("label")}}</dt>
 <dd>Le nom de la commande affiché pour l'utilisateur. Cet attribut est obligatoire lorsque l'attribut <code>command</code> est absent.</dd>
 <dt>{{htmlattrdef("radiogroup")}}</dt>
 <dd>Cet attribut indique le nom d'un groupe de commandes étant des boutons radio. Cet attribut peut uniquement être utilisé lorsque <code>type</code> vaut <code>radio</code>.</dd>
 <dt>{{htmlattrdef("type")}}</dt>
 <dd>Cet attribut indique le type de commande dans le menu. C'est un attribut à valeur contrainte qui peut prendre une des valeurs suivantes :
 <ul>
  <li><code>command</code> : une commande associée à une action donnée. C'est la valeur par défaut de l'attribut.</li>
  <li><code>checkbox</code> : une commande qui peut avoir un état parmi deux états différents.</li>
  <li><code>radio</code> : une commande qui représente une sélection au sein d'un groupe de commandes qui sont des boutons radio.</li>
 </ul>
 </dd>
</dl>

<h2 id="Exemples">Exemples</h2>

<h3 id="HTML">HTML</h3>

<pre class="brush: html">&lt;!-- Un élément &lt;div&gt; avec un menu contextuel --&gt;
&lt;div contextmenu="popup-menu"&gt;
  Effectuez un clic-droit pour voir le menu contextuel
&lt;/div&gt;

&lt;menu type="context" id="popup-menu"&gt;
  &lt;menuitem type="checkbox" checked&gt;Une case à cocher&lt;/menuitem&gt;
  &lt;hr&gt;
  &lt;menuitem type="command" label="Cette commande ne fait rien" icon="https://developer.cdn.mozilla.net/static/img/favicon144.png"&gt;
    Les commandes n'affichent pas leurs contenus.
  &lt;/menuitem&gt;
  &lt;menuitem type="command" label="Cette commande contient du JavAScript" onclick="alert('command clicked')"&gt;
    Les commandes n'affichent pas leurs contenus.
  &lt;/menuitem&gt;
  &lt;hr&gt;
  &lt;menuitem type="radio" radiogroup="group1"&gt;Bouton radio 1&lt;/menuitem&gt;
  &lt;menuitem type="radio" radiogroup="group1"&gt;Bouton radio 2&lt;/menuitem&gt;
&lt;/menu&gt;
</pre>

<h3 id="CSS">CSS</h3>

<pre class="brush: css">div {
  width: 300px;
  height: 80px;
  background-color: lightgreen;
}
</pre>

<h3 id="Résultat">Résultat</h3>

<p>{{EmbedLiveSample('Exemples', '300', '80')}}</p>

<h2 id="Résumé_technique">Résumé technique</h2>

<table class="properties">
 <tbody>
  <tr>
   <th scope="row"><a href="/fr/docs/Web/HTML/Catégorie_de_contenu">Catégories de contenu</a></th>
   <td>Aucune.</td>
  </tr>
  <tr>
   <th scope="row">Contenu autorisé</th>
   <td>Aucun, c'est un élément vide.</td>
  </tr>
  <tr>
   <th scope="row">Omission de balises</th>
   <td>Cet élément doit avoir une balise ouvrante et ne doit pas avoir de balise fermante.</td>
  </tr>
  <tr>
   <th scope="row">Parents autorisés</th>
   <td>Un élément {{HTMLElement("menu")}} lorsque son attribut vaut <code>type</code> ou que cet élément <code>&lt;menu&gt;</code> est lui même le fils d'un élément <code>&lt;menu</code>&gt;.</td>
  </tr>
  <tr>
   <th scope="row">Rôles ARIA autorisés</th>
   <td>Aucun.</td>
  </tr>
  <tr>
   <th scope="row">Interface DOM</th>
   <td>{{domxref("HTMLMenuItemElement")}}</td>
  </tr>
 </tbody>
</table>

<h2 id="Spécifications">Spécifications</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Spécification</th>
   <th scope="col">État</th>
   <th scope="col">Commentaires</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName("HTML WHATWG", "obsolete.html#menuitem", "&lt;menuitem&gt;")}}</td>
   <td>{{Spec2("HTML WHATWG")}}</td>
   <td>Aucune modification depuis la dernière dérivation {{SpecName("HTML5.2")}}</td>
  </tr>
  <tr>
   <td>{{SpecName("HTML5.2", "obsolete.html#elementdef-menuitem", "&lt;menuitem&gt;")}}</td>
   <td>{{Spec2("HTML5.2")}}</td>
   <td>Dérivation de {{SpecName("HTML WHATWG")}}, rendue obsolète.</td>
  </tr>
  <tr>
   <td>{{SpecName("HTML5.1", "interactive-elements.html#the-menuitem-element", "&lt;menuitem&gt;")}}</td>
   <td>{{Spec2("HTML5.1")}}</td>
   <td>Dérivation de {{SpecName("HTML WHATWG")}}, définition initiale.</td>
  </tr>
 </tbody>
</table>

<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>

<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>

<p>{{Compat("html.elements.menuitem")}}</p>

<h2 id="Voir_aussi">Voir aussi</h2>

<ul>
 <li>{{HTMLElement("menu")}}</li>
 <li><a href="https://hacks.mozilla.org/2011/11/html5-context-menus-in-firefox-screencast-and-code/">Les menus contextuels HTML5 dans Firefox</a></li>
</ul>