Wiki

#Perch Runway Collection Menu

This is to document how to make a menu with collection items. For this project I needed a Services collection, consisting of a Services page with Service sub pages as menu items in the Header Nav of my project.

The project also uses Bulma Navbar.

To achieve, you need to of setup a Perch Collection and then the following templates require creating if you haven't already done so.

/layouts/global/header.php
/navigation/level_1.html
/navigation/level_2.html
/services/nav.html

The amount of navigation levels will depend on your project. As Services is my collection, nav.html resides in the same folder. You will need to change accordingly.

Thank you to @husseinalhammad for his massive contribution.

##header.php

// The header can be as you wish, the important bit is the php code to render the menu.

<?php
  $services_nav = perch_collection('Services', ['template' => 'services/nav.html'], true);
  PerchSystem::set_var('services_nav', $services_nav);
  perch_pages_navigation(array(
    'navgroup' => 'header-nav',
    'levels' => 2,
    'template' => array('level_1.html', 'level_2.html'),
    'hide-extensions' => true,
  ));
?>

// This defines our variable and identifies the template required for our menu.

##level_1.html

<perch:before>
<div id="navMenu" class="navbar-menu">
  <div class="navbar-end">
</perch:before>
  <perch:if exists="subitems">
    <div class="navbar-item has-dropdown is-hoverable">
      <a class="navbar-link" href="<perch:pages id=" pagePath" />">
      <perch:pages id="pageNavText" /></a>
      <perch:pages id="subitems" encode="false" />
    </div>
  <perch:else>
    <perch:if id="pagePath" value="/services"> <!--* Looks for our Services Collection *-->
      <div class="navbar-item has-dropdown is-hoverable">
        <a class="navbar-link" href="<perch:pages id=" pagePath" />">
        <perch:pages id="pageNavText" /></a>
        <perch:pages id="services_nav" html> <!--* Calls our nav defined in header.php *-->
      </div>
    <perch:else>
      <a class="navbar-item" href="<perch:pages id=" pagePath" />"><perch:pages id="pageNavText" /></a>
    </perch:if>
  </perch:if>
<perch:after>
    <div class="navbar-item">
      <div class="buttons">
        <div class="search-open" title="Close mobile menu">
          <a class="search-button" href="#serachbox"><i class="fal fa-search"></i></a>
        </div>
      </div>
    </div>
  </div>
</div>
</perch:after>

##level_2.html

<perch:before>
<div class="navbar-dropdown is-boxed">
</perch:before>
  <a class="navbar-link" href="<perch:pages id="pagePath" />"><perch:pages id="pageNavText" /></a>
  <perch:if id="pageNavText" value="Services"> <!--* Looks for our Services Collection *-->
    <perch:pages id="services_nav" html> <!--* Calls our nav defined in header.php *-->
  <perch:else>
    <perch:pages id="subitems" encode="false" />
  </perch:if>
<perch:after>
</div>
</perch:after>

##services/nav.html

<perch:before>
  <div class="navbar-dropdown is-boxed">
</perch:before>
    <a class="navbar-item" href="/services/<perch:content id="slug" />"><perch:content id="title"></a> <!--* Collection Slug and Title *-->
<perch:after>
  </div>
</perch:after>