Top menu item for Pelican with menu items with title, link and children.

topmenu.html

<div class="max-w-7xl mx-auto p-4">
    <nav class="flex justify-between items-center">
        <a class="inline-flex items-center no-underline" href="{{ SITEURL }}/">
            <img class="h-6 sm:h-8 lg:h-12"
                 src="/theme/img/branding/sq-logo.svg"
                 alt="logo"/>
            <p class="font-black sm:text-xl lg:text-3xl ml-3 leading-none">{{ SITENAME }}</p>
        </a>
        <div class="flex items-center">
        {% for title, link, children in MENUITEMS %}
            {% if children %}
            <div
                x-data="{
                    open: false,
                    toggle() { this.open = this.open ? this.close() : true },
                    close(focusAfter) {
                        this.open = false;
                        focusAfter && focusAfter.focus();
                    }
                }"
                @keydown.escape.prevent.stop="close($refs.button)"
                @focusin.window="! $refs.panel.contains($event.target) && close()"
                x-id="['dropdown-button']"
                class="font-bold relative"
            >
                <button
                        x-ref="button"
                        @click="toggle()"
                        :aria-expanded="open"
                        :aria-controls="$id('dropdown-button')"
                        type="button"
                        class="no-underline flex items-center gap-2 px-5 py-2.5"
                >
                    {{ title }}
                    <!-- Heroicon: chevron-down -->
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
                        <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" />
                    </svg>
                </button>
                {# dropdown panel#}
                <div
                    x-ref="panel"
                    x-show="open"
                    x-transition.origin.top.left
                    @click.outside="close($refs.button)"
                    :id="$id('dropdown-button')"
                    style="display: none;"
                    class="absolute left-0 mt-2 w-40 rounded-md bg-white shadow-md"
                >
                    {% for title, link in children %}
                        <a class="flex items-center gap-2 w-full first-of-type:rounded-t-md last-of-type:rounded-b-md px-4 py-2.5 text-left text-sm hover:bg-gray-50"
                           href="{{ link }}">{{ title }}
                        </a>
                    {% endfor %}
                </div>
            </div>
            {% else %}
            <div class="font-bold ml-6">
                <a class="no-underline inline-flex items-center" href="{{ link }}">
                    {{ title }}
                </a>
            </div>
            {% endif %}
        {% endfor %}
        </div>
    </nav>
</div>