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 %}
  • 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? – othermachines Feb 28 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) }}>` – Manuel Abascal Feb 28 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 %}. – othermachines Feb 28 at 16:27
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 %}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.