3

I'm new in Drupal 8 and i'm trying to display my primary menu block using twig as below

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

which gives me like this

<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>

I want to add my custom class attributes on ul and a elements to get the menu like this

<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>

How can i add my custom class on the menu? If you have any idea about this problem then please help me. Thank you.

3 Answers 3

4

You can do this by creating template file called "menu--main.html" in your theme's template folder.

Then in place below code in that file:

{% import _self as menus %}
{{ menus.menu_links(items, attributes, 0) }}
{% macro menu_links(items, attributes, menu_level) %}
  {% import _self as menus %}
  {% if items %}
    {% if menu_level == 0 %}
  <ul{{ attributes.addClass('menu', 'nav', 'navbar-nav','navbar-right') }}>
    {% else %}
  <ul{{ attributes.addClass('dropdown-menu') }}>
    {% endif %}
    {% for item in items %}
      {% if menu_level == 0 and 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) }}
      {% endif %}
  </li>
{% endfor %}
</ul>
  {% endif %}
{% endmacro %}

This will add the class "ul"

3

You can use Menu Link Attribute module which allows you to add class, id, etc.. to your menu item.

This module allows you to add attributes to your menu links.

Hence, you can customize your menu item, using those added attributes.

1
  • 1
    Worked like a charm.
    – No Sssweat
    Sep 19, 2016 at 23:29
0

May you can use hooks:

/**
* 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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.