accordion.php

<div class="flex flex-col divide-y divide-primary-400">
	<?php foreach ($items as $index => $item): ?>
		<div x-disclosure class="">
			<div

				class="flex w-full items-center divide-x divide-primary-400"
			>
				<a href="<?= $item->url; ?>" class="block px-4 py-3 uppercase text-white grow font-serif">
					<?= $item->title; ?>
				</a>

				<?php if (count($item->children)): ?>
					<div x-disclosure:button class="relative shrink text-2xl text-white px-4 py-2 cursor-pointer w-12 h-12">
						<span x-show="$disclosure.isOpen" x-cloak aria-hidden="true" class="absolute left-1/2 top-1/2 -translate-y-1/2 -translate-x-1/2 transform leading-none">&minus;</span>
						<span x-show="! $disclosure.isOpen" aria-hidden="true" class="absolute left-1/2 top-1/2 -translate-y-1/2 -translate-x-1/2 transform leading-none">&plus;</span>
					</div>
				<?php endif; ?>
			</div>

			<?php if (count($item->children)): ?>
				<div x-disclosure:panel x-collapse class="py-1 divide-y divide-primary-400" :class="$disclosure.isOpen ? 'border-t border-primary-400' : ''">
					<?php foreach ($item->children as $index => $item): ?>
						<a href="<?= $item->url; ?>" class="block text-white font-serif px-4 py-3 uppercase">
							<?= $item->title; ?>
						</a>
					<?php endforeach; ?>
				</div>
			<?php endif; ?>
		</div>

	<?php endforeach; ?>
</div>

dropdown.php

<nav x-data="{open: false, id: null}" x-on:m0ouseleave="open = false, id = null" class="">
	<ul class="flex justify-center divide-x divide-solid divide-slate-300">
		<?php foreach ($items as $item): ?>
			<li x-data="{active: false}" class="first:pl-0 px-4 last:pr-0" x-on:mouseover="show = true, id = <?= $item->id; ?>">
				<a href="<?= $item->url; ?>" class=" leading-none block text-lg font-serif uppercase text-gray-900 hover:text-primary transition-colors">
					<?= $item->title; ?>
				</a>
				<?php if (count($item->children)): ?>
					<div x-cloak x-show="id === <?= $item->id; ?>" x-on:mouseleave="id = null" class="absolute bg-white top-full left-0 right-0 z-30 shadow">
						<div class="container px-5">
							<div class="py-6">
								<ul class="grid gap-4 place-content-center grid-cols-4 xl:grid-cols-5">
									<?php foreach ($item->children as $child): ?>
										<li>
											<a href="<?= $child->url; ?>" class="block hover:text-primary text-center font-serif uppercase p-3 bg-gray-50 hover:bg-gray-100 dark:hover:bg-gray-700">
												<?= $child->title; ?>
											</a>
										</li>
									<?php endforeach; ?>
								</ul>
							</div>
						</div>
					</div>
				<?php endif; ?>
			</li>
		<?php endforeach; ?>
	</ul>
</nav>

MenuPage.php

<?php namespace ProcessWire;

class MenuPage extends Page
{

   protected $menu_items;

   public function getDepthStructure(): array
   {
      $repeater_structure = [];
      $path = [];
      foreach ($this->get('menu_items') as $item) {
         /* @var RepeaterPage $item */
         $depth = $item->getDepth();
         while ($depth < count($path)) array_pop($path);
         $path[$depth] = $item->id;
         $reference = &$repeater_structure;
         foreach ($path as $key) $reference = &$reference[$key];
      }

      return $repeater_structure;
   }

   public function extractData($depth_structure, $menu_items, $items) {
      foreach ($depth_structure as $id => $nested) {
         $item = $this->menu_items->get("id=$id");
         $data = $item->get('menu_item_data');
         $items[$id] = WireData([
            'id'       => $item->id,
            'title'    => $data->title ?: ($data->item->id ? $data->item->title : ''),
            'url'      => $data->link ?: ($data->item->id && $data->item->getLanguages()->has(wire()->user->language) ? $data->item->url : ''),
            'depth'    => $item->depth,
            'children' => []
         ]);

         if (is_array($nested)) $items[$id]->set('children', $this->extractData($nested, $menu_items, []));
      }

      return $items;
   }

   public function getItems(bool $depth = false)
   {
      $menu_items = $this->get('menu_items');
      $this->menu_items = $this->get('menu_items');

      if ($depth === true) {
         $depth_structure = $this->getDepthStructure();
         $items = $this->extractData($depth_structure, $menu_items, []);
      } else {
         $items = $menu_items->explode(function ($item) use ($depth) {
            $data = $item->get('menu_item_data');

            return WireData([
               'id'    => $item->id,
               'title' => $data->title ?: ($data->item->id ? $data->item->title : ''),
               'url'   => $data->link ?: ($data->item->id && $data->item->getLanguages()->has($this->wire()->user->language) ? $data->item->url : ''),
               'depth' => $item->depth
            ]);
         });
      }

      return $items;
   }
}

simple.php

<div class="flex justify-center divide-x divide-solid divide-slate-300">
	<?php foreach ($items as $index => $item): ?>
		<a href="<?= $item->url; ?>" class="first:pl-0 px-3 leading-none last:pr-0 block font-serif text-xs uppercase text-slate-300 hover:text-primary transition-colors">
			<?= $item->title; ?>
		</a>
	<?php endforeach; ?>
</div>