Zend Framework 2 Navigation Submenu (Top menu)

Question

I'm building a menu using ZF2 and bootstrap and I already have this kind of menu:

Home | Users | Options

But now I need submenus, but I couldn't find a way to do so. I need something like hover the menu item (Ex: User) and then show 'List', 'Add', 'Edit'

I would really appreciate any help.

Thanks

Answer 1

You can achieve this with a partial view.

In you configuration file e.g. config/autoload/global.php :

return array(

    // Your others config arrays

    'navigation' => array(
        'default' => array(
            array(
                'label' => 'Home',
                'route' => 'home',
            ),
            array(
                'label' => 'User',
                'route' => 'user',
                'pages' => array(
                    array(
                        'label' => 'List',
                        'route' => 'list',
                    ),
                    array(
                        'label' => 'Add',
                        'route' => 'add',
                    ),
                    array(
                        'label' => 'Edit',
                        'route' => 'edit',
                    ),
                ),
            ),
            array(
                'label' => 'Options',
                'route' => 'options',
            ),
        )
    )
);

In your layout file, e.g. view/layout/layout.phtml :

<nav>
    <?php
    echo $this->navigation('navigation')
              ->menu()
              ->setPartial('partial/menu')
              ->render();
    ?>
</nav>

The partial view, here view/partial/menu.phtml :

<ul>
<?php
foreach ($this->container as $page)
{
    $hasChildren = $page->hasPages();
    if( ! $hasChildren)
    {
        ?>
        <li><a href="<?php echo $page->getHref(); ?>"><?php echo $page->getLabel(); ?></a></li>
        <?php
    }
    else
    {
        ?>
        <li>
            <a href="<?php echo $page->getHref(); ?>"><?php echo $page->getLabel(); ?></a>
            <ul>
            <?php
            foreach($page->getPages() as $child)
            {
                ?>
                <li><a href="<?php echo $child->getHref(); ?>"><?php echo $child->getLabel(); ?></a></li>
                <?php
            }
            ?>
            </ul>
        </li>
        <?php
    }
}
?>
</ul>

If you need CSS samples you can find some in this answer :

https://stackoverflow.com/a/13328340/3294723