Forum

Thread tagged as: Question

Navigation with dropdown - selecting the parent page

With Bootstrap navigation, the parent of dropdown menus are given a # as the href which toggles the dropdown, enabling touch screen users to see the 'hover state'.

But, this means the parent item is not accessible because it does not appear in the dropdown list.

Is there a way to get Perch to output the parent item in the dropdown menu too?

<li class="dropdown">
 <a href="javascript:void(0);" class="dropdown-toggle" data-toggle="dropdown">About Us</a>
 <ul class="dropdown-menu dropdown-menu-left">
  <!--Would like link to 'About us' to go here-->
  <li><a href="#">Job Vacancies</a></li>
  <li><a href="#">Accreditations</a></li>
  <li><a href="#">Our Clients</a></li>
  <li><a href="#">News</a></li>
 </ul>
</li>
Simon Clay

Simon Clay 127 points

  • 5 years ago
Drew McLellan

Drew McLellan 2638 points
Perch Support

5 years ago

What does your template look like?
Simon Clay

Simon Clay 127 points

5 years ago 
<?php 
perch_pages_navigation(array(
'template' => array('level1.html', 'level2.html'),
));
?>

level1.html

<li <perch:if exists="subitems">class="dropdown"</perch:if>>
    <a href="<perch:if exists="subitems">javascript:void(0);<perch:else /><perch:pages id="pagePath" /></perch:if>" class="<perch:if exists="current_page"> active</perch:if><perch:if exists="ancestor_page"> ancestor</perch:if> <perch:if exists="subitems">dropdown-toggle</perch:if>" <perch:if exists="subitems">data-toggle="dropdown"</perch:if>> <perch:pages id="pageNavText" /></a>
    <perch:pages id="subitems" encode="false" />
</li>

level2.html

<perch:before>
  <ul class="dropdown-menu dropdown-menu-left">
</perch:before>
  <li>
    <a href="<perch:pages id="pagePath" />"><perch:pages id="pageNavText" /></a>
    <perch:pages id="subitems" encode="false" />
  </li>
<perch:after>
  </ul>
</perch:after>
Drew McLellan

Drew McLellan 2638 points
Perch Support

5 years ago

level1.html

<li <perch:if exists="subitems">class="dropdown"</perch:if>>
    <a href="<perch:if exists="subitems">javascript:void(0);<perch:else /><perch:pages id="pagePath" /></perch:if>" class="<perch:if exists="current_page"> active</perch:if><perch:if exists="ancestor_page"> ancestor</perch:if> <perch:if exists="subitems">dropdown-toggle</perch:if>" <perch:if exists="subitems">data-toggle="dropdown"</perch:if>> <perch:pages id="pageNavText" /></a>

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

level2.html

  <li>
    <a href="<perch:pages id="pagePath" />"><perch:pages id="pageNavText" /></a>
    <perch:pages id="subitems" encode="false" />
  </li>
Simon Clay

Simon Clay 127 points

5 years ago

Thank you very much.
Andrew Cetnarskyj

Andrew Cetnarskyj 0 points

5 years ago

Simon, did you create pages with no content to make the parent, in your case an empty "About Us" page?
Simon Clay

Simon Clay 127 points

5 years ago

Hi Andrew, no I didn't, the About Us page has content.
Andrew Cetnarskyj

Andrew Cetnarskyj 0 points

5 years ago

If anyone is using Foundation 6 then this is what I i created and it worked for me, the pages with no link I set as a top level page as a link.

level1.html

<li <perch:if exists="subitems">class="has-submenu"</perch:if>>

    <a href="<perch:if exists="subitems">#<perch:else /><perch:pages id="pagePath" /></perch:if>" class="<perch:if exists="current_page"> active</perch:if><perch:if exists="ancestor_page"> ancestor</perch:if>" <perch:if exists="subitems">data-submenu</perch:if>>
      <perch:pages id="pageNavText" />
    </a>

<perch:if exists="subitems" >
    <ul class="submenu mega menu vertical" data-submenu>
</perch:if>

    <perch:pages id="subitems" encode="false" />

<perch:if exists="subitems">
    </ul>
</perch:if>

</li>

level2.html

<li class="<perch:if exists="current_page"> active</perch:if><perch:if exists="ancestor_page"> ancestor</perch:if>">
  <a href="<perch:pages id="pagePath" />" title="<perch:pages id="pageNavText" />"><perch:pages id="pageNavText" /></a>
  <perch:pages id="subitems" encode="false" />
</li>