Building a Responsive Navbar with TailwindCSS & Alpine.js [TUTORIAL]

This video goes over the basics of building a responsive navigation bar with Tailwind and Alpine.js. It's fully mobile responsive and has a mobile menu.
The base component was taken from Meraki UI: merakiui.com/
Cloudways, my preferred host for deploying side projects quickly: www.cloudways....
Source: gist.github.co...
My Blog: davidgrzyb.com

[@markbarton]

Really clear explanation David. Describing what the tailwind classes do and why you are adding them is very helpful.

[@MrWeedzor]

David, thank you so much for this tutorial. I've just started using Alpine and I was struggling to figure out a way to display the navigation on desktop, but hide it by default on mobile, without duplicating content. Your method worked like a charm.

[@abhishekmalik8210]

Hey David,
Nice example.
Another useful addition would be to add `@click.away="isOpen=false"` along with ``:class="isOpen ? 'show' : 'hidden'" on the parent div of menu. Now you can set `@click="isOpen = true"` on the button.
This ensures the menu closes if anything outside the menu area is clicked (including the menu toggle button) :)

[@DavidGrzyb]

Nice! Thanks for the tip :)

[@stevenelson43]

Thank you for this! I haven’t found many demonstrations on how to make alpine.js responsive. I found references to x-cloak, but your class binding approach should do what I need. Just in time, too!

[@DavidGrzyb]

You are welcome! There a couple of different ways to make responsive UIs work with Alpine and this one is my go to!

[@stevenelson43]

@@DavidGrzyb I'm still trying to figure out how all of this works. My concern - correct me if I'm wrong - is that the default alpine.js show/hide approach evidently applies a display:none class to hide DOM elements. Is this not an accessibility concern for something as critical as a menu? That's why your "hidden" class approach appealed to me, but hidden has its own potential issues… So tricky to discern an approach that is both robust and accessible, especially when I'm also trying to parse Tailwind syntax in my head as I look at your markup. Thanks for your reply and your example.

[@wobsoriano]

this is great. hope your channel grows big!

[@khatabwedaa8929]

Thanks for using Meraki UI appreciate that 🤝✨.

[@DavidGrzyb]

Thanks for the awesome UI kit, I've been showing it to anyone who is looking for some components for their projects!

[@twodimensions459]

amazing tutorial .. hoping to see more in tailwind

[@sunrisepicturesent6615]

Thanks for this helpful tip David

[@dadinhoschannel4003]

Pretty nice video.
Congrats

[@flashbangstudio9102]

simple, basic, verry usefull, thank you

[@relaxwithnetia5409]

Kindly create a ecommerce website with tailwind and laravel. Simple clear explanations appreciated though. Kudos

[@muhammadabdi4996]

Thanks for the great tutorial

[@warpig2786]

I enjoyed this video.

[@DavidGrzyb]

Glad you enjoyed it

[@fikrifauzi8152]

Thank you very much

[@jafajarvis324]

its working fine when i am using @click inside x-show div .. if i set show to out of x-show div it does nothing.. how to make it work

[@filament02]

hey i use this tutorial to create the navabar of my website and its was working but now the breakpoint does'nt seem to work and i don't know why flex md:hidden no longer work

[@valirjonathan2161]

Subscribed.

[@Krlos5605]

Great Tutorial, can you do a tutorial for a megamenu?

[@holicgamingph8876]

Hi David, I am having a problem with the Alpine js. When I typed in the "@click="isOpen = !isOpen" the text all went red right after the @click. And the nav items are not showing anymore. Please help