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.

Improve this question

3 Answers 3

Reset to default
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"

Improve this answer
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.

Improve this answer
1
  • 1
    Worked like a charm. Commented 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

Improve this answer

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.