Sub Menu

[briandea]

I need to create a submenu. Looking at the _navigation.antlers.html file can you tell me how to modify it:

     {{ nav:navigation include_home="true" }}
                        {{ partial:components.menu_item }}
                    {{ /nav:navigation }} 

to pick up the submenu items.

[Afan417]

Hello there @briandea,

You just need a simple check {{ if children }} inside {{ partial:components.menu_item }}

I made a small demo for you using Alpine JS:

{{# File: /resources/views/components/menu_item.antlers.html #}}

{{ if toggle_button }}
    <li class="py-2 lg:py-0">
        {{ partial:components.button link="{url}" color="{button_variant}" size="{button_size}" label="{title}" }}
    </li>
{{ else }}
    <li x-data="{ showSubmenu: false }">
        <a class="inline-block py-2 text-xl font-bold text-gray-900 no-underline transition-all duration-300 ease-in-out lg:text-sm lg:py-0 lg:px-0 hover:text-secondary-900"
            href="{{ url }}">
            {{ title }}
        </a>

        {{ if children }}
            <button @click="showSubmenu = ! showSubmenu" aria-label="Toggle Submenu">
                Icon {{# Replace this text with a SVG maybe #}}
            </button>

            <ul x-show="showSubmenu">
                {{ children }}
                    <li class="bg-red-200 rounded-md p-4 absolute top-8">
                        <a aria-label="{{ title }}" href="{{ url }}">
                            {{ title }}
                        </a>
                    </li>
                {{ /children }}
            </ul>
        {{ /if }}
    </li>
{{ /if }}

You need to also add a relative class to the <ul> wrapping these lines:

{{# File: /resources/views/layout/_navigation.antlers.html #}}

<ul class="relative ...">
    {{ nav:navigation include_home="true" }}
        {{ partial:components.menu_item }}
    {{ /nav:navigation }}
</ul>