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.