Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Twitter Bootstrap Twig Template for KnpMenuBundle in Symfony2
<?php
namespace Linkofy\CommonBundle\Menu;
use Knp\Menu\FactoryInterface;
use Symfony\Component\DependencyInjection\ContainerAware;
class Builder extends ContainerAware
{
public function mainMenu(FactoryInterface $factory, array $options)
{
$menu = $factory->createItem('root');
$menu->setChildrenAttribute('class', 'nav pull-right');
$menu->addChild('User')
->setAttribute('dropdown', true);
$menu['User']->addChild('Profile', array('uri' => '#'))
->setAttribute('divider_append', true);
$menu['User']->addChild('Logout', array('uri' => '#'));
$menu->addChild('Language')
->setAttribute('dropdown', true)
->setAttribute('divider_prepend', true);
$menu['Language']->addChild('Deutsch', array('uri' => '#'));
$menu['Language']->addChild('English', array('uri' => '#'));
return $menu;
}
}
{% extends 'knp_menu.html.twig' %}
{% block item %}
{% import "knp_menu.html.twig" as macros %}
{% if item.displayed %}
{%- set attributes = item.attributes %}
{%- set is_dropdown = attributes.dropdown|default(false) %}
{%- set divider_prepend = attributes.divider_prepend|default(false) %}
{%- set divider_append = attributes.divider_append|default(false) %}
{# unset bootstrap specific attributes #}
{%- set attributes = attributes|merge({'dropdown': null, 'divider_prepend': null, 'divider_append': null }) %}
{%- if divider_prepend %}
{{ block('dividerElement') }}
{%- endif %}
{# building the class of the item #}
{%- set classes = item.attribute('class') is not empty ? [item.attribute('class')] : [] %}
{%- if item.current %}
{%- set classes = classes|merge([options.currentClass]) %}
{%- elseif item.currentAncestor %}
{%- set classes = classes|merge([options.ancestorClass]) %}
{%- endif %}
{%- if item.actsLikeFirst %}
{%- set classes = classes|merge([options.firstClass]) %}
{%- endif %}
{%- if item.actsLikeLast %}
{%- set classes = classes|merge([options.lastClass]) %}
{%- endif %}
{# building the class of the children #}
{%- set childrenClasses = item.childrenAttribute('class') is not empty ? [item.childrenAttribute('class')] : [] %}
{%- set childrenClasses = childrenClasses|merge(['menu_level_' ~ item.level]) %}
{# adding classes for dropdown #}
{%- if is_dropdown %}
{%- set classes = classes|merge(['dropdown']) %}
{%- set childrenClasses = childrenClasses|merge(['dropdown-menu']) %}
{%- endif %}
{# putting classes together #}
{%- if classes is not empty %}
{%- set attributes = attributes|merge({'class': classes|join(' ')}) %}
{%- endif %}
{%- set listAttributes = item.childrenAttributes|merge({'class': childrenClasses|join(' ') }) %}
{# displaying the item #}
<li{{ macros.attributes(attributes) }}>
{%- if is_dropdown %}
{{ block('dropdownElement') }}
{%- elseif item.uri is not empty and (not item.current or options.currentAsLink) %}
{{ block('linkElement') }}
{%- else %}
{{ block('spanElement') }}
{%- endif %}
{# render the list of children#}
{{ block('list') }}
</li>
{%- if divider_append %}
{{ block('dividerElement') }}
{%- endif %}
{% endif %}
{% endblock %}
{% block dividerElement %}
{% if item.level == 1 %}
<li class="divider-vertical"></li>
{% else %}
<li class="divider"></li>
{% endif %}
{% endblock %}
{% block dropdownElement %}
{%- set classes = item.linkAttribute('class') is not empty ? [item.linkAttribute('class')] : [] %}
{%- set classes = classes|merge(['dropdown-toggle']) %}
{%- set attributes = item.linkAttributes %}
{%- set attributes = attributes|merge({'class': classes|join(' ')}) %}
{%- set attributes = attributes|merge({'data-toggle': 'dropdown'}) %}
<a href="#"{{ macros.attributes(attributes) }}>{{ block('label') }} <b class="caret"></b></a>
{% endblock %}
{% block label %}{{ item.label|trans }}{% endblock %}
{{ knp_menu_render('LinkofyCommonBundle:Builder:mainMenu', {'currentClass': 'active'}) }}
@hpatoio

This comment has been minimized.

Copy link

hpatoio commented Dec 5, 2012

Hello, I'm trying to use your template but I get this error message:

Method "currentAncestor" for object "Knp\Menu\MenuItem" does not exist in kernel.root_dir/Resources/views/knpmenu.html.twig at line 21 

I'm on Symfony 2.1.4

@Gregoire-M

This comment has been minimized.

Copy link

Gregoire-M commented Jan 21, 2013

@hpatoio Replace it by "matcher.isAncestor(item, options.depth)" like in the original template.

@Gregoire-M

This comment has been minimized.

Copy link

Gregoire-M commented Jan 21, 2013

I've forked this gist to fix the bug reported by @hpatoio
I've also added the ability to handle submenus.

See https://gist.github.com/4585334

@kbsali

This comment has been minimized.

Copy link

kbsali commented Apr 2, 2013

Great! Thanks @mrflory !

@hpatoio

This comment has been minimized.

Copy link

hpatoio commented Jan 21, 2014

Is there a version for Bootstrap3 for the twig file ?

@DC-development

This comment has been minimized.

Copy link

DC-development commented Mar 11, 2014

very cool , thanks a lot ! @mrflory

@nateevans

This comment has been minimized.

Copy link

nateevans commented Apr 3, 2014

I've made updates to these tut files (http://bit.ly/1sd1rJr) to work with Bootstrap 3 and Font Awesome 4. You really only need to change the MenuBuilder.php file and the index.html.twig file to update sources and classes.

see https://gist.github.com/nateevans/9958390

@nes15411

This comment has been minimized.

Copy link

nes15411 commented Sep 1, 2015

very cool!!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.