Menu Link Attributes
Permite añadir atributos HTML personalizados a los enlaces de menú, incluyendo tanto la etiqueta anchor como el elemento de lista contenedor.
menu_link_attributes
Install
composer require 'drupal/menu_link_attributes:8.x-1.6'
Overview
Menu Link Attributes es un módulo de Drupal que mejora la gestión de enlaces de menú al permitir a los administradores añadir atributos HTML personalizados a los enlaces de menú. Esto es particularmente útil para añadir clases CSS, destinos de enlace, atributos ARIA o cualquier otro atributo HTML personalizado a los elementos de menú sin modificar el código.
El módulo proporciona un sistema de configuración flexible basado en YAML donde los administradores pueden definir qué atributos deben estar disponibles en los formularios de enlaces de menú. Cada atributo puede configurarse con una etiqueta, descripción, tipo de entrada (textfield, select, checkboxes, radios, managed_file) y opciones predefinidas. El módulo soporta tanto atributos a nivel de enlace (aplicados a la etiqueta <a>) como atributos a nivel de contenedor (aplicados al elemento <li> contenedor).
Por defecto, el módulo proporciona tres atributos de uso común: clases CSS para el enlace, clases CSS para el contenedor y destino del enlace. Los administradores pueden añadir fácilmente más atributos a través de la página de configuración usando sintaxis YAML.
Features
- Añadir atributos HTML personalizados a enlaces de menú a través del formulario de edición de elementos de menú
- Soporte para atributos de enlace (aplicados a la etiqueta <a>) y atributos de contenedor (aplicados al elemento <li>)
- Configuración flexible basada en YAML para definir atributos disponibles
- Múltiples tipos de entrada soportados: textfield, select, checkboxes, radios y managed_file
- Atributos predeterminados incluidos: clase de enlace, clase de contenedor y destino de enlace
- Control de acceso basado en permisos para usar y administrar atributos
- Manejo automático de atributos de clase como arrays para un renderizado HTML adecuado
- Manejo de atributos compatible con traducciones con soporte multilingüe apropiado
- Integración con el módulo YAML Editor para una edición de configuración más fácil
Use Cases
Añadir clases CSS para estilizar elementos de menú
Añada clases CSS personalizadas a los enlaces de menú para estilizar elementos específicos de manera diferente. Por ejemplo, añada una clase 'highlighted' a un elemento de menú para hacerlo destacar, o añada una clase 'external-link' a enlaces que apuntan a sitios externos. Configure el atributo 'class' (habilitado por defecto) e ingrese nombres de clase al editar elementos de menú.
Abrir enlaces en nuevas ventanas
Configure ciertos enlaces de menú para abrirse en nuevas ventanas del navegador usando el atributo target. El módulo proporciona las opciones '_blank' y '_self' por defecto. Útil para enlaces externos, documentos PDF o recursos que deberían permanecer accesibles mientras el sitio principal permanece abierto.
Añadir atributos de accesibilidad
Mejore la accesibilidad del menú añadiendo atributos ARIA. Configure atributos como 'aria-label', 'aria-describedby' o 'role' en la configuración YAML para permitir que los editores de contenido añadan mejoras de accesibilidad a elementos de menú específicos.
Estilizar contenedores de elementos de menú
Aplique clases CSS u otros atributos al elemento <li> contenedor en lugar del enlace en sí. Útil para añadir indicadores de desplegable, contenedores con estilos especiales o hooks de JavaScript. Use atributos con prefijo 'container_' o establezca 'container: true' en la configuración del atributo.
Añadir atributos data para JavaScript
Añada atributos data-* personalizados a los enlaces de menú para funcionalidad JavaScript. Por ejemplo, añada 'data-analytics-category' para seguimiento, 'data-modal-trigger' para diálogos modales, o 'data-submenu-id' para comportamiento de desplegable personalizado. Defina estos como atributos textfield en la configuración YAML.
Integración de iconos con elementos de menú
Al usar bibliotecas de iconos, añada clases de iconos a los elementos de menú. Configure un atributo 'data-icon' o clase de icono que los editores de contenido puedan usar para especificar qué icono debería aparecer con cada elemento de menú, permitiendo mejoras visuales sin cambios de código.
Tips
- Instale el módulo YAML Editor para una mejor experiencia de edición al configurar atributos
- Los atributos de contenedor pueden crearse ya sea prefijando el nombre del atributo con 'container_' o añadiendo 'container: true' a la configuración del atributo
- Use el tipo 'checkboxes' para atributos donde se pueden seleccionar múltiples valores, como múltiples clases CSS de una lista predefinida
- El tipo 'managed_file' permite que las cargas de archivos (como imágenes) se asocien con elementos de menú - especifique 'upload_location' para establecer el directorio de carga
- Al navegar desde la página de configuración a un formulario de edición de elemento de menú, la sección Atributos se abre automáticamente con el primer campo enfocado
- Los atributos de clase se convierten automáticamente en arrays para un renderizado HTML adecuado, por lo que funcionan correctamente con el sistema de atributos de Drupal
- Para sitios multilingües, los atributos establecidos en la traducción predeterminada pueden heredarse a otras traducciones cuando 'Only affect the default translation' está habilitado
Technical Details
Admin Pages 1
/admin/config/menu_link_attributes/config
Página de configuración para definir qué atributos HTML están disponibles en los formularios de edición de enlaces de menú. Los atributos se definen usando sintaxis YAML, donde cada atributo puede tener una etiqueta, descripción, tipo, opciones y valor predeterminado.
Permissions 2
Hooks 2
hook_form_menu_link_content_form_alter
Altera el formulario de contenido de enlace de menú para añadir campos de entrada de atributos basados en la configuración del módulo. Añade un elemento 'Atributos' de tipo details que contiene campos de formulario para cada atributo configurado.
template_preprocess_menu
Preprocesa las plantillas de menú para aplicar atributos de contenedor a los elementos <li>. Procesa recursivamente todos los elementos de menú incluyendo los hijos anidados.
Troubleshooting 5
Asegúrese de tener el permiso 'Use menu link attributes'. También verifique que está editando una entidad de contenido de enlace de menú (enlaces de menú personalizados), ya que el módulo solo funciona con entidades menu_link_content, no con enlaces de menú definidos por el sistema.
Asegúrese de que su tema use la plantilla de menú estándar que respeta los atributos de los elementos. Verifique que el atributo esté correctamente configurado con el prefijo 'container_' o la configuración 'container: true'. Limpie la caché después de los cambios de configuración.
Verifique que su sintaxis YAML sea correcta. Los problemas comunes incluyen indentación incorrecta (use espacios, no tabulaciones), dos puntos faltantes después de las claves o caracteres especiales sin escapar. Instale el módulo YAML Editor para resaltado de sintaxis.
El módulo convierte automáticamente los valores de clase en arrays. Si está accediendo a estos valores programáticamente, espere un formato de array. El hook de actualización 8001 corrige atributos de clase malformados de versiones anteriores.
Ejecute las actualizaciones de base de datos (drush updb) para aplicar los hooks de actualización que añaden etiquetas y descripciones a los atributos predeterminados.
Security Notes 3
- El permiso 'Administer menu link attributes' está marcado como acceso restringido porque permite definir atributos HTML arbitrarios que podrían potencialmente ser mal utilizados
- Los valores de atributos ingresados por usuarios están sujetos a la sanitización estándar de Drupal cuando se renderizan
- Tenga cuidado al añadir atributos que podrían habilitar XSS si no son manejados correctamente por los temas