<menu>

L'élément HTML <menu> 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).

Attributs

Comme pour tous les autres éléments, on peut utiliser les attributs universels sur <menu>.

label

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 <menu>.

type

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 :

• context : 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 menu d'un élément <button> ou via l'attribut contextmenu 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 <menu>.
• toolbar : 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 <li> ou avec du contenu de flux qui décrit les commandes disponibles. Cette valeur est la valeur par défaut de l'attribut.

Notes d'utilisation

• Les éléments <menu> et <ul> représentent tous les deux une liste non-ordonnées d'éléments. <ul> doit être utilisés pour des éléments qui doivent uniquement être affichés alors que <menu> est conçu pour des éléments interactifs.
• Un menu contextuel se compose d'un élément <menu> qui contient des éléments <menuitem> dont chacun représente une option sélectionnable dans le menu. D'autres éléments <menu> peuvent être imbriqués afin de créer des sous-menus et l'élément <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 contextmenu. Lorsqu'il s'agit d'un bouton de menu, c'est l'attribut menu de <button> qui décrit ce lien.
• Les menus de barre d'outils se composent d'un élément <menu> dont le contenu est décrit avec des éléments <li> qui forment une liste non-ordonnée ou avec du contenu de flux qui décrit les commandes et les options disponibles.
• 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.

Exemples

Menu contextuel

HTML

<!-- Un élément <div> avec un menu contextuel -->
<div contextmenu="popup-menu">
  Vous pouvez effectuer un clic-droit pour voir le menu.
</div>

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

CSS

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

Résultat

Bouton de menu

HTML

<!-- Un bouton qui affiche un menu lorsqu'on clique dessus. -->
<button type="menu" menu="popup-menu">
  Dérouler
</button>

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

Résultat

Barre d'outils

HTML

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

Résultat

Spécifications

Compatibilité des navigateurs

[1] Cette fonctionnalité est implémentée via la préférence « Fonctionnalités expérimentales de la plate-forme Web » (sous chrome://flags) et fonctionne comme un menu contextuel, pas comme un bouton.

[2] Fonctionne uniquement comme menu contextuel, pas comme un bouton.

[3] Cette fonctionnalité est implémentée via la préférence « Fonctionnalités expérimentales de la plate-forme Web » (sous chrome://flags) et fonctionne comme un menu contextuel, pas comme un bouton.

[4] Les menus imbriqués ne sont pas pris en charge.

Voir aussi

• <menuitem>
• Les autres éléments HTML relatifs aux listes :
  • <ol>
  • <ul>
  • <li>
  • <hr>
  • <dir>
• L'attribut universel contextmenu qui peut être utilisé sur un élément et qui fait référence à l'attribut id d'un élément menu avec context qui vaut type.