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

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.

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 et <menuitem> est désormais obsolète.

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
HTML Living Standard
La définition de '<menu>' dans cette spécification.
Standard évolutif Aucune modification depuis la dernière dérivation, HTML 5.2
HTML 5.2
La définition de '<menu>' dans cette spécification.
Recommendation Dérivation de HTML Living Standard, retrait de label et de type="context".
HTML 5.1
La définition de '<menu>' dans cette spécification.
Recommendation Dérivation de HTML Living Standard, définition initiale.

Compatibilité des navigateurs

Update compatibility data on GitHub
OrdinateurMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebview AndroidChrome pour AndroidEdge MobileFirefox pour AndroidOpera pour AndroidSafari pour iOSSamsung Internet
Support simple
Expérimentale
Chrome Aucun support NonEdge Support complet OuiFirefox Support complet 8IE 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 Oui
Notes
Support complet Oui
Notes
Notes Nested menus are not supported.
Opera Android Aucun support NonSafari iOS Aucun support NonSamsung Internet Android Aucun support Non
Menus on <button> element
Expérimentale
Chrome Aucun support NonEdge Aucun support NonFirefox Aucun support NonIE Aucun support NonOpera Aucun support NonSafari Aucun support NonWebView Android Aucun support NonChrome Android Aucun support NonEdge Mobile Aucun support NonFirefox Android Aucun support NonOpera Android Aucun support NonSafari iOS Aucun support NonSamsung Internet Android Aucun support Non
<hr> creates a separator
Expérimentale
Chrome ? Edge Aucun support NonFirefox Support complet 51IE Aucun support NonOpera ? Safari Aucun support NonWebView Android Aucun support NonChrome Android Aucun support NonEdge Mobile Aucun support NonFirefox Android Support complet 51Opera Android Aucun support NonSafari iOS Aucun support NonSamsung Internet Android Aucun support Non
label
Expérimentale
Chrome Aucun support NonEdge Support complet OuiFirefox Support complet 8IE Aucun support NonOpera Support complet OuiSafari Aucun support NonWebView Android Aucun support NonChrome Android Aucun support NonEdge Mobile Support complet OuiFirefox Android Support complet Oui
Notes
Support complet Oui
Notes
Notes Nested menus are not supported.
Opera Android Aucun support NonSafari iOS Aucun support NonSamsung Internet Android Aucun support Non

Légende

Support complet  
Support complet
Aucun support  
Aucun support
Compatibilité inconnue  
Compatibilité inconnue
Fonctionnalité expérimentale. Celle-ci peut être amenée à changer par la suite.
Fonctionnalité expérimentale. Celle-ci peut être amenée à changer par la suite.
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

  • 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, Dralyab, marie-ototoi, tregagnon
Dernière mise à jour par : SphinxKnight,