Custom Web Applications to Grow Your Business

(256) 429-8145

How to create Multi-level navigational menu with CakePHP

Here is a simple way to create a multi-level navigational menu in cakePHP.

First create a mysql table:

CREATE TABLE IF NOT EXISTS `menus` (
`id` int(11) NOT NULL,
`title` varchar(150) DEFAULT NULL,
`title_slug` varchar(170) DEFAULT NULL,
`content` text,
`parent` int(10) NOT NULL,
`sortby` int(11) NOT NULL );

Create MenusController.php and create the following action. The following code will list all the menu items and get a count of submenu items if menu item is a parent.
Add $this->autoRender = false; to it so that it cannot be accessed directly

public function displayChildren($parent, $level) {
        $this->loadModel('Menu');
        $menus = $this->Menu->query("SELECT m.id, m.title,  m.title_slug, m.sortby, p.Count FROM `menus` m  
        LEFT OUTER JOIN (SELECT parent, COUNT(*) AS Count FROM `menus` GROUP BY parent)
        p ON m.id = p.parent WHERE m.parent='$parent' ORDER BY m.sortby");
        
        return $menus;
    }

In you View/Elements/menu.ctp add the following code that gets the results of MenusController.php

<?php
                            $menus = $this->requestAction('menus/displayChildren/0/1');                            
                            
                            $level = 1;
                            foreach($menus as $menu) {
                                if ($menu['p']['Count'] > 0) {
                                    echo "<li class='dropdown'><a class='dropdown-toggle' href='#'>" .strtoupper($menu['m']['title']). "</a>";        
                                    // new level
                                    $menus = $this->requestAction('menus/displayChildren/'.$menu['m']['id'].'/'.($level + 1));
                                    echo "<ul class='dropdown-menu'>";
                                    foreach($menus as $menu) {
                                        echo "<li><a href='".$menu['m']['title_slug'] . "'>" .$menu['m']['title']. "</a></li>";
                                    }
                                    echo "</ul>";        
                                    echo "</li>";
                                } elseif ($menu['p']['Count']==0) {
                                    echo "<li class='dropdown mega-menu'><a href='".$menu['m']['title_slug']. "'>" . strtoupper($menu['m']['title']) . "</a></li>";
                                } else;
                            }                                 
                            echo "</ul>";
                            ?>