Livewire Dropdown Menus

Dropdown menus:

Basic Dropdown

<div x-data="{ open: false }" @click.away="open = false">
    <button @click="open = !open">Menu</button>
    
    <div x-show="open" x-transition>
        <a href="#">Profile</a>
        <a href="#">Settings</a>
        <button wire:click="logout">Logout</button>
    </div>
</div>

With Keyboard

<div @keydown.escape="open = false"
     @keydown.arrow-down="$focus.next()"
     @keydown.arrow-up="$focus.previous()">

Close on Action

<button @click="$wire.action(); open = false">
    Action
</button>

Share this post:

Related Posts

Laravel Sanctum API Authentication Complete Guide

Build secure API authentication with Laravel Sanctum for SPAs and mobile apps.

Laravel Rate Limiting: Protect Your Application

Implement rate limiting to protect your Laravel application from abuse.

Laravel Blade Components: Build Reusable UI

Create powerful reusable components with Laravel Blade.

Comments (0)

Please log in to leave a comment. Log in

No comments yet. Be the first to comment!

.comment-avatar { width: 40px; height: 40px; border-radius: 50%; background: linear-gradient(135deg, var(--primary-color, #6366f1), var(--secondary-color, #7c3aed)); display: flex; align-items: center; justify-content: center; color: white; font-weight: 600; font-size: 0.9rem; } .comment-avatar-sm { width: 28px; height: 28px; border-radius: 50%; background: linear-gradient(135deg, var(--primary-color, #6366f1), var(--secondary-color, #7c3aed)); display: flex; align-items: center; justify-content: center; color: white; font-weight: 600; font-size: 0.7rem; }

Back to all posts

hljs.highlightAll(); .prose pre { background: #282c34; border-radius: 8px; padding: 1rem; overflow-x: auto; margin: 1.5rem 0; direction: ltr; text-align: left; } .prose pre code { background: transparent; padding: 0; font-size: 0.9rem; line-height: 1.6; color: #abb2bf; font-family: 'Fira Code', 'Monaco', 'Consolas', monospace; direction: ltr; text-align: left; } .prose code:not(pre code) { background: #f1f5f9; padding: 0.2rem 0.4rem; border-radius: 4px; font-size: 0.875em; color: #e11d48; direction: ltr; unicode-bidi: isolate; } .prose h2 { margin-top: 2rem; margin-bottom: 1rem; scroll-margin-top: 100px; } .prose h3 { scroll-margin-top: 100px; } .prose p { margin-bottom: 1rem; line-height: 1.8; } .toc-wrapper { border-left: 3px solid var(--primary-color, #6366f1); } [dir="rtl"] .toc-wrapper { border-left: none; border-right: 3px solid var(--primary-color, #6366f1); } .toc-link:hover { color: var(--primary-color, #6366f1) !important; }