<menu>: El elemento menú
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since julio de 2015.
El elemento HTML <menu> se describe en la especificación HTML como una alternativa semántica a <ul>, pero los navegadores lo tratan (y lo exponen a través del árbol de accesibilidad) como no diferente de <ul>. Representa una lista desordenada de elementos (que están representados por elementos <li>).
Pruébalo
<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; } Atributos
Este elemento solo incluye los atributos globales.
Notas de uso
Los elementos <menu> y <ul> representan una lista desordenada de elementos. La diferencia clave es que <ul> contiene principalmente elementos para mostrar, mientras que <menu> estaba destinado a elementos interactivos. El elemento <menuitem> relacionado ha quedado obsoleto.
Nota: En las primeras versiones de la especificación HTML, el elemento <menu> tenía un caso de uso adicional como menú contextual. Esta funcionalidad se considera obsoleta y no está en la especificación.
Ejemplo
Barra de herramientas
En este ejemplo, se usa un <menú> para crear una barra de herramientas para una aplicación de edición.
HTML
<menu> <li><button onclick="copy()">Copiar</button></li> <li><button onclick="cut()">Cortar</button></li> <li><button onclick="paste()">Pegar</button></li> </menu> Tenga en cuenta que esto no es funcionalmente diferente de:
<ul> <li><button onclick="copy()">Copiar</button></li> <li><button onclick="cut()">Cortar</button></li> <li><button onclick="paste()">Pegar</button></li> </ul> CSS
menu, ul { display: flex; list-style: none; padding: 0; width: 400px; } li { flex-grow: 1; } button { width: 100%; } Resultado
Resumen técnico
| Categorías de contenido | Contenido de flujo. Si los hijos del elemento incluyen al menos un elemento |
|---|---|
| Contenido permitido | Cero o más ocurrencias de |
| Omisión de etiqueta | Ninguna, tanto la etiqueta inicial como la final son obligatorias. |
| Padres permitidos | Cualquier elemento que acepte contenido de flujo. |
| Rol ARIA implícito | lista |
| Roles ARIA permitidos | directory, group, listbox, menu, menubar, none, presentation, radiogroup, tablist, toolbar ó tree |
| Interfaz DOM | HTMLMenuElement |
Especificaciones
| Specification |
|---|
| HTML # the-menu-element |