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

Baseline Large disponibilité

Cette fonctionnalité est bien établie et fonctionne sur de nombreux appareils et versions de navigateurs. Elle est disponible sur tous les navigateurs depuis juillet 2015.

L'élément HTML <menu> est une alternative sémantique à <ul>, mais il est traité par les navigateurs (et exposé dans l'arbre d'accessibilité) comme identique à <ul>. Il représente une liste non ordonnée d'éléments (représentés par des éléments <li>).

Dans cet article

Exemple interactif

<div class="news">
  <a href="#"
    >Le télescope Webb de la NASA livre l'image infrarouge la plus profonde de
    l'univers à ce jour</a
  >
  <menu>
    <li><button id="save">Enregistrer pour plus tard</button></li>
    <li><button id="share">Partager cette actualité</button></li>
  </menu>
</div>

.news {
  background-color: bisque;
  padding: 1em;
  border: solid thin black;
}

menu {
  list-style-type: none;
  display: flex;
  padding: 0;
  margin-bottom: 0;
  gap: 1em;
}

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.

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 autorisé Omission de balises Parents autorisés Rôle ARIA implicite Rôles ARIA autorisés Interface DOM

Contenu de flux. Si au moins un enfant du menu est un élément <li> : contenu tangible.

Zéro ou plusieurs occurrences de <li>, <script> et <template>.

Aucune, la balise d'ouverture et la balise de fermeture sont obligatoires.

Tout élément qui accepte du contenu de flux.

list

directory, group, listbox, menu, menubar, none, presentation, radiogroup, tablist, toolbar ou tree

HTMLMenuElement

Les autres éléments HTML relatifs aux listes : <ol>, <ul> et <li>.

Aider à améliorer MDN

Cette page vous a-t-elle été utile ?

Oui Non

Apprendre à contribuer

Cette page a été modifiée le 25 avr. 2026 par les contributeur·ice·s du MDN.

Voir cette page sur GitHub • Signaler un problème avec ce contenu