Add Class to knp menu root Element with Twig

Question

what is the correct way to add a class to knp_menu's root element <ul> with twig?

i tried a lot of things:

1.

{{ knp_menu_render('main', {'class': 'foo'}) }}

2.

{{ knp_menu_render('main', {'attributes': {'class': 'foo'}}) }}

3.

{{ knp_menu_render('main', {'listAttributes': {'class': 'foo'}}) }}

4.

{{ knp_menu_render('main', {'attributes': {'listAttributes': {'class': 'foo'}}}) }}

none of them worked

qooplmao · Accepted Answer · 2016-06-08T11:19:07.820

You can add it in your menu builder like..

$menu = $this->factory->createItem('root', array(
    'childrenAttributes'    => array(
        'class'             => 'foo',
    ),
));

Update

I just got a notification about this and found another way although it requires you to use a custom template to achieve it.

In your custom template you need to override the list block like..

{% block list %}
    {% if item.hasChildren and options.depth is not sameas(0) and item.displayChildren %}
        {% import 'knp_menu.html.twig' as knp_menu %}
        <ul{{ knp_menu.attributes(listAttributes|merge({'class': [
                options.rootClass is defined ? options.rootClass : '',
                listAttributes.class is defined ? listAttributes.class : ''
            ]|join(' ')
        })) }}>
            {% set options = options|merge({'rootClass': '' }) %}
            {{ block('children') }}
        </ul>
    {% endif %}
{% endblock %}

In this rather than use knp_menu.attributes(listAttributes) you pass in a array with your on-the-fly generated listAttributes.class value. This attribute is generate by joining option.rootClass (if it exists) with listAttributes.class (if it exists) as the listAttributes.class value.

The option.rootClass value is reset to '' after use using {% set options = options|merge({'rootClass': '' }) %} so that it is not added to every sub-menu.

This will allow you to render your menu using..

{{ knp_menu_render('main', {'rootClass': 'foo' }) }}

i'll upvote your answer, but not accept it, because it is not the solution i want... — hereandnow78, Jun 19 '14 at 13:34
would you please kindly shed some more light on how and where to create this template file and how to use it? I can not get it to work. tnx — Peyman Mohamadpour, Mar 06 '17 at 11:45
This was quite a while ago so I can't be sure but I think you would need to set you template location in the `knp_menu` config under `twig.template`. See http://symfony.com/doc/master/bundles/KnpMenuBundle/index.html#step-3-optional-configure-the-bundle — qooplmao, Mar 13 '17 at 07:04

score 3 · Answer 2 · answered Sep 01 '14 at 10:09

3

Have not found a clean solution to pass params in view also. My solution in the builder class:

$menu->setChildrenAttribute('id', 'boo') ->setChildrenAttribute('class', 'foo');

answered Sep 01 '14 at 10:09

Aistis

3,695
2
34
34

You can also use the `$menu->setChildrenAttributes(['id' => 'myId', 'class' => 'myClass']);` method to set multiple attributes. – mneute Jun 17 '16 at 07:16
question is set class in template not in builder – Developer May 30 '18 at 12:25

score 1 · Answer 3 · answered Feb 23 '17 at 17:14

1

Try to

{% set menu = knp_menu_get('AppBundle:Builder:categoriesMenu', [], {'childrenAttributes': {'class': 'menu'}}) %}
{{ knp_menu_render(menu) }}

answered Feb 23 '17 at 17:14

user5363925

11
1

score 1 · Answer 4 · answered Nov 24 '17 at 13:20

1

{% set menu = knp_menu_get('AppBundle:Builder:mainMenu', []) %}
{% do menu.setChildrenAttribute('class', 'child-class') %}
{% knp_menu_render(menu, {'currentClass': 'active'}) %}

found here https://github.com/KnpLabs/KnpMenu/issues/166

answered Nov 24 '17 at 13:20

Galina Bublik

418
7
14

Add Class to knp menu root Element with Twig

4 Answers4

Linked