MDN’s new design is in Beta! A sneak peek: https://blog.mozilla.org/opendesign/mdns-new-design-beta/

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

Catégories de contenu Contenu de flux et contenu tangible si le menu est une liste (l'état par défaut, sauf si l'élément parent est lui-même un élément <menu> auquel cas le menu est dans un état contextuel).
Contenu autorisé Si le menu est une liste : du contenu de flux ou zéro ou plusieurs éléments <li>, <script> et <template>.
Si le menu est dans un menu contextuel : zéro ou plusieurs éléments <menu>, <menuitem>, <hr>, <script> et <template>.
Omission de balises Aucune, la balise d'ouverture et la balise de fermeture sont obligatoires
Parents autorisés Tout élément qui accepte du contenu de flux.
Rôles ARIA autorisés Aucun.
Interface DOM HTMLMenuElement

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

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

Attention : Les boutons de menu n'ont pas encore été implémentés dans les navigateurs.

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

Attention : Les menus sous forme de barres d'outils n'ont pas encore été implémentés dans les navigateurs.

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

Spécification État Commentaires
WHATWG HTML Living Standard
La définition de '<menu>' dans cette spécification.
Standard évolutif  
HTML5.1
La définition de '<menu>' dans cette spécification.
Recommendation Définition initiale.

Compatibilité des navigateurs

Fonctionnalité Chrome Firefox (Gecko) Edge Internet Explorer Opera Safari
type="context" (Oui)[1] 8 (8)[2] (Oui) Pas de support (Oui)[3] Pas de support
type="toolbar" Pas de support Pas de support Pas de support Pas de support Pas de support Pas de support
Boutons de menu Pas de support Pas de support Pas de support Pas de support Pas de support Pas de support
<hr> peut être utilisé pour les séparateurs ? 51 (51) Pas de support Pas de support ? Pas de support
Fonctionnalité Android Edge Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
type="context" Pas de support (Oui) (Oui)[4] Pas de support Pas de support Pas de support
type="toolbar" Pas de support Pas de support Pas de support Pas de support Pas de support Pas de support
Boutons de menu Pas de support Pas de support Pas de support Pas de support Pas de support Pas de support
<hr> peut être utilisé pour les séparateurs Pas de support Pas de support 51 (51) Pas de support Pas de support Pas de support

[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 :
  • 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.

Étiquettes et contributeurs liés au document

Étiquettes : 
 Contributeurs à cette page : SphinxKnight, marie-ototoi, tregagnon
 Dernière mise à jour par : SphinxKnight,