How do I add active class in menu link using CakePHP?

Question

I have a page in my default.ctp file in which I want to add 'active' class on links. How can I identify the current URL of the page and then apply the class on link?

For identify link I am using:

<li class="<?php echo (!empty($this->params['action']) &&   ($this->params['action']=='view') )?'active' :'inactive' ?>" >

Here, the different controller I have has the same action link in view. How do I control this same name?

            <nav class="top-bar">
                <ul class="title-area">
                    <li class="name"></li>
                    <li class="toggle-topbar menu-icon">
                        <a href="#"><span>Menu</span></a>
                    </li>
                </ul>
                <section class="top-bar-section">
                    <ul class="left">
                        <li>
                            <?php
                            echo $this->Html->link('Home', array('controller' => 'pages', 'action' => 'index'));
                            ?>
                        </li>
                        <li><a href="#">Destinations</a></li>
                        <li >
                            <?php
                            echo $this->Html->link('Hotels', array('controller' => 'hotels', 'action' => 'view'));
                            ?>
                        </li>
                        <li >

                            <?php
                            echo $this->Html->link('Packages', array('controller' => 'packages', 'action' => 'view'));
                            ?>
                        </li>
                        <li >
                            <?php
                            echo $this->Html->link('Search', array('controller' => 'hotels', 'action' => 'search'));
                            ?>
                        </li>
                        <li>
                            <?php
                            echo $this->Html->link('Booking', array('controller' => 'reservations', 'action' => 'reservation'));
                            ?>
                        </li>
                        <li><a href="#">Trains</a></li>
                    </ul>
                </section>
            </nav>

Answer 1

This is how do it (very rough):

In AppController:

protected $active_item;
public function beforeRender() {
parent::beforeRender();
$this->set("active", $this->active_item);
}

In a controller:

$this->active_item = "your_action";

and in a view:

<li class=" <?php echo (($this->params['action'] = $active ) )?'active_item' :'' ?>">
<?php echo $this->Html->link('...', array('controller' => '...', 'action' =>     'your_action'));?>
</li>

Answer 2

Let's assume you have an array of URL (you should have something like that to avoid code duplication):

$urls = array(
    array(
        'label' => 'Home',
        'url' => array('controller' => 'pages', 'action' => 'home')
    ),
    array(
        'label' => 'Login',
        'url' => array('controller' => 'users', 'action' => 'login')
    ),
    /* And so one... */
);

Then you loop over this array to create your, menu like so, with a test to add active class:

 <ul class="left">
 <?php 
     foreach ($urls as $url) {
         $active = (Router::normalize(Router::url()) === Router::normalize($url['url'])) ? 'active' : '' ;
         echo '<li class="'.$active.'">'.$this->Html->link($url['label'], $url['url']).'</li>' ;
     }
 ?>
 </ul>

Answer 3

Both answers are right, but i think it's better to put this logic into a helper.

MenuHelper.php

class MenuHelper extends Helper {

    [...]

    /**
    * Checks the passed parameter about the current controller. If so, return the text to
    * fill the active menu class link. If not, returns null.
    *
    * @param $controller
    * @return null|string
    */
    function activeClass($controller) {
        return $this->request->params['controller'] === $controller ? 'active' : null;
    }
}

In your view:

<a class="<?php echo $this->Menu->activeClass('some_page') ?>" href="#">PAGE TITLE</a>