Nested Menu - sub menu items not collasping

I am using the code from the Nested menu page as per below. The nested menu items do not collapse under the main heading for the section. So you have Services | Mindfulness | Therapy-services all on the same level. How do I fix this problem? Thanks.

CleanShot 2023-05-23 at 1.32.09

 <nav class="nav-collapse">
		<ul class="header-links">
		  <?php foreach($items as $item): ?>
			<li>
			  <a<?php e($item->isOpen(), 'class="active"') ?> href="<?= $item->url() ?>"><?= $item->title()->html() ?></a>
	
				<?php
				// get all children for the current menu item
				
				  $children = $item->children()->listed();
	
				  // display the submenu if children are available
				  if ($children->isNotEmpty()) :
				  ?>+<ul class="sub-menu">
					  <?php foreach ($children as $child) : ?>
						<li>
						  <a<?php e($child->isOpen(), ' class="active"') ?> href="<?= $child->url() ?>"><?= $child->title()->html() ?></a>
						</li>
					  <?php endforeach ?>
					</ul>
				  <?php endif ?>
				
			</li>
		  <?php endforeach ?>
		</ul>
	  </nav>

This is just code that doesn’t come with any styling, so you have to take care of this yourself.

If I was going to use something like this CSS-Only Accessible Dropdown Navigation Menu | Modern CSS Solutions how do I know where to markup the code if I have two separate sub-menus using the code above?

Not tested but i think something like this should do it:

<nav aria-label="Main Navigation">
	<ul>
		<?php foreach ($items as $item) : ?>

			<?php
			// get all children for the current menu item

			$children = $item->children()->listed();

			// display the submenu if children are available
			if ($children->isNotEmpty()): ?>

				<li class="dropdown">
					<!-- aria-expanded needs managed with Javascript -->
					<button <?php e($item->isOpen(), 'class="active"') ?> type="button" class="dropdown__title" aria-expanded="false" aria-controls="<?= $item->title()->html() ?>-dropdown">

						<?= $item->title()->html() ?>
					</button>

					<ul class="dropdown__menu" id="="<?= $item->title()->html() ?>-dropdown"">
						<?php foreach ($children as $child) : ?>
							<li>
								<a<?php e($child->isOpen(), ' class="active"') ?> href="<?= $child->url() ?>"><?= $child->title()->html() ?></a>
							</li>
						<?php endforeach ?>
					</ul>
				</li>

			<?php else : ?>

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

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

Thanks, but it does not work. Loads code into the page output.

There’s just a PHP opening tag missing in the button, should be

<button <?php e($item->isOpen(), 'class="active"') ?> type="button" class="dropdown__title" aria-expanded="false" aria-controls="<?= $item->title()->html() ?>-dropdown">

Oh whoops! i wondered why it colured half of it blue! sorry about that, i couldnt spot the mistake before i had to pop out for a while.

Hi,

Thanks for your help. I added the code but I get an offline message. The code now is:

<nav aria-label="Main Navigation">
	<ul>
		<?php foreach ($items as $item) : ?>

			<?php
			// get all children for the current menu item

			$children = $item->children()->listed();

			// display the submenu if children are available
			if ($children->isNotEmpty()): ?>

				<li class="dropdown">
					<!-- aria-expanded needs managed with Javascript -->
					<button <?php e($item->isOpen(), 'class="active"') ?> type="button" class="dropdown__title" aria-expanded="false" aria-controls="<?= $item->title()->html() ?>-dropdown">
						<?= $item->title()->html() ?>
					</button>

					<ul class="dropdown__menu" id="="<?= $item->title()->html() ?>-dropdown"">
						<?php foreach ($children as $child) : ?>
							<li>
								<a<?php e($child->isOpen(), ' class="active"') ?> href="<?= $child->url() ?>"><?= $child->title()->html() ?></a>
							</li>
						<?php endforeach ?>
					</ul>
				</li>

			<?php else : ?>

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

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

Follow the instructions in the message and report the error that shows up.

Follow the instructions in the message and report the error that shows up.

I don’t see any instructions.

The message I get is:
This page is currently offline due to an unexpected error. We are very sorry for the inconvenience and will fix it as soon as possible.

Advice for developers and administrators:
Enable debug mode to get further information about the error.

Whoops\Exception\ErrorException thrown with message “Undefined variable $items”

Stacktrace:
#19 Whoops\Exception\ErrorException in /Users/dr/sites/localhost/Mindful/site/snippets/header.php:12
#18 Whoops\Run:handleError in /Users/dr/sites/localhost/Mindful/site/snippets/header.php:12
#17 include in /Users/dr/sites/localhost/Mindful/kirby/src/Filesystem/F.php:425
#16 Kirby\Filesystem\F:loadIsolated in /Users/dr/sites/localhost/Mindful/kirby/src/Filesystem/F.php:364
#15 Kirby\Filesystem\F:Kirby\Filesystem{closure} in /Users/dr/sites/localhost/Mindful/kirby/src/Filesystem/F.php:372
#14 Kirby\Filesystem\F:load in /Users/dr/sites/localhost/Mindful/kirby/src/Toolkit/Tpl.php:34
#13 Kirby\Toolkit\Tpl:load in /Users/dr/sites/localhost/Mindful/kirby/src/Template/Snippet.php:173
#12 Kirby\Template\Snippet:factory in /Users/dr/sites/localhost/Mindful/kirby/config/components.php:284
#11 Kirby\Cms\Core:{closure} in /Users/dr/sites/localhost/Mindful/kirby/src/Cms/App.php:1618
#10 Kirby\Cms\App:snippet in /Users/dr/sites/localhost/Mindful/kirby/config/helpers.php:515
#9 snippet in /Users/dr/sites/localhost/Mindful/site/templates/home.php:2
#8 include in /Users/dr/sites/localhost/Mindful/kirby/src/Filesystem/F.php:425
#7 Kirby\Filesystem\F:loadIsolated in /Users/dr/sites/localhost/Mindful/kirby/src/Filesystem/F.php:364
#6 Kirby\Filesystem\F:Kirby\Filesystem{closure} in /Users/dr/sites/localhost/Mindful/kirby/src/Filesystem/F.php:372
#5 Kirby\Filesystem\F:load in /Users/dr/sites/localhost/Mindful/kirby/src/Toolkit/Tpl.php:34
#4 Kirby\Toolkit\Tpl:load in /Users/dr/sites/localhost/Mindful/kirby/src/Template/Template.php:155
#3 Kirby\Template\Template:render in /Users/dr/sites/localhost/Mindful/kirby/src/Cms/Page.php:1071
#2 Kirby\Cms\Page:render in /Users/dr/sites/localhost/Mindful/kirby/src/Cms/App.php:796
#1 Kirby\Cms\App:io in /Users/dr/sites/localhost/Mindful/kirby/src/Cms/App.php:1235
#0 Kirby\Cms\App:render in /Users/dr/sites/localhost/Mindful/index.php:5

So the error message tells you what the problem is: Your variable $items is not defined.

So the error message tells you what the problem is: Your variable $items is not defined.

I don’t understand how do you define the variable $items?

Please refer to the recipe where you found the code. It’s all there.