web-dev-qa-db-fra.com

Comment ajouter une classe personnalisée sur le bloc de menu en utilisant Twig?

Je suis nouveau dans Drupal 8 et j'essaie d'afficher mon bloc de menu principal en utilisant twig comme ci-dessous

 {% if page.primary_menu %}
   {{ page.primary_menu }}
 {% endif %}

ce qui me donne comme ça

<ul class="sm menu-base-theme" id="main-menu">
   <li>
      <a href="/drupal8/" data-drupal-link-system-path="<front>" class="is-active">About</a>
   </li>
   <li>
      <a href="/drupal8/" data-drupal-link-system-path="<front>" class="is-active">Home</a>
   </li>
</ul>

Je veux ajouter mes attributs de classe personnalisés sur les éléments ul et a pour obtenir le menu comme celui-ci

<ul class="nav navbar-nav navbar-right" id="main-menu">
   <li>
      <a href="#about" data-drupal-link-system-path="<front>" class="page-scroll">About</a>
   </li>
   <li>
      <a href="#home" data-drupal-link-system-path="<front>" class="page-scroll">Home</a>
   </li>
</ul>

Comment ajouter ma classe personnalisée au menu? Si vous avez une idée de ce problème, veuillez m'aider. Je vous remercie.

theming8navigation
3
Sujan Shrestha

Vous pouvez le faire en créant un fichier de modèle appelé "menu - main.html" dans le dossier de modèle de votre thème.

Puis en place sous le code dans ce fichier:

 {% import _self en tant que menus%} 
 {{menus.menu_links (éléments, attributs, 0)}} 
 {% macro menu_links (éléments, attributs, niveau_menu)%} 
 {% import _self en tant que menus%} 
 {% si les éléments%} 
 {% if menu_level == 0%}
  <ul{{ attributes.addClass('menu', 'nav', 'navbar-nav','navbar-right') }}>

    {% autre %}
  <ul{{ attributes.addClass('dropdown-menu') }}>

 {% endif%} 
 {% pour l'élément dans les éléments%} 
 {% si menu_level == 0 et item.is_expanded%}
    <li{{ item.attributes.addClass('expanded', 'dropdown') }}>
    <a href="{{ item.url }}" class="page-scroll">{{ item.title }}</a>

 {% else%} 
 
 {{link (item.title, item.url)}} 
 {% endif%} 
 { % if item.below%} 
 {{menus.menu_links (item.below, attributes.removeClass ('nav', 'navbar-nav'), menu_level + 1)}} 
 {% fin si %}
  </li>
{% endfor %}
</ul>

 {% endif%} 
 {% endmacro%}

Cela ajoutera la classe "ul"

4
Sachin

Vous pouvez utiliser Menu Link Attribute module qui vous permet d'ajouter une classe, un identifiant, etc. à votre élément de menu.

Ce module vous permet d'ajouter des attributs à vos liens de menu.

Par conséquent, vous pouvez personnaliser votre élément de menu, en utilisant ces attributs ajoutés.

3
CodeNext

Puissiez-vous utiliser des crochets:

/**
* Implements hook_preprocess_HOOK() for menu.html.twig.
*/
function mytheme_preprocess_menu(&$variables) {
  if ($variables['menu_name'] == 'main') {
    if (!isset($variables['attributes']['class'])) {
      $variables['attributes']['class'] = [];
    }
    $variables['attributes']['class'] = array_merge($variables['attributes']['class'], ['my-main-menu']);  }
}

Source: https://www.drupal.org/docs/8/theming-drupal-8/modifying-attributes-in-a-theme-file

0
Jean-Luc Barat