Etiqueta HTML <menu>
La etiqueta HTML <menu> es un elemento del Living Standard que representa una barra de herramientas o lista de comandos. Aprende cómo difiere de <ul>.
La etiqueta <menu> representa una lista desordenada de elementos, igual que <ul>, pero con un significado semántico más específico: describe una barra de herramientas o una lista de comandos interactivos que el usuario puede ejecutar. Cada elemento se escribe como un elemento <li>.
El elemento <menu> no está obsoleto. Es un elemento actual y válido en el HTML Living Standard. Los navegadores lo renderizan de la misma manera que renderizan un <ul> — como una lista en bloque con viñetas — y tiene el mismo modelo de contenido. La diferencia es puramente semántica: usa <menu> cuando la lista es un conjunto de comandos o controles (por ejemplo, una fila de botones de barra de herramientas), y usa <ul> para listas de contenido ordinario.
Lo que sí fue eliminado del estándar es la función de menú contextual: los atributos type="context", type="toolbar", type="popup" y label, junto con el elemento complementario <menuitem>. Esos ya no existen en ningún navegador moderno. El elemento <menu> en sí sigue siendo válido — solo esos atributos adicionales y <menuitem> han sido eliminados. Para crear un menú contextual personalizado hoy en día, usa CSS y JavaScript en su lugar.
Cuándo usar <menu>
- Usa
<ul>para listas de contenido general — enlaces de navegación, listas de características, pasos o cualquier contenido con viñetas ordinario. Para la navegación del sitio, envuelve esa lista en un elemento<nav>. - Recurre a
<menu>solo cuando la intención semántica sea una barra de herramientas o una lista de comandos, como un grupo de botones de acción (Cortar, Copiar, Pegar) que actúan sobre el documento o la selección actual.
Dado que las tecnologías de asistencia aún no exponen <menu> de manera diferente a <ul>, el beneficio práctico hoy en día es la legibilidad del marcado para otros desarrolladores. Para la accesibilidad, añade un aria-label descriptivo a una barra de herramientas de comandos.
Sintaxis
La etiqueta <menu> va en pares. El contenido se escribe entre las etiquetas de apertura (<menu>) y cierre (</menu>).
Ejemplo de la etiqueta HTML <menu> con elementos <li>:
Ejemplo de la etiqueta HTML <menu>
Por defecto, los navegadores renderizan <menu> exactamente igual que un <ul> — como una lista con viñetas. Los estilos a continuación simplemente eliminan las viñetas y añaden espacio.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
menu {
display: block;
list-style: none;
padding: 0;
}
menu li {
display: block;
padding: 5px;
border: 1px solid #ccc;
margin-bottom: 2px;
}
</style>
</head>
<body>
<menu>
<li>ol - ordered list</li>
<li>ul - unordered list</li>
<li>menu - menu list</li>
</menu>
</body>
</html>Ejemplo de una barra de herramientas accesible con <menu>:
Este es el caso para el que <menu> fue diseñado: una lista de comandos. Los botones son elementos <button> reales (por lo que se puede enfocar con el teclado y se anuncian como botones), y la barra de herramientas lleva un aria-label para que los usuarios de lectores de pantalla sepan qué hace el grupo.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
menu {
display: flex;
gap: 10px;
list-style: none;
padding: 10px;
margin: 0;
background: #f0f0f0;
border: 1px solid #ccc;
}
menu button {
padding: 8px 12px;
background: #1c87c9;
color: #fff;
border: none;
cursor: pointer;
border-radius: 4px;
}
</style>
</head>
<body>
<menu aria-label="Text formatting">
<li><button type="button" onclick="alert('Bold')">Bold</button></li>
<li><button type="button" onclick="alert('Italic')">Italic</button></li>
<li><button type="button" onclick="alert('Underline')">Underline</button></li>
</menu>
</body>
</html>La diferencia entre las etiquetas <menu> y <ul>
Los elementos <menu> y <ul> se comportan de manera idéntica en el navegador: ambos renderizan una lista desordenada y ambos contienen elementos <li>. La única diferencia es la intención semántica. <menu> indica que la lista es una barra de herramientas o un conjunto de comandos, mientras que <ul> es para listas de contenido ordinario. En caso de duda, usa <ul> — es el elemento más general y es universalmente comprendido.
Atributos
El elemento <menu> no tiene atributos específicos del elemento. Los atributos antiguos type (con los valores context, toolbar y popup), label y el elemento complementario <menuitem> fueron eliminados del estándar y ya no funcionan en los navegadores.
La etiqueta <menu> soporta los Atributos globales y los Atributos de eventos. Para una barra de herramientas de comandos, añade un aria-label (un atributo global) para describir el grupo de comandos.