Guide pratique du module Menu Link Attributes : Configuration Drupal étape par étape

Le module Menu Link Attributes règle ce problème. Il permet aux éditeurs de contenu d'ajouter des attributs HTML directement aux liens de menu via l'interface Drupal. Aucun code requis. Que vous ayez besoin de styliser des liens spécifiques, d'améliorer l'accessibilité avec des attributs ARIA ou de contrôler le comportement des liens, ce module rend tout ça simple.

Dans ce guide, vous apprendrez comment installer, configurer et utiliser le module Menu Link Attributes dans Drupal 11. Vous verrez aussi comment ajouter des attributs personnalisés par programmation quand vous avez besoin de plus de contrôle.

Prérequis

Avant de commencer, assurez-vous d'avoir :

• Un site Drupal 11 fonctionnel (le module fonctionne aussi avec Drupal 10)
• Composer installé pour la gestion des dépendances
• Un accès administrateur à votre site Drupal
• Une connaissance de base du système de menus de Drupal
• Un accès SSH ou terminal si vous utilisez des commandes Drush

Le module Menu Link Attributes est activement maintenu et compte plus de 80 000 installations rapportées. À la fin 2024, il est entièrement compatible avec Drupal 11 et reçoit des mises à jour de sécurité régulières.

Mise en œuvre étape par étape

Étape 1 : Installer le module

Commencez par installer le module via Composer. Ouvrez votre terminal, naviguez vers votre répertoire racine Drupal et exécutez :

composer require drupal/menu_link_attributes

Une fois que Composer a fini de télécharger le module et ses dépendances, activez-le avec Drush :

drush en menu_link_attributes -y

Vous pouvez aussi l'activer via l'interface d'administration en allant dans Extensions (/admin/modules), en trouvant « Menu Link Attributes » dans la liste, en cochant la case et en cliquant sur « Installer ».

Étape 2 : Définir les permissions des utilisateurs

Après l'installation, vous devez accorder des permissions aux utilisateurs qui devraient pouvoir ajouter des attributs aux liens de menu. Naviguez vers Personnes > Permissions (/admin/people/permissions) et cherchez la permission « Use menu link attributes ».

Nous avons constaté que la plupart des sites bénéficient d'accorder cette permission aux rôles d'éditeur de contenu, pas seulement aux administrateurs. Ça permet à votre équipe de contenu de gérer les attributs de liens sans avoir besoin d'un accès administrateur complet.

Accordez la permission aux rôles appropriés comme :

• Éditeur de contenu
• Administrateur du site
• Gestionnaire marketing (s'ils gèrent les menus)

Sauvegardez vos changements de permissions avant de continuer.

Étape 3 : Configurer les attributs disponibles

Le module vous permet de contrôler quels attributs les éditeurs peuvent utiliser. Allez dans Configuration > Menu Link Attributes (/admin/config/menu_link_attributes/config) pour configurer ça.

Par défaut, vous verrez les attributs communs disponibles :

• class - Pour le style CSS
• id - Pour les identifiants uniques
• target - Pour contrôler où les liens s'ouvrent
• rel - Pour les attributs de relation comme nofollow
• aria-label - Pour l'accessibilité

Vous pouvez activer ou désactiver n'importe lequel de ces attributs selon vos besoins. Si vous voulez seulement que les éditeurs ajoutent des classes CSS et rien d'autre, désactivez les autres options.

Pour ajouter des attributs personnalisés, vous devrez créer un fichier de configuration YAML. Voici un exemple qui ajoute des attributs de données pour le suivi analytique :

attributes:
  data-track-click:
    label: 'ID de suivi des clics'
    description: 'Identifiant de suivi analytique'
  data-category:
    label: 'Catégorie analytique'
    options:
      navigation: 'Navigation'
      footer: 'Pied de page'
      sidebar: 'Barre latérale'

Sauvegardez cette configuration et videz votre cache pour rendre les nouveaux attributs disponibles.

Étape 4 : Ajouter des attributs aux liens de menu

Maintenant, passons à la mise en œuvre concrète. Naviguez vers Structure > Menus (/admin/structure/menu) et choisissez un menu avec lequel travailler. Utilisons le menu Navigation principale comme exemple.

Créez un nouveau lien de menu ou modifiez-en un existant. Vous remarquerez un nouveau groupe de champs « Attributs » dans le formulaire de lien de menu. C'est là que la magie opère.

Disons que vous voulez créer un lien externe qui s'ouvre dans un nouvel onglet avec les bons attributs de sécurité :

1. Cliquez sur « Ajouter un lien » dans votre menu
2. Entrez le titre du lien : « Documentation »
3. Entrez l'URL du lien : « https://example.com/docs »
4. Ouvrez le groupe de champs « Attributs »
5. Ajoutez ces valeurs :

• Classe : external-link documentation-link
• Cible : _blank
• Rel : noopener noreferrer

Sauvegardez le lien de menu et c'est fait.

Étape 5 : Ajouter des attributs par programmation

Parfois, vous devez définir des attributs de liens de menu par code, surtout lors de la création de liens pendant l'installation de modules ou la migration de données. Voici comment faire :

use Drupal\menu_link_content\Entity\MenuLinkContent;

// Créer un lien de menu avec des attributs
$menu_link = MenuLinkContent::create([
  'title' => 'Portail de support',
  'link' => [
    'uri' => 'https://support.example.com',
    'options' => [
      'attributes' => [
        'class' => ['external-link', 'support-link'],
        'target' => '_blank',
        'rel' => 'noopener noreferrer',
        'aria-label' => 'S\'ouvre dans une nouvelle fenêtre',
      ],
    ],
  ],
  'menu_name' => 'main',
  'weight' => 10,
  'expanded' => FALSE,
]);
$menu_link->save();

Pour les liens de menu existants, vous pouvez mettre à jour les attributs comme ça :

// Charger un lien de menu existant
$menu_link = MenuLinkContent::load($menu_link_id);

// Obtenir les options de lien actuelles
$link_field = $menu_link->get('link')->first();
$options = $link_field->getOptions();

// Ajouter ou mettre à jour les attributs
$options['attributes']['class'][] = 'updated-class';
$options['attributes']['data-modified'] = 'true';

// Sauvegarder les options mises à jour
$link_field->setOptions($options);
$menu_link->save();

Étape 6 : Créer des types d'attributs personnalisés

Si vous avez besoin d'attributs au-delà de ceux par défaut, vous pouvez en ajouter des personnalisés via un module. Créez un module personnalisé (appelons-le custom_menu_attributes) et ajoutez cette configuration :

D'abord, créez custom_menu_attributes.menu_link_attributes.yml :

data-menu-icon:
  label: 'Icône de menu'
  description: 'Classe d\'icône pour l\'élément de menu'
data-tooltip:
  label: 'Texte d\'infobulle'
  description: 'Infobulle au survol pour le lien de menu'

Ensuite, implémentez un hook pour rendre ces attributs disponibles dans le formulaire :

/**
 * Implements hook_entity_base_field_info_alter().
 */
function custom_menu_attributes_entity_base_field_info_alter(&$fields, \Drupal\Core\Entity\EntityTypeInterface $entity_type) {
  if ($entity_type->id() === 'menu_link_content') {
    if (isset($fields['link'])) {
      $fields['link']->setDisplayOptions('form', [
        'type' => 'link_attributes',
        'settings' => [
          'enabled_attributes' => [
            'class' => TRUE,
            'id' => TRUE,
            'target' => TRUE,
            'rel' => TRUE,
            'data-menu-icon' => TRUE,
            'data-tooltip' => TRUE,
          ],
        ],
      ]);
    }
  }
}

Videz votre cache après avoir ajouté ce code, et vos attributs personnalisés apparaîtront dans le formulaire de lien de menu.

Erreurs courantes à éviter

Erreur 1 : Oublier de vider le cache

Le problème le plus courant que nous voyons est que les attributs n'apparaissent pas après des changements de configuration. Drupal met en cache le rendu des menus de manière agressive, alors videz toujours votre cache après :

• L'installation du module
• Le changement de configuration des attributs
• L'ajout d'attributs personnalisés
• La mise à jour des gabarits

Utilisez drush cr ou visitez Configuration > Performance et cliquez sur « Vider tous les caches ».

Erreur 2 : Problèmes de gabarits de thème

Votre thème doit afficher les attributs pour qu'ils apparaissent. Vérifiez que vos gabarits de menu incluent la variable d'attributs. Dans votre menu.html.twig ou menu--main.html.twig, assurez-vous d'avoir :

<a{{ item.attributes }}>{{ item.title }}</a>

Et non :

<a href="{{ item.url }}">{{ item.title }}</a>

Notre expérience montre que plusieurs thèmes personnalisés manquent ça, surtout ceux migrés de Drupal 7 ou de versions antérieures.

Erreur 3 : Problèmes de sécurité avec target="_blank"

Quand vous ajoutez target="_blank" pour ouvrir des liens dans de nouveaux onglets, incluez toujours rel="noopener noreferrer". Sans ça, la page ouverte peut accéder à l'objet window de votre site, créant des vulnérabilités de sécurité.

Erreur 4 : Surutilisation des attributs ID

Les ID doivent être uniques sur une page. Si vous ajoutez un ID à un lien de menu qui apparaît dans plusieurs menus (comme le pied de page et l'en-tête), vous créerez du HTML invalide. Utilisez plutôt des classes pour styliser plusieurs éléments.

Erreur 5 : Ne pas considérer les menus mobiles

Les attributs que vous ajoutez affectent toutes les versions d'un menu. Si votre JavaScript de menu mobile dépend de classes spécifiques, l'ajout d'attributs conflictuels pourrait briser la fonctionnalité. Testez soigneusement sur tous les appareils.

Étapes de test et de vérification

Après avoir configuré les attributs de liens de menu, vérifiez que tout fonctionne correctement :

1. Vérification avec l'inspecteur du navigateur

Faites un clic droit sur vos liens de menu et inspectez le HTML. Confirmez que vos attributs apparaissent dans le balisage rendu :

<a href="/about" 
   class="external-link custom-style" 
   target="_blank" 
   rel="noopener noreferrer"
   aria-label="En savoir plus sur notre entreprise">
   À propos de nous
</a>

2. Test d'accessibilité

Utilisez les outils d'accessibilité du navigateur pour vérifier que les attributs ARIA fonctionnent correctement :

• Chrome DevTools Lighthouse
• Extension de navigateur WAVE
• Test avec lecteur d'écran (NVDA ou JAWS sur Windows, VoiceOver sur Mac)

3. Fonctionnalité JavaScript

Si vous utilisez des classes ou des ID pour cibler avec JavaScript, testez que vos scripts fonctionnent toujours :

// Tester que vos sélecteurs JavaScript trouvent les éléments
document.querySelectorAll('.external-link').forEach(link => {
  console.log('Lien externe trouvé :', link.href);
});

4. Test sur plusieurs navigateurs

Vérifiez que vos liens de menu stylisés apparaissent correctement dans :

• Chrome/Edge
• Firefox
• Safari
• Navigateurs mobiles

5. Vérification de la performance

Les attributs de menu ne devraient pas affecter la performance, mais si vous avez ajouté beaucoup d'attributs personnalisés, vérifiez vos temps de chargement de page. Utilisez l'onglet Performance de Chrome DevTools pour vous assurer que le rendu des menus ne ralentit pas votre site.

Conclusion

Le module Menu Link Attributes résout un vrai problème dans Drupal : donner aux éditeurs de contenu le contrôle sur les propriétés individuelles des liens de menu sans toucher au code. Vous avez appris comment l'installer, configurer les attributs disponibles et ajouter des attributs standards et personnalisés à vos liens de menu. Vous avez aussi vu comment éviter les pièges courants et tester correctement votre mise en œuvre.

Le travail avec des équipes nous a appris que ce module réduit considérablement les allers-retours entre les éditeurs de contenu et les développeurs. Au lieu de créer des billets pour de simples ajouts de classes ou des changements de comportement de liens, les éditeurs peuvent gérer ces tâches eux-mêmes, libérant les développeurs pour se concentrer sur du travail plus complexe.

Si vous construisez un site Drupal qui a besoin de styles de menu flexibles, d'améliorations d'accessibilité ou de comportements de liens spécifiques, le module Menu Link Attributes est essentiel. Il est particulièrement précieux pour les sites marketing où différentes équipes doivent gérer diverses sections de menu avec différents styles et exigences de suivi.

Configurer correctement les attributs de menu dès le départ économise des heures de développement personnalisé plus tard. Si vous planifiez un projet Drupal et avez besoin d'aide pour déterminer quels modules et configurations soutiendront le mieux le flux de travail de votre équipe de contenu, nous pouvons examiner vos exigences et recommander une architecture qui donne aux éditeurs le contrôle dont ils ont besoin tout en maintenant un code propre et maintenable.