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 %}
    {% endfor %}
  {% 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.

  • I have a similar problem, in fact the opposite. in_active_trail was false when rendering a view attached to the main menu.Removing from the view and enabling from the menu seemed to add this.
    – Daniel
    Commented Nov 29, 2023 at 0:51

1 Answer 1


As mentioned on Active on home menu item not working, it could happen because you are using "" as menu link instead of <front>.

The Menu Trail By Path module could resolve your issue. That module sets the menu item to active if it's for the page you are currently on.

Menu Trail By Path sets the active trail on menu items according to the current URL. For example, if you are at https://example.com/blog/category1/article1, menu items with the following paths will get the active-trail class on them and expand accordingly.

  • blog
  • blog/category1
  • blog/category1/article1
  • 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
    Commented May 20, 2019 at 18:46

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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