How to add custom class on the menu block using twig?

Question

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.

Answer 1

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"

Answer 2

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.

Answer 3

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