Ultimenu
Un módulo de mega menú que crea regiones dinámicas basadas en elementos del menú, permitiendo colocar bloques dentro de los desplegables/flyouts del menú.
ultimenu
Install
composer require 'drupal/ultimenu:^3.0'
Overview
Ultimenu es una solución de mega menú extremadamente simple que crea regiones dinámicas de Drupal basadas en los menús disponibles. A diferencia de los mega menús tradicionales, Ultimenu adopta un enfoque único donde un bloque Ultimenu se basa en un menú, y las regiones Ultimenu se basan en los elementos del menú.
El resultado es un bloque que contiene regiones que contienen bloques, en contraste con: una región contiene bloques. Esta arquitectura permite a los constructores de sitios incrustar casi cualquier cosa en los flyouts del menú, incluyendo views, panels, bloques, slideshows y cualquier otro contenido compatible con bloques.
El módulo gestiona la activación de bloques Ultimenu, regiones y una biblioteca de skins, mientras deja la gestión de bloques, menús y regiones al core de Drupal. Esto proporciona máxima flexibilidad con mínima complejidad.
Las características principales incluyen: menús móviles off-canvas con múltiples skins de animación, contenido de flyout cargado por AJAX para optimización del rendimiento, sistema de skins personalizable con auto-descubrimiento del theme, soporte para títulos de menú con iconos, submenús colapsables, cabeceras fijas, y soporte multilingüe completo con claves de región basadas en hash.
Features
- Múltiples instancias de bloques Ultimenu basados en cualquier menú del sistema o personalizado disponible
- Regiones dinámicas basadas en elementos del menú que pueden activarse sin tocar archivos .info.yml
- Menú off-canvas con 7 skins de animación (bottomsheet, pushdown, scalein, slidein, slideover, zoomin)
- Regiones flyout cargadas por AJAX para mejorar el rendimiento con contenidos de menú masivos
- Skins CSS personalizables con auto-descubrimiento desde el directorio css/ultimenu del theme predeterminado
- Soporte para títulos de menú con iconos y descripciones usando prefijos fa-* o icon-*
- Soporte de submenús colapsables para estructuras de menú anidadas
- Múltiples orientaciones de flyout: horizontal hacia abajo/arriba, vertical hacia izquierda/derecha
- Claves de región basadas en hash para estabilidad en sitios multilingües
- Interacciones de menú basadas en caret como alternativa a los estados hover
- Soporte de cabecera fija/sticky para menús con hover
- Integración con el módulo Context para colocación de bloques y visibilidad de regiones
- Animación pura CSS3 sin dependencias de JavaScript para las interacciones principales
- Renderizado de descripción del menú con posición configurable (arriba o abajo del título)
- Opciones de clase CSS: clase de título, clase mlid, clase hash y clase contador en elementos del menú
Use Cases
Mega Menú para Sitio Web Corporativo
Crea un mega menú sofisticado para un sitio web corporativo habilitando el menú Main navigation como bloque Ultimenu. Colócalo en la región del header y añade bloques de Views mostrando productos destacados, noticias recientes o categorías de servicios a la región flyout de cada elemento de menú. Usa la orientación horizontal-hacia-abajo con un skin personalizado que coincida con la marca corporativa.
Navegación de Categorías E-commerce
Construye navegación de categorías de productos creando elementos de menú para cada categoría y habilitando sus regiones Ultimenu. Añade bloques específicos de categoría mostrando productos destacados, logos de marcas o banners promocionales. Habilita la carga AJAX para flyouts para mejorar el rendimiento de carga inicial con catálogos grandes.
Navegación Off-Canvas Mobile-First
Implementa navegación off-canvas responsive habilitando la opción offcanvas en el bloque Ultimenu. Configura el selector canvas_off (ej., #header) y los selectores canvas_on para las áreas de contenido principal. Elige entre skins de animación como scalein o slideover para transiciones suaves del menú móvil. Usa la opción hamburger para comportamiento consistente móvil/escritorio.
Navegación de Sitio Multilingüe
Configura regiones de mega menú estables para sitios multilingües habilitando 'Use shortened HASH for Ultimenu region key' en los extras. Esto previene la pérdida de regiones cuando los títulos de menú se traducen. Configura la integración con Menu Manipulator para filtrar elementos de menú por el idioma actual.
Menú de Categorías en Sidebar con Submenús
Crea un mega menú vertical en el sidebar colocando el bloque Ultimenu en una región de sidebar con orientación vertical-hacia-derecha. Habilita la opción 'Render submenu' para mostrar automáticamente los elementos de menú hijos dentro de los flyouts. Habilita 'Collapsible submenu' para navegación estilo acordeón en móvil.
Mega Menú de Footer con Información de Contacto
Construye un mega menú de footer informativo usando orientación horizontal-hacia-arriba. Coloca bloques con información de contacto, enlaces de redes sociales, formularios de suscripción a newsletter y views de mapa del sitio en la región flyout de cada elemento de menú. Usa un skin oscuro para coincidir con las convenciones de diseño de footer.
Tips
- Usa claves de región basadas en hash desde el principio para cualquier sitio que pueda volverse multilingüe o donde los editores puedan cambiar títulos de menú
- Prueba la funcionalidad off-canvas con los themes Bartik u Olivero primero para entender la estructura HTML requerida antes de aplicar a themes personalizados
- Coloca las clases is-ultimenu__canvas-off e is-ultimenu__canvas-on directamente en las plantillas Twig de tu theme para evitar FOUC (flash de contenido sin estilos)
- Para títulos de menú con iconos, usa el campo Description con prefijos icon-* o fa-* para mantener las interfaces de administración limpias mientras muestras iconos en el frontend
- Habilita la carga AJAX solo para flyouts con contenido pesado como Views o bloques complejos para equilibrar rendimiento y experiencia de usuario
- Copia las definiciones de región generadas desde la sección de extras al archivo .info.yml de tu theme para almacenamiento permanente de las regiones Ultimenu
- Usa las variables CSS definidas en ultimenu.css y ultimenu.media-query.css para personalización fácil de breakpoints y espaciado
Technical Details
Admin Pages 1
/admin/structure/ultimenu
Página principal de configuración para gestionar bloques, regiones y ajustes globales de Ultimenu. Crea bloques de mega menú basados en menús existentes y habilita/deshabilita regiones dinámicas basadas en elementos del menú.
Permissions 1
Hooks 2
hook_ultimenu_attach_alter
Permite a los módulos alterar las libraries adjuntas y drupalSettings para los bloques Ultimenu
hook_ultimenu_build_alter
Permite a los módulos alterar el array de construcción de Ultimenu antes del renderizado
Troubleshooting 7
Limpia todas las cachés en /admin/config/development/performance. Las regiones se registran dinámicamente y requieren limpiar la caché para que el theme las reconozca.
Habilita 'Use shortened HASH for Ultimenu region key' en la configuración de extras. Esto crea claves de región estables basadas en un hash en lugar del título traducible.
Verifica que los selectores CSS canvas_off y canvas_on son correctos para tu theme. El elemento off-canvas y los elementos on-canvas deben ser hermanos al mismo nivel del DOM. Prueba primero con el theme Bartik usando los valores predeterminados.
Asegúrate de que al menos un bloque visible está colocado en la región Ultimenu. Verifica los ajustes de visibilidad del bloque y los permisos de rol de usuario. Para visibilidad basada en ruta, verifica que la ruta actual coincide con las reglas de visibilidad del bloque.
Habilita 'Force remove Ultimenu region stored in theme .info.yml' en los extras para que la configuración de Ultimenu tenga precedencia sobre las regiones definidas en el theme.
Asegúrate de haber habilitado menús en 'Toggle Ultimenu blocks' y guardado. Limpia las cachés y busca la categoría Ultimenu en la colocación de bloques.
Habilita 'Render submenu' en la configuración del bloque Ultimenu. Adicionalmente, asegúrate de que 'Show as expanded' está marcado en el elemento de menú padre en la administración de menús.
Security Notes 4
- El permiso 'administer ultimenu' está marcado como acceso restringido y solo debe otorgarse a administradores de confianza
- Las rutas de skin personalizadas se validan para asegurar que el directorio existe antes de guardarse
- La entrada de usuario en la configuración (ruta de skins, texto de fallback, max-width AJAX, clases de iconos) se sanitiza con strip_tags y Xss::filter
- El acceso al endpoint AJAX está controlado por permisos individuales del bloque - el acceso de cada bloque se verifica antes de devolver el contenido