Customize the KnpMenuBundle

Question

How to customize KNPMenuBundle?

I can't figure out how to add an image or a span tag using the KnpMenuBundle.

I simply want this:

<ul>
    <li>
         <img src="{{asset('bundles/mybundle/images/my_image.png')}} /">
         <span>My Title</span>        
     </li>
</ul>

In the MenuBuilder, this would start with:

$menu->addChild('My Title');

How could I add the image in the <li> statement?

EDIT: THE EASY WAY

There is actually an easy way to do this within the bundle:

1 Copy the template vendor\KnpMenu\src\Knp\Menu\Resources\views\knp_menu.html.twig into your Acme\AcmeBundle\Resources\views\Menu\knp_menu.html.twig and extend it as follow:

{% extends 'knp_menu.html.twig' %}

2 Modify the template according to your needs. For example, if you decide to add a span tag each time you use $menu->addChild('Your Title');, simply add the span tag between <a></a>:

{% block linkElement %}
    <a href="{{ item.uri }}"{{ _self.attributes(item.linkAttributes) }}>
        <span>{{ block('label') }}</span>
    </a>
{% endblock %}

3 You can now choose your custom layout when using the menu:

{{ knp_menu_render('main', {'template': 'AcmeBundle:Menu:knp_menu.html.twig'}) }}

I wanted to put the "knp_menu.html.twig" in the "app/Resouces/views" directory. This doesn't work. What can be the mistake ? — Slowwie, Feb 18 '14 at 14:44
As @DARSC0D3 have said in his [answer](http://stackoverflow.com/a/21887674/1284485), you need to import the parent template to get the attributes working. — Plínio César, May 04 '14 at 19:49
In addition to copying the template as above, one must also modify `config.yml` such that the `template:` line in `knp_menu:` block reads `YourBundle:Menu:knp_menu.html.twig`. — geoB, Jun 26 '14 at 23:05
Following your instructions ends up with `Unable to find template "AppBundle:Menu:knp_menu.html.twig"`. BTW I up-voted your answer for the time you spent on providing this tutorial — Peyman Mohamadpour, Mar 06 '17 at 12:20

score 16 · Accepted Answer · answered Jun 27 '12 at 16:17

CSS works for this case, but sometimes you might need to add or change the markup more significantly. For that you can use a custom renderer as defined here: https://github.com/KnpLabs/KnpMenuBundle/blob/master/Resources/doc/custom_renderer.md

An example of a bundle that does this is the MopaBoostrapBundle I've highlighted the important parts here.

The service definition where the knp_menu.renderer tag is added:

services:
    mopa_bootstrap.navbar_renderer:
        class: Mopa\Bundle\BootstrapBundle\Navbar\Renderer\NavbarRenderer
        arguments: [ @service_container, [] ]
        tags:
            # The alias is what is used to retrieve the menu
            - { name: knp_menu.renderer, alias: navbar }

and the twig template can be written like so, for example.

<div class="navbar {{ (navbar.hasOption('fixedTop') and  navbar.getOption('fixedTop')) ? 'navbar-fixed-top' : '' }}">
    <div class="navbar-inner">
        <div class="container{{ (navbar.hasOption('isFluid') and navbar.getOption('isFluid')) ? '-fluid' : '' }}">
            <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </a>
            {% if navbar.hasOption('title') %}<a class="brand" href="{{ path(navbar.getOption('titleRoute')) }}">{{ navbar.getOption('title') }}</a>{% endif %}
            <div class="nav-collapse">
                {{ navbar.hasMenu('leftmenu') ? knp_menu_render(navbar.getMenu('leftmenu'), {'currentClass': 'active', 'ancestorClass': 'active', 'allow_safe_labels': 'true'}) : '' }}
                {% if navbar.hasFormView('searchform') %}
                    {%- set form_view = navbar.getFormView('searchform') -%}
                    {%- set form_type = navbar.getFormType('searchform') -%}
                    {%- set form_attrs = form_view.vars.attr -%}
                    {% form_theme form_view _self %}
                    <form class="navbar-search pull-{{ form_attrs.pull|default('left') }}" method="{{ form_attrs.method|default('post') }}" action="{{ path(navbar.getFormRoute('searchform')) }}">
                    {{ form_widget(form_view) }}
                    </form>
                {% endif %}
                {{ navbar.hasMenu('rightmenu') ? knp_menu_render(navbar.getMenu('rightmenu'), {'currentClass': 'active', 'ancestorClass': 'active', 'allow_safe_labels': 'true'}) : '' }}
            </div>

        </div>
    </div>
</div>

Thanks MDrolette, this answer helped me a LOT! Your guidance was really helpful! I have done something very similar to what you recomended except that I only extended the template knp_menu.html.twig in this case. I have edited my question in case you are interested. Again, awesome reply. Cheers :-) — Mick, Jun 27 '12 at 17:36
Is there a full example of how to have a working custom renderer? https://symfony.com/doc/master/bundles/KnpMenuBundle/custom_renderer.html I have followed this but still doesnt help. — Chris, Apr 11 '18 at 20:18

score 6 · Answer 2 · answered Dec 23 '12 at 01:54

6

I spent a while figuring this out.

There is an parameter you can apply when defining the menu item called 'safe_label'. By setting this to true it output the image in the navbar instead of the html.

    $image = "<img src='/path/to/image' />";
    $menu->addChild( $image , 
      array(
        'route' => 'url_route_name',
        'extras' => array(
          'safe_label' => true
        )
      )
    );

Hope that helps

answered Dec 23 '12 at 01:54

onnyjay

61
1
2

2

Correct, but you should also use raw format when you render bundle, like: {{ knp_menu_render('main',{'template':'AcmeBundle:Menu:knp_menu.html.twig',{'allow_safe_labels': true})|raw }} – repincln Nov 13 '13 at 20:04
A minor amendment to @repincln 's life saver suggestion: the correct syntax as of symfony 2.8 is `{{ knp_menu_render('main', {'template': 'AcmeBundle:Menu:knp_menu.html.twig', 'allow_safe_labels': true})|raw }}` – Attila Fulop May 11 '16 at 19:52

score 3 · Answer 3 · answered Feb 19 '14 at 17:19

You need to import the macros from the parent template before you can use them.

{% block linkElement %}
    {% import 'knp_menu.html.twig' as knp_menu %}
    <a href="{{ item.uri }}"{{ knp_menu.attributes(item.linkAttributes) }}>
        <span>{{ block('label') }}</span>
    </a>
{% endblock %}

Aerendir · Answer 4 · 2015-02-18T18:01:28.697

To simply add classes and other HTML attributes (for example, to integrate the menù with Twitter Bootstrap addind its classes and IDs), you can use the methods provided for that sort of customization.

Here are some useful resources:

Here are all the details from KNP Menu Bundle's documentation: Creating Menus: The Basics - Menu attributes
Here are some concrete examples: (On GitHub) KNP Menu Bundle with Bootstrap 3 and Font Awesome 4

KnpMenuBundles provides some documented methods like setAttributes, selLinkAttirbute or setLabelAttribute (and other methods too) that are useful to customize the menù rendering.

score 1 · Answer 5 · answered Jun 27 '12 at 14:21

1

Why not define an attribute of the <li> or <span> element and add the image in css ?

answered Jun 27 '12 at 14:21

j0k

22,600
28
79
90

Customize the KnpMenuBundle

EDIT: THE EASY WAY

5 Answers5

Linked