La Etiqueta MENU

La etiqueta <menu> define una lista de comandos o acciones que el usuario puede realizar. Es un elemento semántico pensado para menús interactivos, como:

• Barras de herramientas.

• Menús contextuales (ej: al hacer clic derecho).

• Listas de opciones en aplicaciones web.

Características clave:

• Se diferencia de <ul> (listas no ordenadas) en que <menu> está orientado a acciones.

• En HTML5, se usa junto con <li> y elementos interactivos como <button> o <a>.

• Es compatible con navegadores modernos, pero su uso requiere CSS/JS para funcionalidad avanzada.

Sintaxis básica

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

Ejemplos prácticos

Barra de herramientas básica

Crea una barra con acciones usando <menu> y estilos CSS:

<menu class="toolbar">
  <li><button onclick="copiarTexto()">Copiar</button></li>
  <li><button onclick="pegarTexto()">Pegar</button></li>
  <li><button onclick="guardar()">Guardar</button></li>
</menu>

<style>
  .toolbar {
    list-style: none;
    padding: 0;
    display: flex;
    gap: 10px;
    background: #f0f0f0;
    padding: 10px;
    border-radius: 8px;
  }
  .toolbar button {
    padding: 8px 12px;
    cursor: pointer;
  }
</style>

Menú contextual personalizado (con JavaScript)

Crea un menú que aparezca al hacer clic derecho:

<div id="area-contexto" style="padding: 50px; border: 1px solid #ccc;">
  Haz clic derecho aquí.
</div>

<menu id="menu-contextual" hidden>
  <li><button onclick="editar()">Editar</button></li>
  <li><button onclick="eliminar()">Eliminar</button></li>
</menu>

<script>
  const area = document.getElementById('area-contexto');
  const menu = document.getElementById('menu-contextual');

  area.addEventListener('contextmenu', (e) => {
    e.preventDefault();
    menu.style.left = `${e.clientX}px`;
    menu.style.top = `${e.clientY}px`;
    menu.hidden = false;
  });

  document.addEventListener('click', () => {
    menu.hidden = true;
  });
</script>

<style>
  #menu-contextual {
    position: fixed;
    background: white;
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 8px 0;
    list-style: none;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
  }
  #menu-contextual button {
    width: 100%;
    padding: 8px 16px;
    text-align: left;
    background: none;
    border: none;
    cursor: pointer;
  }
  #menu-contextual button:hover {
    background: #f0f0f0;
  }
</style>

Atributos importantes

• type: Define el tipo de menú (en desuso en HTML5, pero originalmente podía ser context o toolbar).

• label: Nombre del menú (para menús anidados o accesibilidad).

Errores comunes

Usar <menu> como lista normal:
Evita reemplazar <ul> o <ol> con <menu> si no hay acciones involucradas.

<!-- Incorrecto -->
<menu>
  <li>Manzana</li>
  <li>Plátano</li>
</menu>

Ignorar la accesibilidad:
Los lectores de pantalla necesitan roles ARIA para interpretar el menú:

<menu role="toolbar">
  <li role="menuitem"><button>...</button></li>
</menu>

Mejores prácticas

1. Combina con ARIA:
   Usa roles como toolbar, menubar, o menuitem para mejorar la accesibilidad.

2. Estiliza con CSS:
   Personaliza el diseño para que se vea como un menú interactivo.

3. Usa JavaScript para funcionalidad:
   Implementa eventos como click o keydown para manejar acciones.

4. Alternativas modernas:
   Para menús complejos, considera usar <div> con ARIA o componentes de librerías como React.

Limitaciones

• Compatibilidad:
  Algunas propiedades (como menús contextuales nativos con type="context") están obsoletas o no son soportadas.

• Funcionalidad básica:
  <menu> solo estructura el contenido; la interacción requiere JavaScript.

Casos de uso reales

• Editores de texto: Barras de formato (negrita, cursiva).

• Aplicaciones web: Menús de acciones rápidas (eliminar, compartir).

• Paneles de administración: Acceso a funciones comunes.

Conclusión

La etiqueta <menu> es una herramienta semántica para crear listas de acciones interactivas en HTML. Aunque su uso es menos común que otros elementos, es valiosa en aplicaciones web complejas donde la claridad semántica y la accesibilidad son prioritarias. ¡Experimenta con ella en tus proyectos!