KnpMenuBundle - send Options and use them in Twig

Question

I wrote the last days on my nav-bar-menu whit KnpMenuBundle. I want simply to give the template a few parameters on the way and then react on it. Is it possible? I tried this:

$menu->addChild('Registration', array('route' => 'fos_user_registration_register',
                                      'icon'  => array('glyphicon' => 'briefcase')));

And then I want to pick this in Twig template:

{% if icon['glyphicon'] is defined %}
    <span class="glyphicon glyphicon-{{icon['glyphicon']}} "></span>
{% endif %}

I tried a lot, but nothing works. What can I try next?

Answer 1

Here is how i did it

The Menu class:

$menu->addChild('Home', array(
    'route' => 'home',
    'extras' => array('icon' => 'home')
));

My menu call in the template, i ask for a specific twig template

{{ knp_menu_render('MyBundle:Menu:primaryNav', {'template': 'MyBundle:Menu:primaryNav.html.twig'}) }}

In the twig template, i copy/paste the knpmenubundle template and edit some blocks. you may be able to do this with 'extends' and template's inheritance stuffs as well (probably a better idea).

Example of edited block for icon :

{% block spanElement %}
<a href="#" class="dropdown-toggle">
    {% if item.extras.icon is defined %}<i class="icon-{{ item.extras.icon }}"></i>{% endif %}
    <span class="menu-text"> {{ block('label') }}</span>
    <b class="arrow icon-angle-down"></b>
</a>
{% endblock %}

What you needed was probably this "extras" field in the menu class :)

Answer 2

I don't know if this can still help but there's a much easier way to use font awesome with knp menu. There's an option where you can give a class to your link. You just need to create a child without a label an add setLinkAttribute. Ex:

$menu
  ->addChild('', array('route' => 'backend_index'))
  ->setLinkAttribute('class', 'fa fa-home');

This will create an "a" tag with the class fa fa-home. Even if Font Awesome documentation says the icons are designed for inline elements, it will work with "a" tag. You can then use some css to improve the design. In my case, I just changed font-size and line-height.