Forum

Thread tagged as: Question, Problem

Selected state for sub-items of navigation

Hi,

I've looked in the forum and in the doc but can't find a way to get the sub-items of the main navigation to have a selected class.

Here's how the layout looks like:

<?php
       perch_pages_navigation(array(
              'hide-extensions' => true,
              'from-path' => '/',
              'levels'    => 3
       )); 
?>

Here's the template of the navigation :

<perch:before><ul></perch:before>
       <li class="
              <perch:if exists="current_page"> selected</perch:if>
              <perch:if exists="ancestor_page"> selected</perch:if>
              <perch:if exists="subitems"> has-subitem</perch:if>
       ">
              <a href="<perch:pages id="pagePath" />" title="">
                     <perch:pages id="title" />             
              </a>
              <perch:pages id="subitems" encode="false" />
       </li>
<perch:after></ul></perch:after>

This outputs something like:

<ul>
       <li class="">
              <a href="/" title="">Item 1</a>
       </li>
       <li class="has-subitem">
              <a href="/instruments" title="">Item 2</a>
              <ul>
                     <li class="">
                            <a href="/instruments/violon" title="">Subitem 1</a>
                     </li>
                     <li class="">
                            <a href="/instruments/violon" title="">Subitem 2</a>
                     </li>
              </ul>
       </li>
</ul>

Here, for instance, I wish to add a class selected to the <li> Item 2 when one of the page Subitem 1 or 2 is selected. The selected class is added properly when there isn't any sub-navigation.

I am running the latest version of Perch.

Am I missing something?

Cheers,

Robin Pick 5 points

6 years ago

Simon Clay 127 points

6 years ago

Hi Robin,

You can actually use two (or more) templates for Nav, to give you more control over the makeup of the sub items.

I do it like this:

<?php
       perch_pages_navigation(array(
              'hide-extensions' => true,
              'from-path' => '/',
              'levels'    => 3,
              'template' => array('level1.html', 'level2.html'),
       )); 
?>

Template for level1.html:

<li class="dropdown<perch:if exists="current_page"> active</perch:if><perch:if exists="ancestor_page"> ancestor</perch:if>">
    <a href="<perch:pages id="pagePath" />" <perch:if exists="subitems">class="dropdown-toggle js-activated" data-toggle="dropdown"</perch:if>><perch:pages id="pageNavText" /></a>
    <perch:pages id="subitems" encode="false" />
</li>

And level2.html:

<perch:before>
    <ul class="dropdown-menu">
</perch:before>
        <li <perch:if exists="current_page">class="active"</perch:if>>
            <a href="<perch:pages id="pagePath" />"><perch:pages id="pageNavText" /></a>
            <perch:pages id="subitems" encode="false" />
        </li>
<perch:after>
    </ul>
</perch:after>

Robin Pick 5 points

6 years ago

Thanks Simon, I'll give this a try and let you know how it goes!

Graham Shedden 0 points

5 years ago

I found this post useful and it solved the same issue I was having.

The documentation page does cover this too, pages_navigation.

Thanks to Simon.