<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 elementoHTML<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>  <a href="#">NASA’s Webb Delivers Deepest Infrared Image of Universe Yet</a>  <menu>    <li><button>Save for later</button></li>    <li><button>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 losatributos 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

html

<menu>  <li><button>Copiar</button></li>  <li><button>Cortar</button></li>  <li><button>Pegar</button></li></menu>

Tenga en cuenta que esto no es funcionalmente diferente de:

html

<ul>  <li><button>Copiar</button></li>  <li><button>Cortar</button></li>  <li><button>Pegar</button></li></ul>

CSS

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`<li>`:contenido palpable.
Contenido permitido	Cero o más ocurrencias de`<li>`,`<script>`, ó`<template>`.
Omisión de etiqueta	Ninguna, tanto la etiqueta inicial como la final son obligatorias.
Padres permitidos	Cualquier elemento que aceptecontenido de flujo.
Rol ARIA implícito	`lista`
Roles ARIA permitidos	`directory`,`group`,`listbox`,`menu`,`menubar`,`none`,`presentation`,`radiogroup`,`tablist`,`toolbar` ó`tree`
Interfaz DOM	`HTMLMenuElement`