How do I differentiate between menu items with and without subnavigation?

The CMS Questions
1

Hello everyone!
I’m using the nested menu from your cookbook. How do I differentiate between menu items with and without subnavigation?
With my code, I unfortunately have the associated parent menu item twice in the navigation: once with sub-navigation and once without:

<?php
$items = $pages->listed();
if($items->isNotEmpty()):
?>

<ul class="menu-list">
<?php foreach($items as $item): ?>
<li class="menu-list-item <?php e($item->isOpen(), 'active') ?>">
<a class="alt-font" href="<?= $item->url() ?>"><?= $item->title()->html() ?></a>

<?php
$children = $item->children()->listed();
if($children->isNotEmpty()):
?>

<li class="menu-list-item">
<a href="javascript:void(0);" class="alt-font"><?= $item->title()->html() ?></a><span class="menu-toggle"></span>
<ul class="sub-menu-item">
<?php foreach($children as $child): ?>
<li class="<?php e($child->isOpen(), 'active"') ?>">
<a href="<?= $child->url() ?>"><?= $child->title()->html() ?></a>
</li>
<?php endforeach ?>
</ul>
</li>

<?php endif ?>
</li>
<?php endforeach ?>
</ul>
<?php endif ?>

navigation
navigation576×1476 43.3 KB

Surely it’s just an additional if query required, or a Kirby class is required that I don’t know about yet. However, I’m stuck on the spot right now and can’t find a solution.

Thanks for the support.

2

Well, you didn’t really copy the tree menu, that’s why.

Here you repeat it, so you indeed need another if statement to prevent that.



<ul class="menu-list">
<?php foreach($items as $item): ?>
<?php $children = $item->children()->listed(); ?>
<?php if ($children->isEmpty()): ?>
<li class="menu-list-item <?php e($item->isOpen(), 'active') ?>">
<a class="alt-font" href="<?= $item->url() ?>"><?= $item->title()->html() ?></a>

<?php
$children = $item->children()->listed();
else:
?>

<li class="menu-list-item">
<a href="javascript:void(0);" class="alt-font"><?= $item->title()->html() ?></a><span class="menu-toggle"></span>
<ul class="sub-menu-item">
<?php foreach($children as $child): ?>

<li class="<?php e($child->isOpen(), 'active"') ?>">
<a href="<?= $child->url() ?>"><?= $child->title()->html() ?></a>
<?php endif ?>
</li>
<?php endforeach ?>
</ul>
</li>


</li>
<?php endforeach ?>
</ul>
<?php endif ?>

I might have a syntax error here because the code is not properly indented…

1 Like
3

Thanks for your code adjustment. I had also received a syntax error and could not find the error. In order not to get stuck, I had ChatGPT check the code. Now the menu works as it should. Here is the corrected code:
(To keep the code clearer, I removed some CSS classes).

<?php
$items = $pages->listed();
if ($items->isNotEmpty()):
?>

<ul class="menu-list">
<?php foreach ($items as $item): ?>
    <?php $children = $item->children()->listed(); ?>
    <?php if ($children->isEmpty()): ?>
        <li class="menu-list-item <?php e($item->isOpen(), 'active') ?>">
            <a href="<?= $item->url() ?>"><?= $item->title()->html() ?></a>
        </li>
    <?php else: ?>
        <li class="menu-list-item">
            <a href="javascript:void(0);"><?= $item->title()->html() ?></a><span class="menu-toggle"></span>
            <ul class="sub-menu-item">
                <?php foreach ($children as $child): ?>
                    <li class="<?php e($child->isOpen(), 'active') ?>">
                        <a href="<?= $child->url() ?>"><?= $child->title()->html() ?></a>
                    </li>
                <?php endforeach ?>
            </ul>
        </li>
    <?php endif ?>
<?php endforeach ?>
</ul>
<?php endif ?>