how to add active class to li element in cakephp header.ctp

Question

I have a header which displays page links via <li> and <a> tags.

Here is a portion of the header:

 <div class="collapse navbar-collapse" id="main-navbar">
              <ul class="navbar-nav mr-auto">
              <li class="nav-item">
                <a class="nav-link" href="/">
                  Home
                </a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="items">
                  Explore
                </a>
              </li>
             </ul>
 </div>

How can I set the class of the <li> that belongs to the active link to active? I have code elsewhere in my project that sets an active link, but it is setting it from an array and I can't figure out how to apply it here.

Here is the code that is working from another page:

           <?php
              foreach ($categories as $category_side){
            $cat_class = '';
            if (isset($active_category) && ($active_category==$category_side['Category']['id'])){
              $cat_class = 'active';
            }
            ?>
          <li>
            <a href="/categories/view/<?php echo $category_side['Category']['id']; ?>" class="category-item <?php echo $cat_class; ?>">

              <?php echo $category_side['Category']['name_'.$txt_lang]; ?>
                                  </a>
          </li>
        <?php } ?>

I found this how to add active class in current page in CakePhp but I can't figure out how to apply it to the first block of code above.

How can I convert the first block of code above, using PHP or CakePHP functions so that the active menu's <li> class is set to "active".

Solution

Following Sehdev's answer below (accepted answer), I was able to create a solution for assigning the active class, to the active hyperlink in the header menu.

The controller and action in combination were not enough, as some pages linked to the same controller and action, but were actually different rendered views.

The solution was to use $this->here to extract the current url, like so:

(tested in CakePHP 2.9.1)

<?php
$activeurl = $this->here;
?>

<ul class="navbar-nav mr-auto">
  <li class="nav-item <?php echo (!empty($activeurl) && ($activeurl == '/'))?'active' :'inactive' ?>">
       <a class="nav-link" href="/">
         Home
       </a>
  </li>
  <li class="nav-item <?php echo (!empty($activeurl) && ($activeurl == '/items'))?'active' :'inactive' ?>">
       <a class="nav-link" href="/items">
        Explore
       </a>
  </li>
</ul>

Sehdev · Accepted Answer · 2018-07-31T05:27:14.243

For Cakephp version below 3.4.0

You can use $this->request->param. This object contains all the requested parameters like current controller, action etc.

if you want to use current page controller and action you can use the following code.

$controller = $this->request->param['controller'];
$action = $this->request->param['action'];

So if your controller is Users and action is item, you can use

<li class="nav-item <?php echo (!empty($this->request->param['action']) && ($this->param['action']=='item') )?'active' :'inactive' ?>">
                <a class="nav-link" href="items">
                  Explore
                </a>
              </li>

For Cakephp version above 3.4.0, you can use

$controllerName = $this->request->getParam('controller');

For Cakephp version 2.x

$controller = $this->request->params['controller'];

This was a great help. Thanks. It didn't work for me, as some of the urls use the same Controler and Action ; but I managed modify your solution, making use of $this->here property, and it's working great. — Gary, Jul 31 '18 at 19:53

score 0 · Answer 2 · answered Jul 31 '18 at 08:05

The request exposes routing parameters

If you are using Cakephp version above 3.5.0

$action = $this->request->getParam('action'); // Use to get action name

$controller =$this->request->getParam('controller'); //  Use to get controller name

<?php $active_class = ( in_array($action, ['dashboard']) && 
  $controller=='Users')?"class='active'":''; ?>

<li class="nav-item <?php echo $active_class; ?>">
    <a class="nav-link" href="items">
       Explore
    </a>
</li>

If you are using Cakephp version below 3.4.0

$controllerName = $this->request->params['controller'] or $this->request->param('controller');
$actionName = $this->request->params['action'] or $this->request->param('action');

<?php $active_class = ( in_array($actionName, array('dashboard')) && $controllerName=='users')?"class='active'":''; ?>

<li class="nav-item <?php echo $active_class; ?>">
    <a class="nav-link" href="items">
      Explore
    </a>
</li>

Thanks for your answer, Unfortunately I couldn't get the below 3.4.0 version to work when I tried it, the class remained unchanged. — Gary, Jul 31 '18 at 19:38
@Gary if you print $this->request->params['controller'] what is its output — Sudhir, Aug 01 '18 at 09:56

how to add active class to li element in cakephp header.ctp

2 Answers2