Hyva Compatible Multi Depth Menu based on category structure

To be abandoned.

Note that I plan to abandone this module in favour of the snowdog multi-menu, which now natively supports Hyva out the box with functional menus.

This module served it's purpose for a site that needed basic multi-depth menus, right at the start, back when Hyva was just released, and nothing existed. The snowdog menu is more feature rich.

ref: https://github.com/SnowdogApps/magento2-menu

Introduction

The default Hyva menu is a flat 1 level category menu. I needed a multiple depth menu for a site build. This is the end result.

Note that as of version 1.4 the mobile menu has been completely changed to a new look/working which is more comaptible with mobile devices. The old one was just bed, i'll admit that!

Note: use the 1.1.9 branch for Hyva 1.1.9+ (< 1.2) compatibility (version 1.3.11 is latest that supports that range)

Install

You can install via composer:

run: composer config repositories.github.repo.repman.io composer https://github.repo.repman.io
use composer composer require proxi-blue/multi-menu
enable: ./bin/magento module:enable ProxiBlue_MultiMenu
run: ./bin/magento setup:upgrade
run: ./bin/magento setup:di:compile

Requirements

Hyva Theme > 1.2 (latest was self tested on 1.3) (unsupported branch and versions still exist for pre 1.2 release)
Hyva npm package > 1.0.4 (latest was self tested on 1.0.9)

You can check your version by using command npm list @hyva-themes/hyva-modules in your theme tailwind folder.

Configuration

In admin,

Stores->Configuration->General->MultiMenu
you can set the Category Depth. This will determine how many levels of pullouts are displayed
You can set if the category image should be set as an icon to the left of menu item (note: this will add a large scale load of requests to server for the images on page load)

Adding additional menu items (that are not categories)

You may want to add top level menu items, like example 'Contact Us' You can add this by layout xml update in your theme default.xml layout file. Reference the block name topmenu_multimenu_additional

<referenceBlock name="topmenu_multimenu_additional">
   <block name="topmenu_multimenu_additional_contactus" as="topmenu.additional.contactus"
       template="Magento_Theme::html/header/topmenu/additional/contact.phtml" ttl="3600"/>
</referenceBlock>

In the above example the contact.phtml file is as such:

<?php

use Magento\Framework\View\Element\Template;
use Magento\Framework\Escaper;

/** @var Template $block */
/** @var Escaper $escaper */
?>

<div class="pr-1 hidden 2xl:block">
    <a
        href="<?= $block->getUrl('contact-us') ?>"
        title="<?= $escaper->escapeHtml('Contact us'); ?>"
        class="flex items-center min-w-32 py-1 uppercase bg-transparent border rounded-sm hover:bg-secondary-darker focus:outline-none"
    ><?= $escaper->escapeHtml('Contact'); ?></a>
</div>

Usage

Well, it's a hover dropdown menu. Simply hover over menu items, and the child items will be shown.

To note is that the menu will detect the screen width end, and if any slide out items will breach the screen edge, they will be pulled to the left.

Mobile (screenshots taken from a base Hyva 1.3 install)

On any menu level > 2 two double left chevrons will be next to the X (for close) The double chevrons will take person direct back to top level main menu

Notes

I am not a master on frontend. Much can likely be improved.

This is not pure alpineJS. There is a portion of vanilla JS involved. Some can likely be refactored to be more pure Alpine, but I am still learning and don't know all the moving parts for alpine, as yet. As my knowledge progress I plan to refactor parts.

Feel free to contribute with PR's, as I can also learn from this, from you.

I needed this working for a client build, so it is AS IS.

Credits

The original tailwind css based menu dropdown was based on https://tailwindcomponents.com/component/nestable-dropdown-menu

Donations

If you use this in a commercial site, I'd appreciate a donation to my Cat Sugar Cube's toy fund ;)

ProxiBlue / hyva-proxiblue-multimenu