WordPress Drop Down Menu With Tailwind

Hi all,

I’m having trouble getting WordPress dropdown menus to work using Pinegrow and Tailwind.

My set up looks like this:

But my front end looks like this:

I’m sure I’m missing something, but can’t work it out. Can anyone point me in the right direction with this?

Thanks

You need to have the sub menus hidden by default, then appear on hover. ou can do this with PG interactions, or just css like:

.wp-nav-menu li:hover>ul.sub-menu {
display: inline
}

I’ve hit the same wall. After hours trying to build a simple WordPress menu in Pinegrow, I honestly felt like I was fighting the tool, not working with it. Even with Claude AI’s help, it turned into a time-consuming mess for what should be a basic task.

And let’s be real—Tailwind integration was supposed to make Pinegrow more accessible to web designers with minimal dev skills. That was the pitch. But here we are, and even experienced users are getting stuck trying to build a dropdown menu. That’s a major red flag.

The submenu issue isn’t new—it keeps coming up, over and over again. Yet, somehow, there’s still no official solution, no built-in pattern, and no real guidance. Why hasn’t the team addressed this directly? No documentation, no templates, not even a public acknowledgment that this is a recurring pain point.

Sure, there’s @adamslowe’s Alpine.js tutorial, but it’s over an hour long just to create basic navigation. That’s not usability—that’s endurance training.

I tried using Kadence Pro Blocks just to get a working nav up and running. It worked—but the tradeoff was running two block systems side by side, which made no long-term sense. So I ended up just fully switching to Kadence’s ecosystem, even though I genuinely didn’t want to. That should tell you something.

What makes this worse is Pinegrow’s complete lack of roadmap. Every release is a mystery drop. That might be fun for the devs, but it creates zero trust for users trying to commit to the platform. The unpredictability pushes people away—not because they don’t like Pinegrow, but because they can’t rely on it.

Meanwhile, The new kid on the block EtchWP is shaping up to do exactly what Pinegrow should’ve nailed: simplicity, structure, and a clear path forward.

And on the AI front—there’s so much potential, but it should be more integrated in pinegrow itself. Why don’t pg team create a GPT bot and then train it properly. ( Hey pinegrow, how do i do this or that? kinda of thing..) Something that understands Pinegrow’s quirks and can guide people step by step. Right now it’s just a missed opportunity.

Bottom line: users are burning hours on basic stuff, and they’re not getting answers. That’s how trust is lost—even from people who want Pinegrow to succeed.

1 Like

Hey @tohotysuka - I think you’ve summed it up well there.

It’s a real struggle to get to grips with PG. I keep coming back to it to try again and it’s still not there yet.

What I was hoping for was a way to be able to create a theme relatively quickly and the ability to be able to create blocks to deliver to clients without adding another plugin.

I’m checking out Etch as well. Also waiting for is the production version of Oxygen 6.

1 Like

@tohotysuka @Phil1 I’ve shared examples of menus with dropdowns using Tailwind CSS multiple times when asked for support, but I haven’t received any feedback yet.*

*Feedback that might have eventually led me to publish an article depending on the success of the implementations submitted on this occasion.

To work with the smart action Menu, the menu structure needs to be simple and effective. There’s no secret to it: you can either use CSS to display dropdowns or JavaScript, depending on what you want. Pinegrow doesn’t offer a ready-made solution, but it gives you the flexibility to integrate either option.

Nothing stops a web designer from creating reusable blocks for all their WordPress projects. As for our friend Adam’s documentation, it covers an essential topic: accessibility. Every designer should consider this aspect, even though some existing or potential tools provide ready-made menus that don’t always meet basic accessibility standards.

We’ve been around for over 14 years with our theme builder, which has evolved significantly. While we don’t publish a roadmap, one thing is certain: we’ve always adapted to the needs of modern WordPress development, and the openness of our solution allows us to fill any gaps that might exist.

Going back to the WordPress menu using Tailwind, I can share a sample project with anyone interested. Just get in touch with support.

Once I get enough feedback, and if the method works well (and if it meets expectations), it will be published as documentation.

Thanks @Emmanuel , I have that and I’m still trying to work it out so I have one menu for desktop and one for mobile so that I can animate the mobile menu.

I’ll stick with PG as I’ve already invested a lot of time and I think it will satisfy my requirements.

I think what we could really do with is a properly structured course that walks you through the process from start to finish.

Here’s a quick and straightforward video about the sample project I can provide:

Note: Sorry for any hiccups while navigating through the project. I quickly put together this video because I really wanted to show a working project :slight_smile:

4 Likes

Hey @Emmanuel, interesting. Is the project file from the video clip available? I’d love to take a closer look at the structure to better understand how it’s set up.

Thanks a lot in advance!