Cant found any tailwind nav navbar tutorial

hello folks i am using the trial to discover pinegrow, i added a block tailwind of a header which have a burger icon and menu items, but the burger on click do nothing, i cant find any single tutorial to make a navbar using pinegrow and tailwind, if you have one please share. thanks so much.

I think Tailwind css unlike bootstrap has no animations bundled into the framework, that is you will have create the animation either with pinegrow interaction or some JS script.

There are some pretty amazing tailwind library component but to bring them into pinegrow you will have to go with the external build process. NPM etc etc…

It’s one of the thing that makes me wanna go bootstrap, in Pinegrow.

1 Like

Tailwind is just a css framework. To create a hamburger menu you will have to use javascript. You can also not use js to create it and just make it with html + css, however, the process becomes a bit more complicated.

I don’t want to be wrong but I’m pretty sure that in one of his videos, @adamslowe shows how to create a responsive navbar in Pinegrow (if I remember correctly using gsap?).

I when working with Tailwind often use alpine.js, which is very light and powerful.

1 Like

It can be done with GSAP or Pinegrow Interactions, but I wasn’t able to get it to handle keyboard focus properly with those frameworks. Alpine.js is what I’ve been using and it works pretty well.

Here is a painfully long video showing you how it’s done.

Building Responsive and Accessible Navigation Menus with Alpine.js

4 Likes

thanks you folks for your kind answers, i found this

am gonna try too the alpine way.
ty

1 Like