Timber: Add item.is_active to TimberMenu items

[bambamboole]

It would be very nice to get a possibility to check if the menu item is the current active item.

Example:

<ul>
  {% for item in menu %}
    <li{{ menu.is_active ? ' class="active"' }}>
      <a href="{{ item.get_link }}">{{ item.title }}</a>
    </li>
  {% endfor %}
</ul>

I don't know if it's hard to implement something like this, but I think I'm not the only one who would love to have a method like this.

cheers

[luukdv]

If it's just for having an 'active' class, you could do <li class="{{ item.classes|join(' ') }}"> and use the added .current-menu-item class.

[bambamboole]

and handle this myriad of trash classes from wordpress? thats what I don't want... I try to build a clean wordpress site without all these unusable classes...

[royvantoren]

You can check if an item in your loop is current by using:

{{ item.current ? 'is-active' }}

[motia]

You can create a twig filter and use it in your templates.

  $twig->addFilter( new Twig_SimpleFilter('active', function($item){
     if(strpos(Timber\URLHelper::get_current_url(), $item->get_link()) === 0)
         return 'active';
     return '';
 }));

    <li class="{{ item|active }}">

For a navigation bar I think you can use the same filter. Otherwise, you will have to write another condition to check for active items.

[bambamboole]

the method @roylodder supplied, is the best in my opinion.

It should find the way to the docs...

Thanks for all the advices!

closed :-)

[Splendorr]

In case anyone is still running into this problem, I searched all over and finally solved my version of this problem. I had a vanilla installation of Wordpress with the Timber Starter Theme, and just couldn't get the current_page_item class to appear in the menu. This turned out to be because I hadn't created a Wordpress menu; I was just using the built-in menu in the Starter Theme. But apparently new TimberMenu(); needs to interact with a native Wordpress menu to get some data, including current.

In the Wordpress admin panel, I went to Appearance > Menus and created a menu called "primary_navigation". (I don't think the name of this menu matters.) Then I added all of my pages to the menu, just for good measure. I'm not directly using this menu anywhere in my template, but all of a sudden my TimberMenu has a lot more info in the array, and adds current_menu_item to the item's classes automatically!

I didn't see anywhere in the Timber or Starter Theme documentation explaining that you should create a Wordpress menu if there isn't one. Good luck to anyone who has wrestled with this!