Tailwind CSS and Alpine JS Navbar
This component requires Alpine JS v3 to function properly. Some advanced features may require additional Alpine plugins (such as focus).
Tell Me MoreDefault navbar
Classic vs Modern Code Style
The difference between the two versions is how they're written. The classic version uses older-style classes like 'text-red-500' for styling, while the modern version, uses CSS variables and semantic names like 'text-primary' for theming. It's important to note that 'Classic' doesn't mean an older version—they both use Tailwind V4. Tell me more.
<nav x-data="{ mobileMenuIsOpen: false }" x-on:click.away="mobileMenuIsOpen = false" class="" aria-label="penguin ui menu">
<!-- Brand Logo -->
<a href="#" class="">
<span>Peng<span class="">ui</span>n</span>
<!-- <img src="./your-logo.svg" alt="brand logo" class="w-10" /> -->
</a>
<!-- Desktop Menu -->
<ul class="">
<li><a href="#" class="" aria-current="page">Products</a></li>
<li><a href="#" class="">Pricing</a></li>
<li><a href="#" class="">Blog</a></li>
<li><a href="#" class="">Login</a></li>
</ul>
<!-- Mobile Menu Button -->
<button x-on:click="mobileMenuIsOpen = !mobileMenuIsOpen" x-bind:aria-expanded="mobileMenuIsOpen" x-bind:class="mobileMenuIsOpen ? 'fixed top-6 right-6 z-20' : null" type="button" class="" aria-label="mobile menu" aria-controls="mobileMenu">
<svg x-cloak x-show="!mobileMenuIsOpen" xmlns="http://www.w3.org/2000/svg" fill="none" aria-hidden="true" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="">
<path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" />
</svg>
<svg x-cloak x-show="mobileMenuIsOpen" xmlns="http://www.w3.org/2000/svg" fill="none" aria-hidden="true" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="">
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" />
</svg>
</button>
<!-- Mobile Menu -->
<ul x-cloak x-show="mobileMenuIsOpen" x-transition:enter="transition motion-reduce:transition-none ease-out duration-300" x-transition:enter-start="-translate-y-full" x-transition:enter-end="translate-y-0" x-transition:leave="transition motion-reduce:transition-none ease-out duration-300" x-transition:leave-start="translate-y-0" x-transition:leave-end="-translate-y-full" id="mobileMenu" class="">
<li class=""><a href="#" class="" aria-current="page">Products</a></li>
<li class=""><a href="#" class="">Pricing</a></li>
<li class=""><a href="#" class="">Blog</a></li>
<li class=""><a href="#" class="">Login</a></li>
</ul>
</nav>
<nav x-data="{ mobileMenuIsOpen: false }" x-on:click.away="mobileMenuIsOpen = false" class="" aria-label="penguin ui menu">
<!-- Brand Logo -->
<a href="#" class="">
<span>Peng<span class="">ui</span>n</span>
<!-- <img src="./your-logo.svg" alt="brand logo" class="w-10" /> -->
</a>
<!-- Desktop Menu -->
<ul class="">
<li><a href="#" class="" aria-current="page">Products</a></li>
<li><a href="#" class="">Pricing</a></li>
<li><a href="#" class="">Blog</a></li>
<li><a href="#" class="">Login</a></li>
</ul>
<!-- Mobile Menu Button -->
<button x-on:click="mobileMenuIsOpen = !mobileMenuIsOpen" x-bind:aria-expanded="mobileMenuIsOpen" x-bind:class="mobileMenuIsOpen ? 'fixed top-6 right-6 z-20' : null" type="button" class="" aria-label="mobile menu" aria-controls="mobileMenu">
<svg x-cloak x-show="!mobileMenuIsOpen" xmlns="http://www.w3.org/2000/svg" fill="none" aria-hidden="true" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="">
<path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" />
</svg>
<svg x-cloak x-show="mobileMenuIsOpen" xmlns="http://www.w3.org/2000/svg" fill="none" aria-hidden="true" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="">
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" />
</svg>
</button>
<!-- Mobile Menu -->
<ul x-cloak x-show="mobileMenuIsOpen" x-transition:enter="transition motion-reduce:transition-none ease-out duration-300" x-transition:enter-start="-translate-y-full" x-transition:enter-end="translate-y-0" x-transition:leave="transition motion-reduce:transition-none ease-out duration-300" x-transition:leave-start="translate-y-0" x-transition:leave-end="-translate-y-full" id="mobileMenu" class="">
<li class=""><a href="#" class="" aria-current="page">Products</a></li>
<li class=""><a href="#" class="">Pricing</a></li>
<li class=""><a href="#" class="">Blog</a></li>
<li class=""><a href="#" class="">Login</a></li>
</ul>
</nav>
@theme {
/* light theme */
--color-surface: var(--color-);
--color-surface-alt: var(--color-);
--color-on-surface: var(--color-);
--color-on-surface-strong: var(--color-);
--color-primary: var(--color-);
--color-on-primary: var(--color-);
--color-secondary: var(--color-);
--color-on-secondary: var(--color-);
--color-outline: ;
--color-outline-strong: var(--color-);
/* dark theme */
--color-surface-dark: var(--color-);
--color-surface-dark-alt: var(--color-);
--color-on-surface-dark: var(--color-);
--color-on-surface-dark-strong: var(--color-);
--color-primary-dark: var(--color-);
--color-on-primary-dark: var(--color-);
--color-secondary-dark: var(--color-);
--color-on-secondary-dark: var(--color-);
--color-outline-dark: var(--color-);
--color-outline-dark-strong: var(--color-);
/* shared colors */
--color-info: var(--color-);
--color-on-info: var(--color-);
--color-success: var(--color-);
--color-on-success: var(--color-);
--color-warning: var(--color-);
--color-on-warning: var(--color-);
--color-danger: var(--color-);
--color-on-danger: var(--color-);
/* border radius */
--radius-radius: var(--radius);
}
With a call to action
Classic vs Modern Code Style
The difference between the two versions is how they're written. The classic version uses older-style classes like 'text-red-500' for styling, while the modern version, uses CSS variables and semantic names like 'text-primary' for theming. It's important to note that 'Classic' doesn't mean an older version—they both use Tailwind V4. Tell me more.
<nav x-data="{ mobileMenuIsOpen: false }" x-on:click.away="mobileMenuIsOpen = false" class="" aria-label="penguin ui menu">
<!-- Brand Logo -->
<a href="#" class="">
<span>Peng<span class="">ui</span>n</span>
<!-- <img src="./your-logo.svg" alt="brand logo" class="w-10" /> -->
</a>
<!-- Desktop Menu -->
<ul class="">
<li><a href="#" class="" aria-current="page">Products</a></li>
<li><a href="#" class="">Pricing</a></li>
<li><a href="#" class="">Blog</a></li>
<!-- CTA Button -->
<li><a href="#" class="">Sign Up</a></li>
</ul>
<!-- Mobile Menu Button -->
<button x-on:click="mobileMenuIsOpen = !mobileMenuIsOpen" x-bind:aria-expanded="mobileMenuIsOpen" x-bind:class="mobileMenuIsOpen ? 'fixed top-6 right-6 z-20' : null" type="button" class="" aria-label="mobile menu" aria-controls="mobileMenu">
<svg x-cloak x-show="!mobileMenuIsOpen" xmlns="http://www.w3.org/2000/svg" fill="none" aria-hidden="true" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="">
<path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" />
</svg>
<svg x-cloak x-show="mobileMenuIsOpen" xmlns="http://www.w3.org/2000/svg" fill="none" aria-hidden="true" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="">
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" />
</svg>
</button>
<!-- Mobile Menu -->
<ul x-cloak x-show="mobileMenuIsOpen" x-transition:enter="transition motion-reduce:transition-none ease-out duration-300" x-transition:enter-start="-translate-y-full" x-transition:enter-end="translate-y-0" x-transition:leave="transition motion-reduce:transition-none ease-out duration-300" x-transition:leave-start="translate-y-0" x-transition:leave-end="-translate-y-full" id="mobileMenu" class="">
<li class=""><a href="#" class="" aria-current="page">Products</a></li>
<li class=""><a href="#" class="">Pricing</a></li>
<li class=""><a href="#" class="">Blog</a></li>
<!-- CTA Button -->
<li class=""><a href="#" class="">Sign Up</a></li>
</ul>
</nav>
<nav x-data="{ mobileMenuIsOpen: false }" x-on:click.away="mobileMenuIsOpen = false" class="" aria-label="penguin ui menu">
<!-- Brand Logo -->
<a href="#" class="">
<span>Peng<span class="">ui</span>n</span>
<!-- <img src="./your-logo.svg" alt="brand logo" class="w-10" /> -->
</a>
<!-- Desktop Menu -->
<ul class="">
<li><a href="#" class="" aria-current="page">Products</a></li>
<li><a href="#" class="">Pricing</a></li>
<li><a href="#" class="">Blog</a></li>
<!-- CTA Button -->
<li><a href="#" class="">Sign Up</a></li>
</ul>
<!-- Mobile Menu Button -->
<button x-on:click="mobileMenuIsOpen = !mobileMenuIsOpen" x-bind:aria-expanded="mobileMenuIsOpen" x-bind:class="mobileMenuIsOpen ? 'fixed top-6 right-6 z-20' : null" type="button" class="" aria-label="mobile menu" aria-controls="mobileMenu">
<svg x-cloak x-show="!mobileMenuIsOpen" xmlns="http://www.w3.org/2000/svg" fill="none" aria-hidden="true" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="">
<path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" />
</svg>
<svg x-cloak x-show="mobileMenuIsOpen" xmlns="http://www.w3.org/2000/svg" fill="none" aria-hidden="true" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="">
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" />
</svg>
</button>
<!-- Mobile Menu -->
<ul x-cloak x-show="mobileMenuIsOpen" x-transition:enter="transition motion-reduce:transition-none ease-out duration-300" x-transition:enter-start="-translate-y-full" x-transition:enter-end="translate-y-0" x-transition:leave="transition motion-reduce:transition-none ease-out duration-300" x-transition:leave-start="translate-y-0" x-transition:leave-end="-translate-y-full" id="mobileMenu" class="">
<li class=""><a href="#" class="" aria-current="page">Products</a></li>
<li class=""><a href="#" class="">Pricing</a></li>
<li class=""><a href="#" class="">Blog</a></li>
<!-- CTA Button -->
<li class=""><a href="#" class="">Sign Up</a></li>
</ul>
</nav>
@theme {
/* light theme */
--color-surface: var(--color-);
--color-surface-alt: var(--color-);
--color-on-surface: var(--color-);
--color-on-surface-strong: var(--color-);
--color-primary: var(--color-);
--color-on-primary: var(--color-);
--color-secondary: var(--color-);
--color-on-secondary: var(--color-);
--color-outline: ;
--color-outline-strong: var(--color-);
/* dark theme */
--color-surface-dark: var(--color-);
--color-surface-dark-alt: var(--color-);
--color-on-surface-dark: var(--color-);
--color-on-surface-dark-strong: var(--color-);
--color-primary-dark: var(--color-);
--color-on-primary-dark: var(--color-);
--color-secondary-dark: var(--color-);
--color-on-secondary-dark: var(--color-);
--color-outline-dark: var(--color-);
--color-outline-dark-strong: var(--color-);
/* shared colors */
--color-info: var(--color-);
--color-on-info: var(--color-);
--color-success: var(--color-);
--color-on-success: var(--color-);
--color-warning: var(--color-);
--color-on-warning: var(--color-);
--color-danger: var(--color-);
--color-on-danger: var(--color-);
/* border radius */
--radius-radius: var(--radius);
}
With a user profile
Classic vs Modern Code Style
The difference between the two versions is how they're written. The classic version uses older-style classes like 'text-red-500' for styling, while the modern version, uses CSS variables and semantic names like 'text-primary' for theming. It's important to note that 'Classic' doesn't mean an older version—they both use Tailwind V4. Tell me more.
<nav x-data="{ mobileMenuIsOpen: false }" x-on:click.away="mobileMenuIsOpen = false" class="" aria-label="penguin ui menu">
<!-- Brand Logo -->
<a href="#" class="">
<span>Peng<span class="">ui</span>n</span>
<!-- <img src="./your-logo.svg" alt="brand logo" class="w-10" /> -->
</a>
<!-- Desktop Menu -->
<ul class="">
<li><a href="#" class="" aria-current="page">Products</a></li>
<li><a href="#" class="">Pricing</a></li>
<li><a href="#" class="">Blog</a></li>
<!-- User Pic -->
<li x-data="{ userDropDownIsOpen: false, openWithKeyboard: false }" x-on:keydown.esc.window="userDropDownIsOpen = false, openWithKeyboard = false" class="">
<button x-on:click="userDropDownIsOpen = ! userDropDownIsOpen" x-bind:aria-expanded="userDropDownIsOpen" x-on:keydown.space.prevent="openWithKeyboard = true" x-on:keydown.enter.prevent="openWithKeyboard = true" x-on:keydown.down.prevent="openWithKeyboard = true" class="" aria-controls="userMenu">
<img src="https://penguinui.s3.amazonaws.com/component-assets/avatar-8.webp" alt="User Profile" class="" />
</button>
<!-- User Dropdown -->
<ul x-cloak x-show="userDropDownIsOpen || openWithKeyboard" x-transition.opacity x-trap="openWithKeyboard" x-on:click.outside="userDropDownIsOpen = false, openWithKeyboard = false" x-on:keydown.down.prevent="$focus.wrap().next()" x-on:keydown.up.prevent="$focus.wrap().previous()" id="userMenu" class="">
<li class="">
<div class="">
<span class="">Alice Brown</span>
<p class="">alice.brown@gmail.com</p>
</div>
</li>
<li><a href="#" class="">Dashboard</a></li>
<li><a href="#" class="">Subscription</a></li>
<li><a href="#" class="">Settings</a></li>
<li><a href="#" class="">Sign Out</a></li>
</ul>
</li>
</ul>
<!-- Mobile Menu Button -->
<button x-on:click="mobileMenuIsOpen = !mobileMenuIsOpen" x-bind:aria-expanded="mobileMenuIsOpen" x-bind:class="mobileMenuIsOpen ? 'fixed top-6 right-6 z-20' : null" type="button" class="" aria-label="mobile menu" aria-controls="mobileMenu">
<svg x-cloak x-show="!mobileMenuIsOpen" xmlns="http://www.w3.org/2000/svg" fill="none" aria-hidden="true" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="">
<path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" />
</svg>
<svg x-cloak x-show="mobileMenuIsOpen" xmlns="http://www.w3.org/2000/svg" fill="none" aria-hidden="true" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="">
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" />
</svg>
</button>
<!-- Mobile Menu -->
<ul x-cloak x-show="mobileMenuIsOpen" x-transition:enter="transition motion-reduce:transition-none ease-out duration-300" x-transition:enter-start="-translate-y-full" x-transition:enter-end="translate-y-0" x-transition:leave="transition motion-reduce:transition-none ease-out duration-300" x-transition:leave-start="translate-y-0" x-transition:leave-end="-translate-y-full" class="">
<li class="">
<div class="">
<img src="https://penguinui.s3.amazonaws.com/component-assets/avatar-8.webp" alt="User Profile" class="" />
<div>
<span class="">Alice Brown</span>
<p class="">alice.brown@gmail.com</p>
</div>
</div>
</li>
<li class=""><a href="#" class="" aria-current="page">Products</a></li>
<li class=""><a href="#" class="">Pricing</a></li>
<li class=""><a href="#" class="">Blog</a></li>
<hr role="none" class="">
<li class=""><a href="#" class="">Dashboard</a></li>
<li class=""><a href="#" class="">Subscription</a></li>
<li class=""><a href="#" class="">Settings</a></li>
<!-- CTA Button -->
<li class=""><a href="#" class="">Sign Out</a></li>
</ul>
</nav>
<nav x-data="{ mobileMenuIsOpen: false }" x-on:click.away="mobileMenuIsOpen = false" class="" aria-label="penguin ui menu">
<!-- Brand Logo -->
<a href="#" class="">
<span>Peng<span class="">ui</span>n</span>
<!-- <img src="./your-logo.svg" alt="brand logo" class="w-10" /> -->
</a>
<!-- Desktop Menu -->
<ul class="">
<li><a href="#" class="" aria-current="page">Products</a></li>
<li><a href="#" class="">Pricing</a></li>
<li><a href="#" class="">Blog</a></li>
<!-- User Pic -->
<li x-data="{ userDropDownIsOpen: false, openWithKeyboard: false }" x-on:keydown.esc.window="userDropDownIsOpen = false, openWithKeyboard = false" class="">
<button x-on:click="userDropDownIsOpen = ! userDropDownIsOpen" x-bind:aria-expanded="userDropDownIsOpen" x-on:keydown.space.prevent="openWithKeyboard = true" x-on:keydown.enter.prevent="openWithKeyboard = true" x-on:keydown.down.prevent="openWithKeyboard = true" class="" aria-controls="userMenu">
<img src="https://penguinui.s3.amazonaws.com/component-assets/avatar-8.webp" alt="User Profile" class="" />
</button>
<!-- User Dropdown -->
<ul x-cloak x-show="userDropDownIsOpen || openWithKeyboard" x-transition.opacity x-trap="openWithKeyboard" x-on:click.outside="userDropDownIsOpen = false, openWithKeyboard = false" x-on:keydown.down.prevent="$focus.wrap().next()" x-on:keydown.up.prevent="$focus.wrap().previous()" id="userMenu" class="">
<li class="">
<div class="">
<span class="">Alice Brown</span>
<p class="">alice.brown@gmail.com</p>
</div>
</li>
<li><a href="#" class="">Dashboard</a></li>
<li><a href="#" class="">Subscription</a></li>
<li><a href="#" class="">Settings</a></li>
<li><a href="#" class="">Sign Out</a></li>
</ul>
</li>
</ul>
<!-- Mobile Menu Button -->
<button x-on:click="mobileMenuIsOpen = !mobileMenuIsOpen" x-bind:aria-expanded="mobileMenuIsOpen" x-bind:class="mobileMenuIsOpen ? 'fixed top-6 right-6 z-20' : null" type="button" class="" aria-label="mobile menu" aria-controls="mobileMenu">
<svg x-cloak x-show="!mobileMenuIsOpen" xmlns="http://www.w3.org/2000/svg" fill="none" aria-hidden="true" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="">
<path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" />
</svg>
<svg x-cloak x-show="mobileMenuIsOpen" xmlns="http://www.w3.org/2000/svg" fill="none" aria-hidden="true" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="">
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" />
</svg>
</button>
<!-- Mobile Menu -->
<ul x-cloak x-show="mobileMenuIsOpen" x-transition:enter="transition motion-reduce:transition-none ease-out duration-300" x-transition:enter-start="-translate-y-full" x-transition:enter-end="translate-y-0" x-transition:leave="transition motion-reduce:transition-none ease-out duration-300" x-transition:leave-start="translate-y-0" x-transition:leave-end="-translate-y-full" class="">
<li class="">
<div class="">
<img src="https://penguinui.s3.amazonaws.com/component-assets/avatar-8.webp" alt="User Profile" class="" />
<div>
<span class="">Alice Brown</span>
<p class="">alice.brown@gmail.com</p>
</div>
</div>
</li>
<li class=""><a href="#" class="" aria-current="page">Products</a></li>
<li class=""><a href="#" class="">Pricing</a></li>
<li class=""><a href="#" class="">Blog</a></li>
<hr role="none" class="">
<li class=""><a href="#" class="">Dashboard</a></li>
<li class=""><a href="#" class="">Subscription</a></li>
<li class=""><a href="#" class="">Settings</a></li>
<!-- CTA Button -->
<li class=""><a href="#" class="">Sign Out</a></li>
</ul>
</nav>
@theme {
/* light theme */
--color-surface: var(--color-);
--color-surface-alt: var(--color-);
--color-on-surface: var(--color-);
--color-on-surface-strong: var(--color-);
--color-primary: var(--color-);
--color-on-primary: var(--color-);
--color-secondary: var(--color-);
--color-on-secondary: var(--color-);
--color-outline: ;
--color-outline-strong: var(--color-);
/* dark theme */
--color-surface-dark: var(--color-);
--color-surface-dark-alt: var(--color-);
--color-on-surface-dark: var(--color-);
--color-on-surface-dark-strong: var(--color-);
--color-primary-dark: var(--color-);
--color-on-primary-dark: var(--color-);
--color-secondary-dark: var(--color-);
--color-on-secondary-dark: var(--color-);
--color-outline-dark: var(--color-);
--color-outline-dark-strong: var(--color-);
/* shared colors */
--color-info: var(--color-);
--color-on-info: var(--color-);
--color-success: var(--color-);
--color-on-success: var(--color-);
--color-warning: var(--color-);
--color-on-warning: var(--color-);
--color-danger: var(--color-);
--color-on-danger: var(--color-);
/* border radius */
--radius-radius: var(--radius);
}
With a search
Classic vs Modern Code Style
The difference between the two versions is how they're written. The classic version uses older-style classes like 'text-red-500' for styling, while the modern version, uses CSS variables and semantic names like 'text-primary' for theming. It's important to note that 'Classic' doesn't mean an older version—they both use Tailwind V4. Tell me more.
<nav x-data="{ mobileMenuIsOpen: false }" x-on:click.away="mobileMenuIsOpen = false" class="" aria-label="penguin ui menu">
<!-- Brand Logo -->
<a href="#" class="">
<span>Peng<span class="">ui</span>n</span>
<!-- <img src="./your-logo.svg" alt="brand logo" class="w-10" /> -->
</a>
<!-- Search -->
<div class="">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" aria-hidden="true" class="">
<path stroke-linecap="round" stroke-linejoin="round" d="m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607Z" />
</svg>
<input type="search" name="search" placeholder="Search" aria-label="search" class="" />
</div>
<!-- Desktop Menu -->
<ul class="">
<li><a href="#" class="" aria-current="page">Products</a></li>
<li><a href="#" class="">Pricing</a></li>
<li><a href="#" class="">Blog</a></li>
<!-- User Pic -->
<li x-data="{ userDropDownIsOpen: false, openWithKeyboard: false }" x-on:keydown.esc.window="userDropDownIsOpen = false, openWithKeyboard = false" class="">
<button x-on:click="userDropDownIsOpen = ! userDropDownIsOpen" x-bind:aria-expanded="userDropDownIsOpen" x-on:keydown.space.prevent="openWithKeyboard = true" x-on:keydown.enter.prevent="openWithKeyboard = true" x-on:keydown.down.prevent="openWithKeyboard = true" class="" aria-controls="userMenu">
<img src="https://penguinui.s3.amazonaws.com/component-assets/avatar-8.webp" alt="User Profile" class="" />
</button>
<!-- User Dropdown -->
<ul x-cloak x-show="userDropDownIsOpen || openWithKeyboard" x-transition.opacity x-trap="openWithKeyboard" x-on:click.outside="userDropDownIsOpen = false, openWithKeyboard = false" x-on:keydown.down.prevent="$focus.wrap().next()" x-on:keydown.up.prevent="$focus.wrap().previous()" id="userMenu" class="">
<li class="">
<div class="">
<span class="">Alice Brown</span>
<p class="">alice.brown@gmail.com</p>
</div>
</li>
<li><a href="#" class="">Dashboard</a></li>
<li><a href="#" class="">Subscription</a></li>
<li><a href="#" class="">Settings</a></li>
<li><a href="#" class="">Sign Out</a></li>
</ul>
</li>
</ul>
<!-- Mobile Menu Button -->
<button x-on:click="mobileMenuIsOpen = !mobileMenuIsOpen" x-bind:aria-expanded="mobileMenuIsOpen" x-bind:class="mobileMenuIsOpen ? 'fixed top-6 right-6 z-20' : null" type="button" class="" aria-label="mobile menu" aria-controls="mobileMenu">
<svg x-cloak x-show="!mobileMenuIsOpen" xmlns="http://www.w3.org/2000/svg" fill="none" aria-hidden="true" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="">
<path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" />
</svg>
<svg x-cloak x-show="mobileMenuIsOpen" xmlns="http://www.w3.org/2000/svg" fill="none" aria-hidden="true" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="">
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" />
</svg>
</button>
<!-- Mobile Menu -->
<ul x-cloak x-show="mobileMenuIsOpen" x-transition:enter="transition motion-reduce:transition-none ease-out duration-300" x-transition:enter-start="-translate-y-full" x-transition:enter-end="translate-y-0" x-transition:leave="transition motion-reduce:transition-none ease-out duration-300" x-transition:leave-start="translate-y-0" x-transition:leave-end="-translate-y-full" class="">
<li class="">
<div class="">
<img src="https://penguinui.s3.amazonaws.com/component-assets/avatar-8.webp" alt="User Profile" class="" />
<div>
<span class="">Alice Brown</span>
<p class="">alice.brown@gmail.com</p>
</div>
</div>
</li>
<li class=""><a href="#" class="" aria-current="page">Products</a></li>
<li class=""><a href="#" class="">Pricing</a></li>
<li class=""><a href="#" class="">Blog</a></li>
<hr role="none" class="">
<li class=""><a href="#" class="">Dashboard</a></li>
<li class=""><a href="#" class="">Subscription</a></li>
<li class=""><a href="#" class="">Settings</a></li>
<!-- CTA Button -->
<li class=""><a href="#" class="">Sign Out</a></li>
</ul>
</nav>
<nav x-data="{ mobileMenuIsOpen: false }" x-on:click.away="mobileMenuIsOpen = false" class="" aria-label="penguin ui menu">
<!-- Brand Logo -->
<a href="#" class="">
<span>Peng<span class="">ui</span>n</span>
<!-- <img src="./your-logo.svg" alt="brand logo" class="w-10" /> -->
</a>
<!-- Search -->
<div class="">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" aria-hidden="true" class="">
<path stroke-linecap="round" stroke-linejoin="round" d="m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607Z" />
</svg>
<input type="search" name="search" placeholder="Search" aria-label="search" class="" />
</div>
<!-- Desktop Menu -->
<ul class="">
<li><a href="#" class="" aria-current="page">Products</a></li>
<li><a href="#" class="">Pricing</a></li>
<li><a href="#" class="">Blog</a></li>
<!-- User Pic -->
<li x-data="{ userDropDownIsOpen: false, openWithKeyboard: false }" x-on:keydown.esc.window="userDropDownIsOpen = false, openWithKeyboard = false" class="">
<button x-on:click="userDropDownIsOpen = ! userDropDownIsOpen" x-bind:aria-expanded="userDropDownIsOpen" x-on:keydown.space.prevent="openWithKeyboard = true" x-on:keydown.enter.prevent="openWithKeyboard = true" x-on:keydown.down.prevent="openWithKeyboard = true" class="" aria-controls="userMenu">
<img src="https://penguinui.s3.amazonaws.com/component-assets/avatar-8.webp" alt="User Profile" class="" />
</button>
<!-- User Dropdown -->
<ul x-cloak x-show="userDropDownIsOpen || openWithKeyboard" x-transition.opacity x-trap="openWithKeyboard" x-on:click.outside="userDropDownIsOpen = false, openWithKeyboard = false" x-on:keydown.down.prevent="$focus.wrap().next()" x-on:keydown.up.prevent="$focus.wrap().previous()" id="userMenu" class="">
<li class="">
<div class="">
<span class="">Alice Brown</span>
<p class="">alice.brown@gmail.com</p>
</div>
</li>
<li><a href="#" class="">Dashboard</a></li>
<li><a href="#" class="">Subscription</a></li>
<li><a href="#" class="">Settings</a></li>
<li><a href="#" class="">Sign Out</a></li>
</ul>
</li>
</ul>
<!-- Mobile Menu Button -->
<button x-on:click="mobileMenuIsOpen = !mobileMenuIsOpen" x-bind:aria-expanded="mobileMenuIsOpen" x-bind:class="mobileMenuIsOpen ? 'fixed top-6 right-6 z-20' : null" type="button" class="" aria-label="mobile menu" aria-controls="mobileMenu">
<svg x-cloak x-show="!mobileMenuIsOpen" xmlns="http://www.w3.org/2000/svg" fill="none" aria-hidden="true" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="">
<path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" />
</svg>
<svg x-cloak x-show="mobileMenuIsOpen" xmlns="http://www.w3.org/2000/svg" fill="none" aria-hidden="true" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="">
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" />
</svg>
</button>
<!-- Mobile Menu -->
<ul x-cloak x-show="mobileMenuIsOpen" x-transition:enter="transition motion-reduce:transition-none ease-out duration-300" x-transition:enter-start="-translate-y-full" x-transition:enter-end="translate-y-0" x-transition:leave="transition motion-reduce:transition-none ease-out duration-300" x-transition:leave-start="translate-y-0" x-transition:leave-end="-translate-y-full" class="">
<li class="">
<div class="">
<img src="https://penguinui.s3.amazonaws.com/component-assets/avatar-8.webp" alt="User Profile" class="" />
<div>
<span class="">Alice Brown</span>
<p class="">alice.brown@gmail.com</p>
</div>
</div>
</li>
<li class=""><a href="#" class="" aria-current="page">Products</a></li>
<li class=""><a href="#" class="">Pricing</a></li>
<li class=""><a href="#" class="">Blog</a></li>
<hr role="none" class="">
<li class=""><a href="#" class="">Dashboard</a></li>
<li class=""><a href="#" class="">Subscription</a></li>
<li class=""><a href="#" class="">Settings</a></li>
<!-- CTA Button -->
<li class=""><a href="#" class="">Sign Out</a></li>
</ul>
</nav>
@theme {
/* light theme */
--color-surface: var(--color-);
--color-surface-alt: var(--color-);
--color-on-surface: var(--color-);
--color-on-surface-strong: var(--color-);
--color-primary: var(--color-);
--color-on-primary: var(--color-);
--color-secondary: var(--color-);
--color-on-secondary: var(--color-);
--color-outline: ;
--color-outline-strong: var(--color-);
/* dark theme */
--color-surface-dark: var(--color-);
--color-surface-dark-alt: var(--color-);
--color-on-surface-dark: var(--color-);
--color-on-surface-dark-strong: var(--color-);
--color-primary-dark: var(--color-);
--color-on-primary-dark: var(--color-);
--color-secondary-dark: var(--color-);
--color-on-secondary-dark: var(--color-);
--color-outline-dark: var(--color-);
--color-outline-dark-strong: var(--color-);
/* shared colors */
--color-info: var(--color-);
--color-on-info: var(--color-);
--color-success: var(--color-);
--color-on-success: var(--color-);
--color-warning: var(--color-);
--color-on-warning: var(--color-);
--color-danger: var(--color-);
--color-on-danger: var(--color-);
/* border radius */
--radius-radius: var(--radius);
}
Data
List of all Alpine JS data used in this component.
Property | Description |
---|---|
mobileMenuIsOpen |
Boolean - Indicates whether the menu is open or closed |
userDropDownIsOpen |
Boolean - Indicates whether the user dropdown menu is open or closed |
openWithKeyboard |
Boolean - Indicates whether the user dropdown menu is opened using keyboard |
Keyboard Navigation
Key | Action |
---|---|
Tab |
Next item gets the focus |
Enter Space | Focused item gets selected |
Dropdown: Focus moves to next/previous item | |
Esc |
Dropdown open: dropdown closes |