<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 juillet 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
<div class="news"> <a href="#">NASA’s Webb Delivers Deepest Infrared Image of Universe Yet</a> <menu> <li><button id="save">Save for later</button></li> <li><button id="share">Share this news</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.
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
<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 à :
<ul> <li><button onclick="copy()">Copier</button></li> <li><button onclick="cut()">Couper</button></li> <li><button onclick="paste()">Coller</button></li> </ul> 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 # the-menu-element |
Compatibilité des navigateurs
Loading…