Question

I have a twig-template (with twitter bootstrap) with the following code – it’s a navbar:

<ul class="nav">
    <li class="active"><a href="#">Modul 1</a></li>
    <li><a href="#about">Modul 2</a></li>
    <li><a href="#contact">Modul 3</a></li>
</ul>

This code is in my global.html.twig. So I want to change the class=”active” in the list element depending on the page that is opened.

How can I achieve this without adding too much logic in my template?

Answer 1

The only way to achieve this without too much overhead is the use of KnpLabs/KnpMenuBundle.

In your global.html.twig:

<ul class="nav">
  {{ knp_menu_render('YourModule1Bundle:MenuBuilder:module1Menu', {'currentClass': 'active'}) }}
  {{ knp_menu_render('YourModule2Bundle:MenuBuilder:module2Menu', {'currentClass': 'active'}) }}
  {{ knp_menu_render('YourModule3Bundle:MenuBuilder:module3Menu', {'currentClass': 'active'}) }}
</ul>

In your Module1 bundle directory:

• Create a Menu folder
• Create MenuBuilder.php as follows:

–

<?php
namespace YourMenu1Bundle\Menu;

use Knp\Menu\FactoryInterface;
use Symfony\Component\DependencyInjection\ContainerAware;

class MenuBuilder extends ContainerAware
{
  public function applicationMenu(FactoryInterface $factory, array $options)
  {
      $rootMenu = $factory->createItem('rootMenu');
      $rootMenu->setChildrenAttributes(array('class' => 'nav'));
      $rootMenu->setCurrentUri($this->container->get('request')->getRequestUri());
      $menu = $rootMenu->addChild('Module 1', array('route' => 'the_wanted_route'));
      return $rootMenu;
  }
}