Dropwon menu and structure with first and second level

Kirby 3 Solved ✅
1

Hi,

I’m just starting with Kirby. I have a navbar with the main menu and associated submenu.

I would like, if possible, a dropdown menu when clicking on one of the main menu items.

I’ve seen some solutions online but I’m having trouble applying them to my code.

Thanks for your help.

<?php $menu = $site->menu()->toStructure(); ?>
  <?php if ($menu->isNotEmpty()) : ?>
  <ul class="nav-list lg:space-x-4 flex flex-col lg:flex-row flex-wrap lg:justify-center">
    <?php foreach ($menu as $item): ?>
      <?php if ($mainMenuItem = $item->firstLevel()->toPage()) : ?>
        <li><a href="<?= $mainMenuItem->url() ?>"><?= $mainMenuItem->title() ?></a>
        <?php endif ?>
        <?php $subMenu = $item->secondLevel()->toPages(); ?>
        <?php if ($subMenu->isNotEmpty()) : ?>
          <ul class="navbar-dropdown-close">
            <?php foreach ($subMenu as $subItem) : ?>
                <li><a href="<?= $subItem->url() ?>"><?= $subItem->title() ?></a></li>
            <?php endforeach ?>
          </ul>
        </li>
        <?php endif ?>
        <?php endforeach ?>
  	</ul>
  <?php endif ?>
2

The code looks ok, and this is basically a question of CSS or maybe JS, and maybe adapting the logic a bit.

But how to best implement this also depends on whether or not the mainMenuItem is a page that needs to be accessible. If so, you should implement a drop-down that appears on hover rather than on click.

3

Thank of lot for you response. And sorry for my late answering …

Here, my solution. This can be maybe useful for someone.

<nav class="border-gray-200 px-24 bg-whiter">
 <div class="mx-auto flex max-w-screen-xl flex-wrap items-center justify-center p-4">
  <div class="hidden w-full md:block md:w-auto" id="navbar-dropdown">
   <?php $menu = $site->menu()->toStructure(); ?>
   <?php if ($menu->isNotEmpty()) : ?>
    <ul class="mt-4 flex flex-col rounded-lg p-4 font-medium rtl:space-x-reverse dark:border-gray-700 dark:bg-gray-800 md:mt-0 md:flex-row md:space-x-8 md:border-0 md:bg-white md:p-0 md:dark:bg-gray-900">
     <?php foreach ($menu as $index => $item): ?>
      <?php if ($mainMenuItem = $item->firstLevel()->toPage()) : ?>
      <?php $subMenu = $item->secondLevel()->toPages(); ?>
      <?php if ($subMenu->isNotEmpty()) : ?>
       <li>
	    <button id="dropdownNavbarLink" data-dropdown-toggle="dropdownHover<?= $index ?>" data-dropdown-trigger="hover" class="flex w-full items-center justify-between rounded px-3 py-2 text-gray-600 hover:bg-transparent dark:focus:text-white md:w-auto md:border-0 md:p-0 md:hover:bg-transparent md:hover:text-rose-500">
	     <a href="<?= $mainMenuItem->url() ?>"><?= $mainMenuItem->title(). ' ▾'?></a>
	    </button>
	    <!-- Dropdown menu -->
      	<div id="dropdownHover<?= $index ?>" class="z-10 hidden w-44 divide-y divide-gray-100 rounded-lg bg-white font-normal shadow dark:divide-gray-600 dark:bg-gray-700">
		<ul class="py-2 text-sm text-gray-600" aria-labelledby="dropdownLargeButton">
		<?php foreach ($subMenu as $subItem) : ?>
		  <li>
	          <a href="<?= $subItem->url() ?>" class="block px-4 py-2 hover:bg-transparent"><?= $subItem->title() ?></a>
		 </li>
		<?php endforeach ?>
		</ul>
	    </div>
	  </li>
	 <?php else: ?>
	  <li>
	   <a href="<?= $mainMenuItem->url() ?>" class="block rounded px-3 py-2 text-gray-600 hover:bg-transparent md:border-0 md:p-0 md:hover:bg-transparent md:hover:text-rose-500"><?= $mainMenuItem->title() ?></a>
	 </li>
	 <?php endif ?>
	<?php endif ?>
	<?php endforeach ?>
      </ul>
    <?php endif ?>
    </div>
  </div>
</nav>