<menu> : l'élément de menu

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

L'élément HTML <menu> est une alternative sémantique à <ul>, mais est traité par les navigateurs, et en termes d'accessibilité comme un élément <ul>. Il représente une liste d'éléments non-ordonnée (chaque élément de la liste étant représenté par un élément <li>).

Exemple interactif

Attributs

Cet élément inclut uniquement les attributs universels.

Notes d'utilisation

Les éléments <menu> et <ul> représentent tous les deux une liste non-ordonnée d'éléments. <ul> doit être utilisés pour des éléments qui doivent uniquement être affichés alors que <menu> était initialement conçu pour des éléments interactifs.

L'élément connexe <menuitem> a été déprécié.

Note : Dans d'anciennes versions de la spécification HTML, l'élément <menu> pouvait être utilisé pour représenter un menu contextuel. Cette fonctionnalité est désormais considérée comme obsolète et ne fait plus partie de la spécification.

Exemples

Barre d'outils

Dans cet exemple, on utilise un élément <menu> afin de créer une barre d'outils pour une application d'édition.

HTML

html
<menu>
  <li><button onclick="copy()">Copier</button></li>
  <li><button onclick="cut()">Couper</button></li>
  <li><button onclick="paste()">Coller</button></li>
</menu>

On notera que, sur le plan fonctionnel, cela est équivalent à :

html
<ul>
  <li><button onclick="copy()">Copier</button></li>
  <li><button onclick="cut()">Couper</button></li>
  <li><button onclick="paste()">Coller</button></li>
</ul>

CSS

css
menu,
ul {
  display: flex;
  list-style: none;
  padding: 0;
  width: 400px;
}

li {
  flex-grow: 1;
}

button {
  width: 100%;
}

Résultat

Résumé technique

Catégories de contenu Contenu de flux et contenu tangible si au moins un enfant du menu est un élément <li>.
Contenu autorisé Zéro ou plusieurs occurrences de <li>, <script>, et <template>
Omission de balises Aucune balise ne doit être omise
Parents autorisés Tout élément qui accepte du contenu de flux.
Rôle ARIA implicite list
Rôles ARIA autorisés directory, group, listbox, menu, menubar, none, presentation, radiogroup, tablist, toolbar ou tree
Interface DOM HTMLMenuElement

Spécifications

Specification
HTML Standard
# the-menu-element

Compatibilité des navigateurs

BCD tables only load in the browser

Voir aussi

  • Les autres éléments HTML relatifs aux listes :