Menü öğeleri
Dikey menünün parçaları: bölüm başlığı, bağlantı, alt menülü grup, üçüncü seviye alt grup ve "Yakında" öğesi. Gruplar akordeon gibi çalışır; etkin sayfanın grubu sunucuda açık çizildiği için menü Alpine yüklenmeden de doğru görünür.
Başlık ve bağlantılar
acun:nav.heading menüyü bölümlere ayırır; ilk başlıkta üst boşluğu azaltmak için first verin. acun:nav.item alt menüsü olmayan bağlantıdır; ikon icon slot'undan gelir. Etkin sayfada active verin: öğe vurgulanır ve aria-current="page" alır. Daraltılmış menüde başlıklar gizlenir, öğelerin adı ipucu olarak görünür. class, data-* ya da wire:key gibi ek öznitelikler öğeye aktarılır; class bileşenin kendi sınıflarıyla birleştirilir.
<nav class="flex flex-col gap-0.5 px-3">
<acun:nav.heading first>Genel</acun:nav.heading>
<acun:nav.item href="#" title="Anasayfa" active>
<acun:slot:icon><acun:icon name="home" /></acun:slot:icon>
</acun:nav.item>
<acun:nav.item href="#" title="Müşteriler">
<acun:slot:icon><acun:icon name="users" /></acun:slot:icon>
</acun:nav.item>
<acun:nav.heading>Raporlar</acun:nav.heading>
<acun:nav.item href="#" title="Satış raporu">
<acun:slot:icon><acun:icon name="chart-bar" /></acun:slot:icon>
</acun:nav.item>
</nav>| Prop | Değerler |
|---|---|
heading: first | true | false |
item: href, title | Bağlantı adresi ve yazısı (zorunlu) |
item: active | true | false |
Gruplar
acun:nav.group alt bağlantıları (acun:nav.sub-item) solda ince bir kılavuz çizgiyle listeler. Aynı anda tek grup açık kalır: bir grubu açınca diğerleri kapanır. Etkin sayfanın bulunduğu gruba active verin; sayfa açıldığında o grup açık gelir.
<nav class="flex flex-col gap-0.5 px-3">
<acun:nav.group title="Müşteriler" active>
<acun:slot:icon><acun:icon name="users" /></acun:slot:icon>
<acun:nav.sub-item href="#" title="Müşteri Listesi" active />
<acun:nav.sub-item href="#" title="Müşteri Grupları" />
</acun:nav.group>
<acun:nav.group title="Raporlar">
<acun:slot:icon><acun:icon name="document-text" /></acun:slot:icon>
<acun:nav.sub-item href="#" title="Satış Raporu" />
<acun:nav.sub-item href="#" title="Stok Raporu" />
</acun:nav.group>
</nav>| Prop | Değerler |
|---|---|
group: title | Grup adı (zorunlu) |
group: active | true | false |
sub-item: href, title, active | Alt bağlantı; etkinken kılavuz çizgide vurgulanır |
Üçüncü seviye
Bir grubun içinde daha fazla kırılım gerekiyorsa acun:nav.sub-group kullanın. Kendi kılavuz çizgisiyle bir adım içeriden listelenir ve tıklanınca açılıp kapanır; etkin sayfa içindeyse active ile açık gelir.
<nav class="flex flex-col gap-0.5 px-3">
<acun:nav.group title="Tanımlar" active>
<acun:slot:icon><acun:icon name="cog-6-tooth" /></acun:slot:icon>
<acun:nav.sub-item href="#" title="Kargo Firmaları" />
<acun:nav.sub-group title="Adres" active>
<acun:nav.sub-item href="#" title="İlçeler" active />
<acun:nav.sub-item href="#" title="Mahalleler" />
</acun:nav.sub-group>
</acun:nav.group>
</nav>| Prop | Değerler |
|---|---|
sub-group: title | Alt grup adı (zorunlu) |
sub-group: active | true | false |
Rozetler
badge öğenin sağına bir sayı ya da kısa etiket ekler; bekleyen iş sayısı ya da "Yeni" gibi uyarılar için. Menünün her seviyesinde çalışır: acun:nav.item, acun:nav.group, acun:nav.sub-group ve acun:nav.sub-item. Menüyü JSON'dan kuruyorsanız acun:menu öğedeki badge değerini aynı bileşene iletir.
<nav class="flex flex-col gap-0.5 px-3">
<acun:nav.item href="#" title="Destek talepleri" badge="12">
<acun:slot:icon><acun:icon name="inbox" /></acun:slot:icon>
</acun:nav.item>
<acun:nav.group title="Aktarımlar" badge="Yeni" active>
<acun:slot:icon><acun:icon name="arrow-up-tray" /></acun:slot:icon>
<acun:nav.sub-item href="#" title="Excelden Ürün Aktarım" badge="3" />
<acun:nav.sub-group title="Bekleyenler" badge="5" active>
<acun:nav.sub-item href="#" title="Onay bekleyen" badge="2" />
</acun:nav.sub-group>
</acun:nav.group>
</nav>| Prop | Değerler |
|---|---|
badge | Sayı ya da kısa metin; null ise gösterilmez |
Yakında
acun:nav.coming-soon henüz hazır olmayan sayfayı tıklanamaz biçimde ve sağında "Yakında" etiketiyle gösterir; etiketi label ile değiştirin.
<nav class="flex flex-col gap-0.5 px-3">
<acun:nav.group title="Eğitim" active>
<acun:slot:icon><acun:icon name="academic-cap" /></acun:slot:icon>
<acun:nav.sub-item href="#" title="Sık sorulan sorular" />
<acun:nav.coming-soon title="Eğitim videoları" />
<acun:nav.coming-soon title="Canlı destek" label="Mart" />
</acun:nav.group>
</nav>| Prop | Değerler |
|---|---|
coming-soon: label | Sağdaki etiket; verilmezse "Yakında" |
Dış bağlantı
Uygulama dışına giden bağlantılarda external verin; target="_blank" ile aynı işi görür. Bağlantı yeni sekmede açılır ve wire:navigate kullanmaz, adın sonuna küçük bir ok ikonu eklenir ve ekran okuyuculara "(yeni sekmede açılır)" bilgisi verilir. acun:nav.item, acun:nav.sub-item ve acun:nav.horizontal-item üzerinde çalışır; target="_blank" verilen öğeler de aynı ikonu ve notu alır.
<nav class="flex flex-col gap-0.5 px-3">
<acun:nav.item href="https://laravel.com/docs" title="Laravel belgeleri" external>
<acun:slot:icon><acun:icon name="book-open" /></acun:slot:icon>
</acun:nav.item>
<acun:nav.group title="Yardım" active>
<acun:slot:icon><acun:icon name="question-mark-circle" /></acun:slot:icon>
<acun:nav.sub-item href="#" title="Kullanım kılavuzu" external />
</acun:nav.group>
</nav>| Prop | Değerler |
|---|---|
external | true | false |
target | _blank (external ile aynı) |
Prop'lar ve slot'lar
Bileşenin kabul ettiği değerler.
| Prop | Varsayılan | Açıklama |
|---|---|---|
nav.heading: first | false | İlk başlıkta üst boşluğu azaltır; başlık metni slot'tan gelir |
nav.item: href, title | — | Bağlantı adresi ve yazısı (zorunlu) |
nav.item: active | false | Etkin sayfa; vurgu ve aria-current="page" |
nav.item: badge | null | Sağdaki sayı ya da kısa etiket |
nav.item: target | null | '_blank' ile yeni sekmede açılır (wire:navigate kullanılmaz); ok ikonu ve ekran okuyucu notu eklenir |
nav.item: external | false | target='_blank' ile aynı: yeni sekme, ok ikonu ve ekran okuyucu notu |
nav.group: title | — | Grup adı (zorunlu) |
nav.group: active | false | Grup sunucuda açık ve vurgulu çizilir |
nav.group: badge | null | Sağdaki sayı ya da kısa etiket |
nav.sub-group: title | — | Üçüncü seviye, açılır kapanır alt grubun adı (zorunlu) |
nav.sub-group: active | false | Alt grup sunucuda açık ve vurgulu çizilir |
nav.sub-group: badge | null | Sağdaki sayı ya da kısa etiket |
nav.sub-item: href, title | — | Alt bağlantının adresi ve yazısı (zorunlu) |
nav.sub-item: active, badge, target, external | false · null · null · false | nav.item ile aynı |
nav.sub-item: compact | false | Yatay menü paneli için kutu görünümü |
nav.coming-soon: title | — | Öğe adı (zorunlu) |
nav.coming-soon: label, compact | null · false | Etiket metni ("Yakında"); yatay menü paneli için kutu görünümü |
(öznitelikler) | — | class, data-*, wire:key, wire:click … item, sub-item, coming-soon ve heading'de öğenin kendisine (class birleştirilir), group ve sub-group'ta kapsayıcı div'e eklenir |