Using KnpMenuBundle

Step 1: Download the Bundle

Open a command console, enter your project directory and execute the following command to download the latest stable version of this bundle:

1

composer require knplabs/knp-menu-bundle

This command requires you to have Composer installed globally, as explained in the installation chapter of the Composer documentation.

Step 2: Enable the Bundle

KnpMenuBundle should be automatically enabled and configured, thanks to Flex.

If you don't use Flex, you can manually enable it, by adding the following line in your project's Kernel:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

// e.g. app/AppKernel.php

// ...
class AppKernel extends Kernel
{
    public function registerBundles()
    {
        $bundles = [
            // ...

            new Knp\Bundle\MenuBundle\KnpMenuBundle(),
        ];

        // ...
    }

    // ...
}

Step 3: (optional) Configure the bundle

The bundle comes with a sensible default configuration, which is listed below. You can define these options if you need to change them:

1
2
3
4
5
6
7
8
9
10

# config/packages/knp_menu.yaml
knp_menu:
    # use "twig: false" to disable the Twig extension and the TwigRenderer
    twig:
        template: KnpMenuBundle::menu.html.twig
    # if true, enables the helper for PHP templates
    # support for templating is deprecated, it will be removed in next major version
    templating: false
    # the renderer to use, list is also available by default
    default_renderer: twig

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

<!-- config/packages/knp_menu.xml -->
<?xml version="1.0" charset="UTF-8" ?>
<container xmlns="http://symfony.com/schema/dic/services"
    xmlns:knp-menu="http://knplabs.com/schema/dic/menu">

    <!--
        templating:       if true, enable the helper for PHP templates (deprecated)
        default-renderer: the renderer to use, list is also available by default
    -->
    <knp-menu:config
        templating="false"
        default-renderer="twig"
    >
        <!-- add enabled="false" to disable the Twig extension and the TwigRenderer -->
        <knp-menu:twig template="KnpMenuBundle::menu.html.twig"/>
    </knp-menu:config>
</container>

1
2
3
4
5
6
7
8
9
10
11

// config/packages/knp_menu.php
$container->loadFromExtension('knp_menu', [
    // use 'twig' => false to disable the Twig extension and the TwigRenderer
    'twig' => [
        'template' => 'KnpMenuBundle::menu.html.twig'
    ],
    // if true, enable the helper for PHP templates (deprecated)
    'templating' => false,
    // the renderer to use, list is also available by default
    'default_renderer' => 'twig',
]);

Method a) The Easy Way (yay)!

To create a menu, first create a new class in the Menu directory of one of your bundles. This class - called Builder in our example - will have one method for each menu that you need to build.

An example builder class would look like this:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

// src/Menu/Builder.php
namespace App\Menu;

use App\Entity\Blog;
use Knp\Menu\FactoryInterface;
use Knp\Menu\ItemInterface;

final class Builder
{
    public function __construct(
        private EntityManagerInterface $em,
    ) {
    }

    public function mainMenu(FactoryInterface $factory, array $options): ItemInterface
    {
        $menu = $factory->createItem('root');

        $menu->addChild('Home', ['route' => 'homepage']);

        // findMostRecent and Blog are just imaginary examples
        $blog = $this->em->getRepository(Blog::class)->findMostRecent();

        $menu->addChild('Latest Blog Post', [
            'route' => 'blog_show',
            'routeParameters' => ['id' => $blog->getId()]
        ]);

        // create another menu item
        $menu->addChild('About Me', ['route' => 'about']);
        // you can also add sub levels to your menus as follows
        $menu['About Me']->addChild('Edit profile', ['route' => 'edit_profile']);

        // ... add more children

        return $menu;
    }
}

With the standard knp_menu.html.twig template and your current page being 'Home', your menu would render with the following markup:

1
2
3
4
5
6
7
8
9
10
11
12
13

<ul>
    <li class="current first">
        <a href="#route_to/homepage">Home</a>
    </li>
    <li class="current_ancestor">
        <a href="#route_to/page_show/?id=42">About Me</a>
        <ul class="menu_level_1">
            <li class="current first last">
                <a href="#route_to/edit_profile">Edit profile</a>
            </li>
        </ul>
    </li>
</ul>

To actually render the menu, just do the following from anywhere in any template:

1

{{ knp_menu_render('App:Builder:mainMenu') }}

1

<?php echo $view['knp_menu']->render('App:Builder:mainMenu') ?>

With this method, you refer to the menu using a three-part string: bundle:class:method.

If you needed to create a second menu, you'd simply add another method to the Builder class (e.g. sidebarMenu), build and return the new menu, then render it via App:Builder:sidebarMenu.

That's it! The menu is very configurable. For more details, see the KnpMenu documentation.

Method b) A menu builder as a service

For information on how to register a menu builder as a service, read Creating Menu Builders as Services.

Method c) A menu as a service

For information on how to register a service and tag it as a menu, read Creating Menus as Services.