Sub-menu items

[milo695]

Hi all,
I'm using this:
https://demo.seavuel.com/
admin login:
https://demo.seavuel.com/processwire/
admin
123456789

Installed ProcessMenuBuilder to finaly be able to group and handle menu items and create sub-menu entries, but I can't get it to work. It's there in the backend, but nothing changes in the frontend.
I need help with /partials/_menu.php code to get ProcessMenuBuilder to work.

This is the /partials/_menu.php:
 

<?php namespace ProcessWire; ?>
<nav id="menu-main" class="navbar navbar-light navbar-expand-lg fixed-top" role="navigation">
    <div class="container">
        <div class="d-none d-lg-block">
            <a class="logo-centered animated fadeInDown" title="<?php echo $homepage->title; ?>" href="<?php echo $homepage->url?>">
                <img itemprop="logo" class="hvr-grow" src="<?php echo $theme_page->big_logo->size(400, 120, ['upscaling' => false, 'cropping' => false])->url; ?>" alt="<?php echo $theme_page->big_logo->title ?>">
            </a>
        </div>

        <a class="navbar-brand animated" title="<?php echo $homepage->title; ?>" href="<?php echo $homepage->url?>">
            <img src="<?php echo $theme_page->small_logo->size(130, 32, ['upscaling' => false, 'cropping' => false])->url; ?>" alt="<?php echo $theme_page->small_logo->title ?>">
        </a>

        <div class="dropdown ml-auto" id="languageCollapse">
            <button class="navbar-toggler mr-2 border-0 collapsed" type="button" data-toggle="dropdown" data-target="#languageCollapse" aria-controls="languageCollapse" aria-expanded="false" aria-label="Toggle language">
                <span class="lang-sm-disabled dropdown-toggle" lang="<?php echo $language_code; ?>"><?php echo strtoupper($language_code); ?></span><span class="caret"></span>
            </button>
            <div class="d-lg-none dropdown-menu dropdown-menu-right mt-2">
                <?php include 'partials/_languages-dropdown.php' ?>
            </div>
        </div>

        <button class="navbar-toggler border-0 collapsed" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
            <span class="icon-bar top-bar"></span>
            <span class="icon-bar middle-bar"></span>
            <span class="icon-bar bottom-bar"></span>
            <span class="sr-only">Toggle navigation</span>
        </button>

        <div class="collapse navbar-collapse" id="navbarCollapse">
            <ul class="navbar-nav mr-auto">
            <?php foreach ($homepage->children as $item): ?>
                <li class="nav-item">
                    <a class="nav-link" href="<?php echo $item->url; ?>"<?php if ($item->id == $page->rootParent->id): ?> class="active"<?php endif; ?> title="<?php echo $item->title; ?>">
                        <?php echo $item->title; ?>
                    </a>
                </li>
            <?php endforeach; ?>
            </ul>
            <ul class="d-none d-lg-flex navbar-nav ml-auto">
                <li class="nav-item dropdown ml-auto">
                    <a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown">
                        <span class="lang-sm-disabled" lang="<?php echo $language_code; ?>"><?php echo strtoupper($language_code); ?></span><span class="caret"></span>
                    </a>
                    <div class="dropdown-menu dropdown-menu-right">
                        <?php include 'partials/_languages-dropdown.php' ?>
                    </div>
                </li>
             </ul>
        </div>
    </div>
</nav>

thank you for any help you can provide.

 

 

 

[Gideon So]

Hi @milo695,

<?php foreach ($homepage->children as $item): ?>
                <li class="nav-item">
                    <a class="nav-link" href="<?php echo $item->url; ?>"<?php if ($item->id == $page->rootParent->id): ?> class="active"<?php endif; ?> title="<?php echo $item->title; ?>">
                        <?php echo $item->title; ?>
                    </a>
                </li>
            <?php endforeach; ?>
            

This piece of code only loop through the children page of the home page. Therefore only first level menu items are shown.

You need to loop through the sub page of each $item to show all the subitems.

<?php foreach ($homepage->children as $item): ?>
                <li class="nav-item">
                    <a class="nav-link" href="<?php echo $item->url; ?>"<?php if ($item->id == $page->rootParent->id): ?> class="active"<?php endif; ?> title="<?php echo $item->title; ?>">
                        <?php echo $item->title; ?>
                    </a>
					<?php if($item->children->count()): // if there is a child page, loop through all the child page ?>
						<ul>
							<?php foreach($item->children as $subitem): //loop through all the sub-page of the current $item ?>
                          	<li class="nav-item">
                    			<a class="nav-link" href="<?php echo $subitem->url; ?>"<?php if ($subitem->id == $page->rootParent->id): ?> class="active"<?php endif; ?> title="<?php echo $subitem->title; ?>">
                        		<?php echo $subitem->title; ?>
                    			</a>
							</li>
							<?php endforeach; ?>
						</ul>
					<?php endif; ?>
                </li>
            <?php endforeach; ?>
            

You can modify  it to suit your theme to make the dropdown work,

 

Gideon

[milo695]

Hi, I did try, but got this errors:
Warning: count() expects at least 1 parameter, 0 given in \site\templates\partials\_menu.php on line 37
and
Notice: Object of class ProcessWire\PageArray could not be converted to number in \site\templates\partials\_menu.php on line 37

Here's the code of my _menu.php:
 

<?php namespace ProcessWire; ?>
<nav id="menu-main" class="navbar navbar-light navbar-expand-lg fixed-top" role="navigation">
    <div class="container-fluid">
        <div class="d-none d-lg-block">
            <a class="logo-centered animated fadeInDown" title="<?php echo $homepage->title; ?>" href="<?php echo $homepage->url?>">
                <img itemprop="logo" class="hvr-grow" src="<?php echo $theme_page->big_logo->size(400, 120, ['upscaling' => false, 'cropping' => false])->url; ?>" alt="<?php echo $theme_page->big_logo->title ?>">
            </a>
        </div>

        <a class="navbar-brand animated" title="<?php echo $homepage->title; ?>" href="<?php echo $homepage->url?>">
            <img src="<?php echo $theme_page->small_logo->size(130, 32, ['upscaling' => false, 'cropping' => false])->url; ?>" alt="<?php echo $theme_page->small_logo->title ?>">
        </a>

        <div class="dropdown ml-auto" id="languageCollapse">
            <button class="navbar-toggler mr-2 border-0 collapsed" type="button" data-toggle="dropdown" data-target="#languageCollapse" aria-controls="languageCollapse" aria-expanded="false" aria-label="Toggle language">
                <span class="lang-sm-disabled dropdown-toggle" lang="<?php echo $language_code; ?>"><?php echo strtoupper($language_code); ?></span><span class="caret"></span>
            </button>
            <div class="d-lg-none dropdown-menu dropdown-menu-right mt-2">
                <?php include 'partials/_languages-dropdown.php' ?>
            </div>
        </div>

        <button class="navbar-toggler border-0 collapsed" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
            <span class="icon-bar top-bar"></span>
            <span class="icon-bar middle-bar"></span>
            <span class="icon-bar bottom-bar"></span>
            <span class="sr-only">Toggle navigation</span>
        </button>

        <div class="collapse navbar-collapse" id="navbarCollapse">
            <ul class="navbar-nav ml-auto">
            <?php foreach ($homepage->children as $item): ?>
                 <li class="nav-item">
                    <a class="nav-link" href="<?php echo $item->url; ?>"<?php if ($item->id == $page->rootParent->id): ?> class="active"<?php endif; ?> title="<?php echo $item->title; ?>">
                        <?php echo $item->title; ?>
                    </a>
					<?php if($item->children-count()): // if there is a child page, loop through all the child page ?>
						<ul>
							<?php foreach($item->children as $subitems): //loop through all the sub-page of the current $item ?>
                          	<li class="nav-item">
                    			<a class="nav-link" href="<?php echo $item->url; ?>"<?php if ($item->id == $page->rootParent->id): ?> class="active"<?php endif; ?> title="<?php echo $item->title; ?>">
                        		<?php echo $item->title; ?>
                    			</a>
							</li>
							<?php endforeach; ?>
						</ul>
					<?php endif; ?>
                </li>			
            <?php endforeach; ?>
            </ul>
			<ul class="d-none d-lg-flex navbar-nav ml-auto">
                <li class="nav-item dropdown ml-auto">
                    <a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown">
                        <span class="lang-sm-disabled" lang="<?php echo $language_code; ?>"><?php echo strtoupper($language_code); ?></span><span class="caret"></span>
                    </a>
                    <div class="dropdown-menu dropdown-menu-right">
                        <?php include 'partials/_languages-dropdown.php' ?>
                    </div>
                </li>
             </ul> 		
        </div>
    </div>
</nav>

I messed something up...
 

[BitPoet]

Just a typo, a missing ">" in this line, $item->children-count() vs. $item->children->count().

<?php if($item->children-count()): // if there is a child page, loop through all the child page ?>
						

 

[Gideon So]

I edited my original post. Please take a look.

Gideon