<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 July 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
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 Standard # the-menu-element |
Compatibilidad con navegadores
BCD tables only load in the browser