How to display the class for the active menu? - css

Question

Here is the menu.twig.html template provided by Drupal Bootstrap :
{#
/**
* #file
* Default theme implementation to display a menu.
*
* Available variables:
* - classes: A list of classes to apply to the top level <ul> element.
* - dropdown_classes: A list of classes to apply to the dropdown <ul> element.
* - menu_name: The machine name of the menu.
* - items: A nested list of menu items. Each menu item contains:
* - attributes: HTML attributes for the menu item.
* - below: The menu item child items.
* - title: The menu link title.
* - url: The menu link url, instance of \Drupal\Core\Url
* - localized_options: Menu link localized options.
*
* #ingroup templates
*
* Define a custom macro that will render all menu trees.
*/
#}
{% macro menu_links(items, attributes, menu_level, classes, dropdown_classes) %}
{% if items %}
<ul{{ attributes.addClass(menu_level == 0 ? classes : dropdown_classes) }}>
{% for item in items %}
{%
set item_classes = item.url.getOption('container_attributes').class | split(" ")
%}
{%
set item_classes = [
item.is_expanded and item.below ? 'expanded dropdown',
item.in_active_trail ? 'active active-trail',
loop.first ? 'first',
loop.last ? 'last',
]
%}
<li{{ item.attributes.addClass(item_classes) }}>
{% set link_title = item.title %}
{% set link_attributes = item.link_attributes %}
{% if menu_level == 0 and item.is_expanded and item.below %}
{% set link_title %}{{ link_title }} <span class="caret"></span>{% endset %}
{% set link_attributes = link_attributes.addClass('dropdown-toggle').setAttribute('data-toggle', 'dropdown') %}
{% endif %}
{# Must use link() here so it triggers hook_link_alter(). #}
{{ link(link_title, item.url, link_attributes.addClass(item.in_active_trail ? 'active-trail')) }}
{% if item.below %}
{{ _self.menu_links(item.below, attributes.removeClass(classes), menu_level + 1, classes, dropdown_classes) }}
{% endif %}
</li>
{% endfor %}
</ul>
{% endif %}
{% endmacro %}
{#
Invoke the custom macro defined above. If classes were provided, use them.
This allows the template to be extended without having to also duplicate the
code above. #see http://twig.sensiolabs.org/doc/tags/macro.html
#}
{{ _self.menu_links(items, attributes, 0, classes ?: ['menu', 'menu--' ~ menu_name|clean_class, 'nav'], dropdown_classes ?: ['dropdown-menu']) }}
Here is the main menu HTML code :
<ul class="menu menu--main nav navbar-nav">
<li class="first">
Banques
</li>
<li>
Cashback
</li>
<li class="active active-trail">
Avis
</li>
<li>
Essentiel
</li>
<li class="last">
Actu
</li>
</ul>
I want to customize this menu and add an icon before each menu link and the number of page elements in a badge.
Here is the custom code I want for my main menu :
<ul class="menu menu--main nav navbar-nav">
<li>
<i class="fas fa-piggy-bank fa-lg"></i> Banques <span class="badge badge-light">{{ drupal_view_result('accueil_banque', 'page_1')|length }}</span>
</li>
<li>
<i class="fas fa-undo fa-lg"></i> Cashback <span class="badge badge-light">{{ drupal_view_result('accueil_cashback', 'page_1')|length }}</span>
</li>
<li>
<i class="fas fa-gift fa-lg"></i> Avis <span class="badge badge-light">{{ drupal_view_result('accueil_avis', 'page_1')|length }}</span>
</li>
<li>
<i class="fas fa-thumbs-up fa-lg"></i> Essentiel <span class="badge badge-light">{{ drupal_view_result('accueil_essentiel', 'page_1')|length }}</span>
</li>
<li>
<i class="fas fa-newspaper fa-lg"></i> Actu <span class="badge badge-light">{{ drupal_view_result('accueil_actu', 'page_1')|length }}</span>
</li>
</ul>
The problem is that when I click on a menu link, the menu is not displayed as active.
How can I have the same behavior in my custom code ? With the active class automatically added to the menu link that is currently displayed.
How else can I integrate my custom code into one of the menu.html.twig or menu--main.html.twig templates ?
In Bootstrap there is a menu--main.html.twig template that I copy to my sub-theme, but I don't know how to use it. Here are its contents :
{#
/**
* #file
* Default theme implementation to display a menu.
*
* Available variables:
* - classes: A list of classes to apply to the top level <ul> element.
* - dropdown_classes: A list of classes to apply to the dropdown <ul> element.
* - menu_name: The machine name of the menu.
* - items: A nested list of menu items. Each menu item contains:
* - attributes: HTML attributes for the menu item.
* - below: The menu item child items.
* - title: The menu link title.
* - url: The menu link url, instance of \Drupal\Core\Url
* - localized_options: Menu link localized options.
*
* #ingroup templates
*/
#}
{% extends "menu.html.twig" %}
{%
set classes = [
'menu',
'menu--' ~ menu_name|clean_class,
'nav',
'navbar-nav',
]
%}
Example of the main menu by default with an open link (it is active because the page is displayed) :
Example of the main menu personalized with an open link (it is not active, because the classes are not automatically added by the template menu.twig.html) :

Answer 1

The answer they gave you in the referenced issue is a very clear one RTFM (Read the f***ing manual) especially the following:
core/themes/stable/templates/menu.html.twig
core/themes/classy/templates/menu.html.twig contains {% extends "menu.html.twig" %} (to add a specific class) and expects Stable's menu.html.twig to be extended
core/themes/YOUR_DIR/templates/menu.html.twig contains {% extends "menu.html.twig" %} (to override a Twig block) and expects Classy's menu.html.twig to be extended — or, really, any of its ancestor themes, because it couldn't care less if Classy's menu.html.twig was removed
Notes:
in point 3, we specifically do NOT want to specify {% extends "#classy/menu.html.twig" %} because we don't want to care. We just want the parent theme's template — according to the theme registry — to be extended.
in point 1, the "root template" could just as well not live in a theme, but in a module. That's also a valid use case.
So you have an issue because you state menu.twig.html but your module extends "menu.html.twig" so make sure your naming is right.
The Drupal handbook statesNEVER to fiddle around with the delivered templates, rather extend it with user specific modulues.
Q: Where should I make changes?
A: In a custom sub-theme
You should never modify any theme or sub-theme that is packaged and
released from Drupal.org. If you do, all changes you have made would
be lost once that theme is updated. This makes keeping track of
changes next to impossible.
Instead, you should create a custom sub-theme that isn't hosted on
Drupal.org.