1

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.

0

As mentioned here, it might be because you are pointing your menu link to "" instead of <front>.

There is also a module called menu by trail path, which might also solve your problem. That module sets the menu item to active if its the page you are currently on.

  • When I added Home to the menu via the menu panel, i used <front> as the page link. I had put "/" in there, but it changed it for me. – Robbiegod May 20 at 18:46

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.