Dayo

Aujourd’hui, je vais parler de l’intégration de Bootstrap et KnpMenuBundle.

Je pars du principe que vous avez déjà un template avec les ressources de Bootstrap d’inclus.

L’installation et l’utilisation du bundle sont simples et bien expliquées la documentation. Afin de bien intégrer Bootstrap j’ai du chercher quelques petites sur le net que je rassemble ici.

Afin que tout fonctionne correctement, les éléments du menu doivent être ajoutés comme suivant :

$menu->addChild('Home', array(
    'route' => 'route_name', 
    'routeParameters' => array('slug' => $myth->getSlug()), 
    'attributes' => array('class' => 'nav-header')
));

 

Ajouter les classes sur la balise <ul>

Cela ne semble pas bien compliqué, pourtant j’ai trouvé que la documentation n’était pas vraiment claire, voici donc comment faire.
Après avoir créé notreMenuFactory  il nous faut simplement appeler la fonction setChildrenAttribute()  sur notre instance

$menu = $factory->createItem('root');
$menu->setChildrenAttribute('class', 'nav nav-list');

Définir l’élément actuel

Afin de définir l’élément actuel du menu, il faut appeler la fonction setCurrentUri() de MenuFactory .

$menu = $factory->createItem('root');
$menu->setChildrenAttribute('class', 'nav nav-list');
$menu->setCurrentUri($this->container->get('request')->getRequestUri());

 Changer l’attribut de l’élément courant

Cette fois direction le template de la page, il faut appeler la fonction twig suivante  avec un paramètre pour spécifier la classe de l’élément courant.

{{ knp_menu_render('AcmeDemoBundle:MenuBuilder:mainMenu', {'currentClass': 'active'}) }}

Vous obtiendez alors un menu prêt pour le design fuild de Bootstrap.