0

I am working on sidebar menu in a Custom Drupal 8 Theme. I am trying to set a class of sidebar__menu--submenu-1,sidebar__menu--submenu-2, sidebar__menu--submenu-3 and so on depending on the level of the submenus.

So far, I was able to add the class sidebar__menu to the first level & sidebar__menu--submenu to all the submenus. However, I want to add the class sidebar__menu--submenu-(number of the level) so I can style & control the sidebar better on css.

Any help will be really appreciate it!

Here it is my code menu.html.twig:

{{ menus.menu_links(items, attributes, 0) }}

{% macro menu_links(items, attributes, menu_level, menu_name) %}
  {% import _self as menus %}
  {%
    set menu_classes = [
      'sidebar__menu' ~ menu_name|clean_class,
    ]
  %}
  {%
    set submenu_classes = [
      'sidebar__menu' ~ menu_name|clean_class ~ '--submenu',
    ]
  %}
  {% if items %}
    {% if menu_level == 0 %}
      <ul{{ attributes.addClass('container mx-auto', menu_classes) }}>
    {% else %}
      <ul {{ attributes.removeClass(menu_classes).addClass(submenu_classes) }}>
    {% endif %}

    {% for item in items %}
     {%
      set classes = [
        'sidebar__item',
        item.is_expanded ? 'sidebar__item--expanded',
        item.is_collapsed ? 'sidebar__item--collapsed',
        item.in_active_trail ? 'sidebar__item--active-trail',
      ]
      %}
      <li{{ item.attributes.addClass(classes) }}>
        {{ link(item.title, item.url) }}
        {% if item.below %}
          {{ menus.menu_links(item.below, attributes, menu_level + 1) }}
        {% endif %}
      </li>
    {% endfor %}
    </ul>
  {% endif %}
{% endmacro %}
3
  • HI, Manuel. If I'm understanding you correctly, you should be able to concatenate your class name with the value in menu_level, then add it to your classes array or pass it directly into addClass(). Have you tried this? Feb 28, 2019 at 15:40
  • @othermachines thanks for your reply. Basically, I have sidebarmenu with different submenu levels that I need to style different on each level. So I wanted to add a custom class depending on the level I am currently navigating. I have accomplished this a few minutes ago like so: ` {% elseif menu_level == 1 %} <ul {{ attributes.removeClass(menu_classes).addClass(submenu_classes) }}> {% elseif menu_level == 2 %} <ul class="sidebar__menu--submenu-2" {{ attributes.removeClass(menu_classes) }}>`
    – user92350
    Feb 28, 2019 at 15:53
  • Yeah, that would work. You should also be able to do this dynamically (without all the elseifs) with something like {% set level_class = 'sidebar__menu--submenu-' ~ menu_level %}. Feb 28, 2019 at 16:27

1 Answer 1

1

Here's one way to modify your code to add a unique class for each menu level dynamically:

  1. Add a new class appended with the value of menu_level plus one:
  {%
    set submenu_classes = [
      'sidebar__menu' ~ menu_name|clean_class ~ '--submenu',
      'sidebar__menu--submenu-' ~ (menu_level + 1),
    ]
  %}
  1. Remove the previously added class, otherwise I believe it will add the class for each level incrementally.
    {% if menu_level == 0 %}
      <ul{{ attributes.addClass('container mx-auto', menu_classes) }}>
    {% else %}
      <ul{{ attributes.removeClass(menu_classes, 'sidebar__menu--submenu-' ~ (menu_level)).addClass(submenu_classes) }}>
    {% endif %}
0

Your Answer

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