<menu>

Description

L’élément <menu> est sémantiquement un <ul> adapté aux listes de commandes ou boutons interactifs (barre d’outils, menu d’actions). Il contient des <li> avec des <button> ou des liens. L’attribut type (pour les menus contextuels et barres d’outils) a été supprimé de la spécification HTML5 — <menu> est aujourd’hui essentiellement identique à <ul> sur le plan du rendu.

Syntaxe

<menu>
  <li><button type="button">Copier</button></li>
  <li><button type="button">Coller</button></li>
  <li><button type="button">Supprimer</button></li>
</menu>

Exemples

Barre d’actions :

<menu aria-label="Actions sur l'article">
  <li>
    <button type="button">
      <svg aria-hidden="true">…</svg>
      Éditer
    </button>
  </li>
  <li>
    <button type="button">
      <svg aria-hidden="true">…</svg>
      Partager
    </button>
  </li>
  <li>
    <button type="button" class="danger">
      <svg aria-hidden="true">…</svg>
      Supprimer
    </button>
  </li>
</menu>

Notes

<menu> vs <ul> : <menu> exprime l’intention d’une liste de commandes interactives, là où <ul> est générique. Le rendu est identique. Utiliser <menu> pour les barres d’outils et listes de boutons d’action pour exprimer cette intention sémantique.

Menus contextuels supprimés : <menu type="context"> et contextmenu attribute permettaient de créer des menus contextuels natifs — cette fonctionnalité a été retirée des spécifications et des navigateurs.