how i can add x-data & x-show attributes

[danyk4]

HI thank you for your work, i use it with tailpress start theme please can you tell me how to make dropdown menu i know how to do it with pure tailwind and alpine but can't integrate it into wp_nav_menu, can't add x-data and x-show.

[davidwebca]

Hi!

Sadly, this is where the limitations of this package crumble down. There's currently no way of adding custom attributes to the UL and LI tags except classes. But Alpine has a neat way of initializing itself that allows to customize the element's attributes before it runs.

<nav x-data="dropdown()">
    <?php
        wp_nav_menu([
            'theme_location' => 'primary_navigation',
            'menu_class' => 'relative w-full z-10 pl-0 list-none flex',
            'submenu_class' => 'submenu',
            'container'=>false
        ]);
    ?>
</nav>

<script>
document.addEventListener('alpine:init', () => {
  Alpine.data('dropdown', (id) => {
    /**
     * The trick is to add data at runtime
     * This executes right before the component initializes
     */
    let menu = document.getElementById(id)
    let lis = menu.querySelectorAll('li.menu-item-has-children')
    for (let i=0, il=lis.length; i < il; ++i) {
        let li = lis[i]
        let li_id = li.getAttribute('id')
        li.querySelector('.submenu').setAttribute('x-show', `menu=='${li_id}'`)
        li.querySelector('.submenu').setAttribute('x-transition', '')
        li.setAttribute('x-on:mouseenter', `menu='${li_id}'`)
        li.setAttribute('x-on:mouseleave', `menu=''`)
    }

    return {
      menu: ''
    }
  })
})
</script>

Here's a proper full example: https://codepen.io/davidwebca/pen/mdKqJBY

Another way to solve this with Alpine and the current limitations is to add the x-on:mouseenter event directly on the link (which is possible with this plugin) and check attributes on the parent element like the following example, but still having to intervene for the UL element. https://codepen.io/davidwebca/pen/eYKeJOw You can see the issue here: mouseleave doesn't trigger on the right element so it's impossible to select a link unless we add the mouseleave event on the parent LI element.

On another note, you sent me on a rabbithole because this is one of my most recurring frustrations with WordPress. I spent the last 2 hours looking into code and making a pull request + trac ticket on WordPress core. If you'd leave a comment on this trac ticket to put pressure for this to move, that would be greatly appreciated. https://core.trac.wordpress.org/ticket/57140#ticket

For more advanced usage and if you really want to have proper control over your menu generated HTML, you can have a look at Log1x's Navi: https://github.com/Log1x/navi/

[danyk4]

Hi thank you for your answer and js variants! I left a comment to your ticket, hope they will do this in far, far... future

For my project with alpine I wrote simple menu builder based on wp_get_nav_menu_items so now I handle my atrrs and classes in html and can use alpinejs as usual.

For projects with vanilla js with tailwind I used your great package! Thank you and

Have a nice day!

[davidwebca]

Just to keep things updated here, there is some momentum going on the pull request / track. I'm crossing my fingers that this will get pulled into the next version, but I can't guarantee it since it could be set aside because of different release priorities. 🤞

Pull request: https://github.com/WordPress/wordpress-develop/pull/3645 Trac: https://core.trac.wordpress.org/ticket/57140

I'll keep this issue updated as things move forward.

[danyk4]

Great! This is awesome. Thank you!

[Atem18]

Ticket as been closed on Wordpress side so I guess this can be closed ?

[davidwebca]

Yep! I refactored everything and made a release that includes a small breaking change and adds submenu attributes support + added a new example for a Alpine + collapsible menu in the readme.