<menu> : l'élément de menu
Baseline
Widely available
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>).
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
<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. Si au moins un enfant du menu est un élément <li> : contenu tangible.
|
|---|---|
| Contenu autorisé | Zéro ou plusieurs occurrences de <li>, <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ô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 |