Konum çubuğu

11 · Menü

Sayfanın uygulamadaki yerini gösteren konum çubuğu. Başa ev ikonlu kök bağlantı kendiliğinden eklenir; son öğe bulunulan sayfa olarak düz metin çizilir.

acun:breadcrumb

Temel kullanım

Öğeleri items dizisiyle kökten sayfaya doğru sırayla verin. Kökü eklemenize gerek yoktur. Son öğe bağlantısı olsa da düz metin olarak çizilir ve aria-current="page" alır.

CANLI ÖRNEK

<acun:breadcrumb home-url="#" :items="[
    ['label' => 'Müşteriler', 'url' => '#'],
    ['label' => 'Müşteri Listesi', 'url' => '#'],
    ['label' => 'Düzenle'],
]" />

Prop	Değerler
`items`	[['label' => …, 'url' => …], …]

Rota adıyla

Adres yerine route anahtarıyla rota adı verebilirsiniz; bağlantı route() ile üretilir. Bağlantılar wire:navigate ile açılır.

BLADE

<acun:breadcrumb :items="[
    ['label' => 'Müşteriler', 'route' => 'musteriler.index'],
    ['label' => $musteri->ad_soyad],
]" />

Prop	Değerler
`items[].route`	Rota adı
`items[].url`	Doğrudan adres; route'tan önce gelir

Kök bağlantı ve bağlantısız öğe

Kök varsayılan olarak dashboard rotasına, bu rota yoksa site köküne gider; home-route ile başka bir rota, home-url ile doğrudan adres verin. home-label ikonun ekran okuyucu adı ve ipucudur. Adresi olmayan ara öğe (burada "Raporlar") düz metin olarak çizilir.

CANLI ÖRNEK

<acun:breadcrumb home-url="#" home-label="Panel anasayfası" :items="[
    ['label' => 'Raporlar'],
    ['label' => 'Satış raporu'],
]" />

Prop	Değerler
`home-route`	Kökün rota adı; varsayılan dashboard
`home-url`	Kökün doğrudan adresi; home-route'tan önce gelir
`home-label`	Kökün erişilebilir adı; varsayılan "Anasayfa"

Parçalı kullanım

items vermeden öğeleri acun:breadcrumb.item ile yazabilirsiniz: href verilen öğe bağlantıdır, verilmeyen (ya da current) öğe bulunduğunuz sayfadır ve aria-current="page" alır. Öğeler zengin içerik (ikon, rozet) taşıyabilir; ayraç acun:breadcrumb.separator ile değiştirilir (o zaman sonraki öğeye :separator="false" verin). Ana sayfa bağlantısı yine kendiliğinden eklenir.

CANLI ÖRNEK

<div class="space-y-4">
    <acun:breadcrumb home-url="#">
        <acun:breadcrumb.item href="#">Mağazalar</acun:breadcrumb.item>
        <acun:breadcrumb.item href="#">Kadıköy şubesi</acun:breadcrumb.item>
        <acun:breadcrumb.item>Siparişler</acun:breadcrumb.item>
    </acun:breadcrumb>

    <acun:breadcrumb home-url="#">
        <acun:breadcrumb.item href="#" class="flex items-center gap-1"><acun:icon name="building-storefront" size="4" /> Mağazalar</acun:breadcrumb.item>
        <acun:breadcrumb.separator>/</acun:breadcrumb.separator>
        <acun:breadcrumb.item :separator="false">Kadıköy şubesi <acun:badge variant="warning">3 sipariş bekliyor</acun:badge></acun:breadcrumb.item>
    </acun:breadcrumb>
</div>

Prop	Değerler
`acun:breadcrumb.item`	href, current, separator
`acun:breadcrumb.separator`	slot: ayraç (varsayılan ok)

API

Prop'lar ve slot'lar

Bileşenin kabul ettiği değerler.

Prop	Varsayılan	Açıklama
`items`	`[]`	['label' => …, 'url' => … \| 'route' => …]; son öğe ve adresi olmayanlar düz metin
`home-route`	`dashboard`	Kök bağlantının rota adı; rota yoksa site kökü
`home-url`	`null`	Kök bağlantının doğrudan adresi
`home-label`	`null`	Kökün erişilebilir adı; verilmezse "Anasayfa"
`breadcrumb.item: href · current · separator`	`null · href yoksa · true`	Bağlantı, bulunulan sayfa (aria-current) ve öndeki ayraç
`breadcrumb.separator`	—	Özel ayraç; slot boşsa ok işareti