path: root/files/fr/web/html/element/menu/index.html

---
title: <menu>
slug: Web/HTML/Element/menu
tags:
  - Element
  - HTML
  - Reference
  - Web
translation_of: Web/HTML/Element/menu
---
<div>{{HTMLRef}}{{SeeCompatTable}}</div>

<p>L'élément HTML <strong><code>&lt;menu&gt;</code></strong> représente un groupe de commandes que l'utilisateur peut utiliser ou activer. Il peut être utilisé afin de créer des menus (affichés en haut d'un écran par exemple) et des menus contextuels (qui apparaissent au clic-droit ou après avoir cliqué sur un bouton).</p>

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

<p>Comme pour tous les autres éléments, on peut utiliser <a href="/fr/docs/Web/HTML/Attributs_universels">les attributs universels</a> sur <code>&lt;menu&gt;</code>.</p>

<dl>
 <dt>{{htmlattrdef("label")}} {{Deprecated_inline}}</dt>
 <dd>Le nom du menu qui est affiché pour l'utilisateur. Lorsque cet attribut est utilisé dans un menu imbriqué, c'est le nom affiché pour le sous-menu. Cet attribut doit uniquement être utilisé lorsque l'élément parent est un élément {{HTMLElement("menu")}}.</dd>
 <dt>{{htmlattrdef("type")}}</dt>
 <dd>Cet attribut indique le type de menu qui est déclaré. C'est un attribut à valeur contrainte qui peut prendre l'une des valeurs suivantes :
 <ul>
  <li><code>context</code> {{Deprecated_inline}} : Cette valeur indique que le menu est dans un état de popup et qu'il contient des commandes relatives à un autre élément. Ce menu peut être référencé via l'attribut {{htmlattrxref("menu", "button")}} d'un élément {{HTMLElement("button")}} ou via l'attribut <a href="/fr/docs/Web/HTML/Attributs_universels#attr-contextmenu"><code>contextmenu</code></a> d'un élément. Cette valeur est la valeur par défaut de l'attribut lorsque l'élément parent est également un élément <code>&lt;menu&gt;</code>.</li>
  <li><code>toolbar</code> : Cette valeur indique que le menu est une barre d'outils qui contient différentes commandes disponibles. Ces commandes peuvent être construites avec plusieurs éléments {{HTMLElement("li")}} ou avec du contenu de flux qui décrit les commandes disponibles. Cette valeur est la valeur par défaut de l'attribut.</li>
 </ul>
 </dd>
</dl>

<h2 id="Notes_d'utilisation">Notes d'utilisation</h2>

<ul>
 <li>Les éléments {{HTMLElement("menu")}} et {{HTMLElement("ul")}} représentent tous les deux une liste non-ordonnées d'éléments. {{HTMLElement("ul")}} doit être utilisés pour des éléments qui doivent uniquement être affichés alors que {{HTMLElement("menu")}} est conçu pour des éléments interactifs.</li>
 <li><strong>Un menu contextuel</strong> se compose d'un élément <code>&lt;menu&gt;</code> qui contient des éléments {{HTMLElement("menuitem")}} dont chacun représente une option sélectionnable dans le menu. D'autres éléments <code>&lt;menu&gt;</code> peuvent être imbriqués afin de créer des sous-menus et l'élément {{HTMLElement("hr")}} peut être utilisé afin d'ajouter des séparateurs. Les menus contextuels sont associés à un élément d'u document au travers de son attribut {{htmlattrxref("contextmenu")}}. Lorsqu'il s'agit d'un bouton de menu, c'est l'attribut {{htmlattrxref("menu", "button")}} de {{HTMLElement("button")}} qui décrit ce lien.</li>
 <li><strong>Les menus de barre d'outils </strong>se composent d'un élément <code>&lt;menu&gt;</code> dont le contenu est décrit avec des éléments {{HTMLElement("li")}} qui forment une liste non-ordonnée ou avec du <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_de_flux">contenu de flux</a> qui décrit les commandes et les options disponibles.</li>
 <li>Cet élément a été déprécié en HTML4 mais fut réintroduit dans la spécification HTML5.1 et dans le standard évolutif HTML.</li>
</ul>

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

<h3 id="Menu_contextuelDeprecated_inline">Menu contextuel{{Deprecated_inline}}</h3>

<p>{{Deprecated_header}}</p>

<h4 id="HTML">HTML</h4>

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

&lt;menu type="context" id="popup-menu"&gt;
  &lt;menuitem&gt;Action&lt;/menuitem&gt;
  &lt;menuitem&gt;Une autre action&lt;/menuitem&gt;
  &lt;hr&gt;
  &lt;menuitem&gt;Une action après un séparateur&lt;/menuitem&gt;
&lt;/menu&gt;
</pre>

<h4 id="CSS">CSS</h4>

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

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

<p>{{EmbedLiveSample('Menu_contextuel', '100%', '80')}}</p>

<h3 id="Bouton_de_menu">Bouton de menu</h3>

<div class="warning">
<p><strong>Attention :</strong> Les boutons de menu n'ont pas encore été implémentés dans les navigateurs et {{HTMLElement("menuitem")}} est désormais obsolète.</p>
</div>

<h4 id="HTML_2">HTML</h4>

<pre class="brush: html">&lt;!-- Un bouton qui affiche un menu lorsqu'on clique dessus. --&gt;
&lt;button type="menu" menu="popup-menu"&gt;
  Dérouler
&lt;/button&gt;

&lt;menu type="context" id="popup-menu"&gt;
  &lt;menuitem&gt;Action&lt;/menuitem&gt;
  &lt;menuitem&gt;Une autre action&lt;/menuitem&gt;
  &lt;hr&gt;
  &lt;menuitem&gt;Une action après un séparateur&lt;/menuitem&gt;
&lt;/menu&gt;
</pre>

<h4 id="Résultat_2">Résultat</h4>

<p>{{EmbedLiveSample('Bouton_de_menu', '100%', '50')}}</p>

<h3 id="Barre_d’outils_experimental_inline">Barre d’outils {{experimental_inline}}</h3>

<div class="warning">
<p><strong>Attention : </strong>Les menus sous forme de barres d'outils n'ont pas encore été implémentés dans les navigateurs.</p>
</div>

<h4 id="HTML_3">HTML</h4>

<pre class="brush: html">&lt;!-- Un menu pour un éditeur basique
     avec deux boutons de menu. --&gt;
&lt;menu type="toolbar"&gt;
  &lt;li&gt;
    &lt;button type="menu" menu="file-menu"&gt;Fichier&lt;/button&gt;
    &lt;menu type="context" id="file-menu"&gt;
      &lt;menuitem label="Nouveau" onclick="newFile()"&gt;
      &lt;menuitem label="Enregistrer" onclick="saveFile()"&gt;
    &lt;/menu&gt;
  &lt;/li&gt;
  &lt;li&gt;
    &lt;button type="menu" menu="edit-menu"&gt;Éditer&lt;/button&gt;
    &lt;menu type="context" id="edit-menu"&gt;
      &lt;menuitem label="Couper" onclick="cutEdit()"&gt;
      &lt;menuitem label="Copier" onclick="copyEdit()"&gt;
      &lt;menuitem label="Coller" onclick="pasteEdit()"&gt;
    &lt;/menu&gt;
  &lt;/li&gt;
&lt;/menu&gt;
</pre>

<h4 id="Résultat_3">Résultat</h4>

<p>{{EmbedLiveSample("Barre_d’outils", '100%', '100')}}</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><a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_de_flux">Contenu de flux</a> et <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_tangible">contenu tangible</a> si le menu est une liste (l'état par défaut, sauf si l'élément parent est lui-même un élément <code>&lt;menu&gt;</code> auquel cas le menu est dans un état contextuel).</td>
  </tr>
  <tr>
   <th scope="row">Contenu autorisé</th>
   <td>Si le menu est une liste : du <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_de_flux">contenu de flux</a> ou zéro ou plusieurs éléments {{HTMLElement("li")}}, {{HTMLElement("script")}} et {{HTMLElement("template")}}.<br>
    Si le menu est dans un menu contextuel : zéro ou plusieurs éléments {{HTMLElement("menu")}}, {{HTMLElement("menuitem")}}, {{HTMLElement("hr")}}, {{HTMLElement("script")}} et {{HTMLElement("template")}}.</td>
  </tr>
  <tr>
   <th scope="row">Omission de balises</th>
   <td>{{no_tag_omission}}</td>
  </tr>
  <tr>
   <th scope="row">Parents autorisés</th>
   <td>Tout élément qui accepte du <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_de_flux">contenu de flux</a>.</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("HTMLMenuElement")}}</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", "grouping-content.html#the-menu-element", "&lt;menu&gt;")}}</td>
   <td>{{Spec2("HTML WHATWG")}}</td>
   <td>Aucune modification depuis la dernière dérivation, {{SpecName("HTML5.3")}}</td>
  </tr>
  <tr>
   <td>{{SpecName("HTML5.3", "grouping-content.html#the-menu-element", "&lt;menu&gt;")}}</td>
   <td>{{Spec2("HTML5.3")}}</td>
   <td>Aucune modification.</td>
  </tr>
  <tr>
   <td>{{SpecName("HTML5.2", "grouping-content.html#the-menu-element", "&lt;menu&gt;")}}</td>
   <td>{{Spec2("HTML5.2")}}</td>
   <td>Dérivation {{SpecName("HTML WHATWG")}}, suppression du type <code>context</code>.</td>
  </tr>
  <tr>
   <td>{{SpecName("HTML5.1", "interactive-elements.html#the-menu-element", "&lt;menu&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.menu")}}</p>

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

<ul>
 <li>Les autres éléments HTML relatifs aux listes :
  <ul>
   <li>{{HTMLElement("ol")}}</li>
   <li>{{HTMLElement("ul")}}</li>
   <li>{{HTMLElement("li")}}</li>
   <li>{{HTMLElement("hr")}}</li>
   <li>{{HTMLElement("dir")}} {{obsolete_inline}}</li>
  </ul>
 </li>
 <li>L'attribut universel <a href="/fr/docs/Web/HTML/Attributs_universels#attr-contextmenu"><code>contextmenu</code></a> qui peut être utilisé sur un élément et qui fait référence à l'attribut <code>id</code> d'un élément <code>menu</code> avec <code>context</code> qui vaut {{htmlattrxref("type","menu",'type="context"')}}.</li>
</ul>