How to add custom class on the menu block using twig? 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 

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


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

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


How can i add my custom class on the menu? If you have any idea about this problem then please help me. Thank you.
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 %}

  &lt;ul{{ attributes.addClass('menu', 'nav', 'navbar-nav','navbar-right') }}&gt;



    {% else %}

  &lt;ul{{ attributes.addClass('dropdown-menu') }}&gt;



    {% endif %}
    {% for item in items %}
      {% if menu_level == 0 and item.is_expanded %}

    &lt;li{{ item.attributes.addClass('expanded', 'dropdown') }}&gt;
    &lt;a href="{{ item.url }}" class="page-scroll"&gt;{{ item.title }}&lt;/a&gt;



      {% else %}
        
        {{ link(item.title, item.url) }}
      {% endif %}
      {% if item.below %}
        {{ menus.menu_links(item.below, attributes.removeClass('nav', 'navbar-nav'), menu_level + 1) }}
      {% endif %}

  &lt;/li&gt;
{% endfor %}
&lt;/ul&gt;



  {% endif %}
{% endmacro %}

This will add the class "ul"