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

[@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!

[@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

[@twodimensions459]

amazing tutorial .. hoping to see more in tailwind

[@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

[@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

[@dadinhoschannel4003]

Pretty nice video. Congrats

[@sunrisepicturesent6615]

Thanks for this helpful tip David

[@relaxwithnetia5409]

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

[@flashbangstudio9102]

simple, basic, verry usefull, thank you

[@muhammadabdi4996]

Thanks for the great tutorial

[@Krlos5605]

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

[@warpig2786]

I enjoyed this video.

[@DavidGrzyb]

Glad you enjoyed it

[@fikrifauzi8152]

Thank you very much

[@valirjonathan2161]

Subscribed.