Dropdowns - Korubin

Basit Dropdown

Profil Ayarlar Mesajlar

Çıkış Yap

Ana Sayfa Ürünler Hakkımızda İletişim

İkonlu Dropdown

Profilim Ayarlar Mesajlar 5

Çıkış Yap

Dropdown Yönleri

Seçenek 1 Seçenek 2 Seçenek 3

Split Button Dropdown

Kaydet ve Çık Kaydet ve Yeni Taslak Olarak Kaydet

Onayla ve Gönder Onayla ve Beklet Koşullu Onayla

Menü Butonu

Düzenle Kopyala Paylaş

Sil

Düzenle Kopyala Paylaş

Sil

İç İçe Dropdown

Ana Sayfa

İletişim

Kullanım

<!-- Basit Dropdown -->
<div class="relative inline-block" x-data="{ open: false }" @click.away="open = false">
    <button @click="open = !open" class="inline-flex items-center justify-center px-4 py-2 bg-primary text-primary-foreground hover:bg-primary/90 font-medium rounded-lg transition-colors">
        Seçenekler
    </button>
    <div x-show="open" x-transition class="absolute top-full left-0 mt-2 w-48 bg-card rounded-lg shadow-lg border border-border py-1 z-50">
        <a href="#" class="block px-4 py-2 text-foreground hover:bg-muted">Seçenek 1</a>
        <a href="#" class="block px-4 py-2 text-foreground hover:bg-muted">Seçenek 2</a>
        <a href="#" class="block px-4 py-2 text-foreground hover:bg-muted">Seçenek 3</a>
    </div>
</div>

<!-- Split Button -->
<div class="inline-flex rounded-lg" x-data="{ open: false }" @click.away="open = false">
    <button class="px-4 py-2 bg-primary text-primary-foreground hover:bg-primary/90 rounded-r-none">Kaydet</button>
    <div class="relative">
        <button @click="open = !open" class="px-3 py-2 bg-primary text-primary-foreground hover:bg-primary/90 rounded-l-none">
            ▼
        </button>
        <div x-show="open" x-transition class="absolute top-full right-0 mt-2 w-48 bg-card rounded-lg shadow-lg border border-border py-1 z-50">
            <a href="#" class="block px-4 py-2 text-foreground hover:bg-muted">Seçenek 1</a>
        </div>
    </div>
</div>

<!-- Alpine.js CDN -->
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>