Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.
Hello,
I have this code to manage a hamburger menu.
<div x-data="{ show: false }" class="cursor-pointer">
<span @click="show = true" id="menu"><i class="fa-solid fa-bars fa-2x"></i></span>
<nav x-show="show" x-transition id="navbar" class="z-10 bg-gray-500 text-white w-full h-full fixed top-0 left-0">
<ul class="flex flex-col">
<li @click="show = false" id="close" class="px-8 py-6 text-2xl font-bold border-b border-gray-400 flex justify-between items-center bg-green-300 text-black">
<span>Menu</span>
<i class="fa-solid fa-xmark"></i>
</li>
<x-navbar.menu-item><a class="block px-8 py-4" href="{{ route('home') }}"><i class="fa-solid fa-house fa-lg mr-4"></i>Accueil</a></x-navbar.menu-item>
...
</ul>
</nav>
</div>
When I load any page, the menu appears for a a few milliseconds as if the show variable was true.
How is it possible to avoid this behavior ?
Thanks for your help ;).
V
Use x-cloak
If the "default" state of an
x-showon page load is "false", you may want to usex-cloakon the page to avoid "page flicker" (The effect that happens when the browser renders your content before Alpine is finished initializing and hiding it.) You can learn more aboutx-cloakin its documentation.
@tykus Oh thank you ... I didn't ever looked at the documentation because for me it was obvious that I have to use x-show without anything else.
@vincent15000 no worries; it's caught everyone at some point! The docs show an interesting workaround using a template element and without x-cloak - if you want to give that a try instead!
@tykus Very interesting. I prefer this workaround using a template.
@vincent15000 in jetstream, we can see alot of this
style="display: none;"
Please or to participate in this conversation.