title: Customize the KnpMenuBundle
body: <p><strong>How to customize KNPMenuBundle?</strong></p>
  
  <p>I can't figure out how to add an image or a span tag using the KnpMenuBundle. </p>
  
  <p>I simply want this:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;ul&gt;
      &lt;li&gt;
           &lt;img src="{{asset('bundles/mybundle/images/my_image.png')}} /"&gt;
           &lt;span&gt;My Title&lt;/span&gt;        
       &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>In the MenuBuilder, this would start with:</p>
  
  <pre class="lang-php prettyprint-override"><code>$menu-&gt;addChild('My Title');
  </code></pre>
  
  <p>How could I add the image in the <code>&lt;li&gt;</code> statement?</p>
  
  <hr>
  
  <h2>EDIT: THE EASY WAY</h2>
  
  <p>There is actually an easy way to do this within the bundle:</p>
  
  <p><strong><kbd>1</kbd></strong>  <strong>Copy the template</strong> <code>vendor\KnpMenu\src\Knp\Menu\Resources\views\knp_menu.html.twig</code>
  into your <code>Acme\AcmeBundle\Resources\views\Menu\knp_menu.html.twig</code> and extend it as follow:</p>
  
  <pre class="lang-html prettyprint-override"><code>{% extends 'knp_menu.html.twig' %}
  </code></pre>
  
  <p><br />
   <strong><kbd>2</kbd></strong>  <strong>Modify the template</strong> according to your needs. For example, if you decide to add a span tag each time you use  <code>$menu-&gt;addChild('Your Title');</code>, simply add the span tag between <code>&lt;a&gt;&lt;/a&gt;</code>:</p>
  
  <pre class="lang-html prettyprint-override"><code>{% block linkElement %}
      &lt;a href="{{ item.uri }}"{{ _self.attributes(item.linkAttributes) }}&gt;
          &lt;span&gt;{{ block('label') }}&lt;/span&gt;
      &lt;/a&gt;
  {% endblock %}
  </code></pre>
  
  <p><br />
   <strong><kbd>3</kbd></strong>  <strong>You can now choose your custom layout</strong> when using the menu:</p>
  
  <pre><code>{{ knp_menu_render('main', {'template': 'AcmeBundle:Menu:knp_menu.html.twig'}) }}
  </code></pre>