Improve Menu Template for Expandable Submenus with Alpine.js

Created on 6 August 2025, 24 days ago

Problem/Motivation

The current menu.html.twig in the Seeds UI theme does not support interactive dropdown menus for items with children.

Steps to reproduce

Enable a multi-level menu in a theme based on Seeds UI.

View the menu on desktop or mobile.

Menu items with children (item.below) are not expandable via click.

There is no JavaScript behavior to handle opening and closing submenus.

Proposed resolution

Enhance the menu.html.twig template with Alpine.js to allow dropdown toggling:

Add x-data="{ open: false }" to

  • elements with children.

    Use @click="open = !open" and @click.outside="open = false" to manage open/close behavior.

    Replace parent link with for accessibility and interaction.

    Add appropriate classes like dropdown, dropdown-menu, and conditionally open.

  • Feature request
    Status

    Active

    Version

    1.0

    Component

    Code

    Created by

    🇯🇴Jordan mahmoud barhouma

    Live updates comments and jobs are added and updated live.
    Sign in to follow issues

    Comments & Activities

    Production build 0.71.5 2024