I'm learning Drupal 8, so still very new to it. I'm working on customizing the main menu. I've been able to add Twitter Bootstrap to my custom theme. I've made a custom menu--main.html.twig file.
I'm trying to change the "is-active" class to "active" using what Drupal has available. I see when I click to my About page that they About link is highlighted with the active link class. Great!
What I can't seem to figure out is how do I get the Home page to get the active class too? It looks like it is being treated differently.
I tried adding a new page called Homepage, but that didn't work either.
Here is my twig file, which i took pieces from another theme that use twitter bootstrap to try to compile it together.
{% import _self as menus %}
{#
We call a macro which calls itself to render the full tree.
@see http://twig.sensiolabs.org/doc/tags/macro.html
#}
{{ menus.menu_links(items, attributes, 0) }}
{% macro menu_links(items, attributes, menu_level) %}
{% import _self as menus %}
{% if items %}
<div class="collapse navbar-collapse" id="navbarSupportedContent">
{% if menu_level == 0 %}
<ul{{ attributes.addClass('nav navbar-nav mr-auto') }}>
{% else %}
<ul class="navbar-nav mr-auto dropdown-menu">
{% endif %}
{% for item in items %}
{%
set classes = [
menu_level ? 'dropdown-item' : 'nav-item',
item.is_expanded ? 'menu-item--expanded',
item.is_collapsed ? 'menu-item--collapsed',
item.in_active_trail ? 'active',
item.below ? 'dropdown',
]
%}
<li{{ item.attributes.addClass(classes) }}>
{%
set link_classes = [
not menu_level ? 'nav-link',
item.in_active_trail ? 'active',
item.below ? 'dropdown-toggle',
item.url.getOption('attributes').class ? item.url.getOption('attributes').class | join(' '),
]
%}
{% if item.below %}
{{ link(item.title, item.url, {'class': link_classes, 'data-toggle': 'dropdown', 'aria-expanded': 'false', 'aria-haspopup': 'true' }) }}
{{ menus.menu_links(item.below, attributes, menu_level + 1) }}
{% else %}
{{ link(item.title, item.url, {'class': link_classes}) }}
{% endif %}
</li>
{% endfor %}
</ul>
</div>
{% endif %}
{% endmacro %}
Update: I went into Views in my admin panel and edited the Frontpage. I noticed that it was not assigned to any menus. I changed that by adding it to the main menu. Looked at my homepage and the Home link is now highlighted as the active page.
So, what worked is adding it through the view page. What did not work was adding the homepage from the "menu" screen where you build the menu. Clearly the homepage is treated differently from other pages in the menu and if you add it via the menu panel, it is not considered as part of in_active_trail. I don't totally understand so I am hoping that someone can explain this to me.
Now, my question is did i do this right?
Update #3 I check my "Home" link in my main navigation. The original "Home" link says "This link is provided by the Standard module. The title and path cannot be edited." This link will not add the active class when I use "in_active_trail".
I had manually added a link via the Menu -> Main Navigation -> Add New Link. I gave it a title called "Homepage" and the link "". This link did not accept the "active" class either.
From what I can gather, the only way to get it to repsect "in_active_trail" is y using the Views -> Front page and then configure the menu setting. That did the trick.
