On a Drupal 8 installation, I have a menu in the sidebar first region. I want to add classes to bootstrap classes to the different levels of that menu. For that I created a my own menu template, which looks like this:
{#
/**
* @file
* Theme override to display a menu.
*/
#}
{% import _self as menus %}
{{ menus.menu_links(items, attributes, 0, my_menu) }} {# 1. #}
{% macro menu_links(items, attributes, menu_level, my_menu) %} {# 1. #}
{% import _self as menus %}
{# 1. #}
{%
set menu_classes = [
'navbar-nav', 'mr-auto' ~ my_menu|clean_class,
]
%}
{# 1. #}
{%
set submenu_classes = [
'navbar-nav', 'mr-auto' ~ my_menu|clean_class,
]
%}
{% if items %}
{% if menu_level == 0 %}
<div class="navbar-collapse offcanvas-collapse open"><ul{{ attributes.addClass(menu_classes) }}> {# 1. #}
{% else %}
<ul{{ attributes.removeClass(menu_classes).addClass(submenu_classes) }}> {# 1. #}
{% endif %}
{% for item in items %}
{# 1. #}
{%
set item_classes = [
'nav-item' ~ my_menu|clean_class,
item.is_expanded ? 'expanded' ~ my_menu|clean_class,
item.is_collapsed ? 'collapsed' ~ my_menu|clean_class,
item.in_active_trail ? 'trail' ~ my_menu|clean_class,
]
%}
{# 1. #}
{%
set link_classes = [
'nav-link' ~ my_menu|clean_class,
]
%}
<li{{ item.attributes.addClass(item_classes) }}>{# 1. #}
{# 1. #}
{{
link(
item.title,
item.url,
item.attributes.removeClass(item_classes).addClass(link_classes)
)
}}
{% if item.below %}
{{ menus.menu_links(item.below, attributes, menu_level + 1, my_menu) }} {# 1. #}
{% endif %}
</li>
{% endfor %}
{% if menu_level == 0 %}
</ul></div>
{% else %}
</ul>
{% endif %}
{% endif %}
{% endmacro %}
This works fine. However, I also need to change the classes of the nav tag. I can't seem to figure out, how that can be done and I can't find any information anywhere explaining this. So how do I change the nav tag classes of that menu?
In the end I want it to be a bootstrap offcanvas menu like this one: https://getbootstrap.com/docs/4.0/examples/offcanvas/
But I just can't seem to change the nav tag classes, since I don't know how.