Yatay menü
Yatay düzenin üst menüsü: tek bağlantılar ve açılır panelli gruplar. Panel fareyle üzerine gelince ya da klavye odağı içine girince açılır; JavaScript gerektirmez.
Temel kullanım
acun:nav.horizontal-item tek bir bağlantı, acun:nav.horizontal-group açılır panelli bir gruptur. Paneldeki bağlantılar için compact verilmiş acun:nav.sub-item ve acun:nav.coming-soon kullanın. Menü düzende üst çubuğun yüksekliğini doldurur; örnekte bu yükseklik h-12 ile verildi.
<nav class="flex h-12 items-center gap-1">
<acun:nav.horizontal-item href="#" title="Anasayfa" />
<acun:nav.horizontal-group title="Müşteriler">
<acun:nav.sub-item compact href="#" title="Müşteri Listesi" />
<acun:nav.sub-item compact href="#" title="Müşteri Grupları" />
</acun:nav.horizontal-group>
<acun:nav.horizontal-group title="Aktarımlar">
<acun:nav.sub-item compact href="#" title="Excelden Ürün Aktarım" />
<acun:nav.coming-soon compact title="Excelden Kullanıcı" />
</acun:nav.horizontal-group>
</nav>| Prop | Değerler |
|---|---|
horizontal-item: href, title | Bağlantı adresi ve yazısı (zorunlu) |
horizontal-group: title | Grup adı (zorunlu) |
sub-item: compact | true (panel içinde) |
Etkin sayfa
Etkin bağlantıya ya da etkin sayfayı içeren gruba active verin; altında vurgu renginde ince bir çizgi çıkar. Paneldeki etkin alt öğe compact görünümde gri zeminle işaretlenir.
<nav class="flex h-12 items-center gap-1">
<acun:nav.horizontal-item href="#" title="Anasayfa" />
<acun:nav.horizontal-group title="Raporlar" active>
<acun:nav.sub-item compact href="#" title="Satış Raporu" active />
<acun:nav.sub-item compact href="#" title="Stok Raporu" />
</acun:nav.horizontal-group>
<acun:nav.horizontal-item href="#" title="Siparişler" />
</nav>| Prop | Değerler |
|---|---|
active | true | false |
İkonlar
Her iki öğe de icon slot'unu kabul eder; ikon yazının soluna yerleşir. Üst menüde yer dar olduğu için ikonları size="4" ile küçük tutun.
<nav class="flex h-12 items-center gap-1">
<acun:nav.horizontal-item href="#" title="Anasayfa" active>
<acun:slot:icon><acun:icon name="home" size="4" /></acun:slot:icon>
</acun:nav.horizontal-item>
<acun:nav.horizontal-group title="Müşteriler">
<acun:slot:icon><acun:icon name="users" size="4" /></acun:slot:icon>
<acun:nav.sub-item compact href="#" title="Müşteri Listesi" />
</acun:nav.horizontal-group>
</nav>Rozetler
badge bağlantının ya da grubun adından sonra bir sayı veya kısa etiket gösterir; dikey menüdeki rozetlerle aynı görünümdedir. Paneldeki alt öğelere de badge verebilirsiniz. acun:menu JSON'daki badge değerini yatay öğelere de iletir.
<nav class="flex h-12 items-center gap-1">
<acun:nav.horizontal-item href="#" title="Destek talepleri" badge="12" />
<acun:nav.horizontal-group title="Aktarımlar" badge="Yeni">
<acun:nav.sub-item compact href="#" title="Excelden Ürün Aktarım" badge="3" />
<acun:nav.sub-item compact href="#" title="Aktarım geçmişi" />
</acun:nav.horizontal-group>
</nav>| Prop | Değerler |
|---|---|
badge | Sayı ya da kısa metin; null ise gösterilmez |
Dış bağlantı
external verilen üst menü bağlantısı ya da paneldeki alt öğe yeni sekmede açılır (target="_blank" ile aynı), wire:navigate kullanmaz ve adının sonunda küçük bir ok ikonu gösterir. Ekran okuyucular bağlantının yeni sekmede açılacağını da duyurur.
<nav class="flex h-12 items-center gap-1">
<acun:nav.horizontal-item href="#" title="Anasayfa" />
<acun:nav.horizontal-item href="https://laravel.com/docs" title="Belgeler" external />
<acun:nav.horizontal-group title="Yardım">
<acun:nav.sub-item compact href="#" title="Kullanım kılavuzu" external />
</acun:nav.horizontal-group>
</nav>| Prop | Değerler |
|---|---|
external | true | false |
Sağ kenardaki gruplar
Panel varsayılan olarak grubun sol kenarından açılır. Menünün sağ ucundaki gruplarda (ör. Ayarlar) panelin ekrandan taşmaması için align="right" verin.
<nav class="flex h-12 items-center gap-1">
<acun:nav.horizontal-item href="#" title="Anasayfa" />
<div class="flex-1"></div>
<acun:nav.horizontal-group title="Ayarlar" align="right">
<acun:nav.sub-item compact href="#" title="Kullanıcılar" />
<acun:nav.sub-item compact href="#" title="Yetkiler" />
</acun:nav.horizontal-group>
</nav>| Prop | Değerler |
|---|---|
align | left | right |
Prop'lar ve slot'lar
Bileşenin kabul ettiği değerler.
| Prop | Varsayılan | Açıklama |
|---|---|---|
horizontal-item: href, title | — | Bağlantı adresi ve yazısı (zorunlu) |
horizontal-item: active | false | Altında vurgu çizgisi ve aria-current="page" |
horizontal-item: target | null | '_blank' ile yeni sekmede açılır (wire:navigate kullanılmaz); ok ikonu ve ekran okuyucu notu eklenir |
horizontal-item: external | false | target='_blank' ile aynı: yeni sekme, ok ikonu ve ekran okuyucu notu |
horizontal-item: badge | null | Adın ardındaki sayı ya da kısa etiket |
horizontal-group: title | — | Grup adı (zorunlu) |
horizontal-group: active | false | Etkin sayfayı içeren grup; vurgu çizgisi |
horizontal-group: align | left | left · right (panelin hizası) |
horizontal-group: badge | null | Adın ardındaki sayı ya da kısa etiket |
sub-item: badge | null | Paneldeki alt öğenin rozeti |
sub-item: compact | false | Panel içinde kutu görünümü; yatay menüde true verin |
coming-soon: compact | false | Panel içinde kutu görünümü |
(öznitelikler) | — | class, data-*, wire:key … horizontal-item'da bağlantının kendisine (class birleştirilir), horizontal-group'ta kapsayıcı div'e eklenir |