Breadcrumb
階層式導航。包裝 daisyUI 5 的 breadcrumbs 類別。雙 API：透過 items 陣列傳遞，或自行在 <ul> 中撰寫 <li>。末項 (省略 url) 為目前位置，不轉為連結。分隔符號有 chevron (預設) / slash 兩種，尺寸為 sm / md / lg。
default items API — size=md, separator=chevron
items API vs slot API — 同じ結果を 2 つの書き方で
items 配列
slot で自前 li
separator variants — chevron (default) / slash
chevron (default)
slash
size variants — sm / md / lg
sm
md (default)
lg
real-world — 長いパス (5 階層) + slash + sm
real-world — slot API で icon + label を組み合わせ
使い方
{{-- items 配列で渡す (最後の url 省略 = 現在地) --}}
<x-breadcrumb :items="[
['label' => 'Home', 'url' => '/'],
['label' => 'Docs', 'url' => '/docs'],
['label' => 'Breadcrumb'],
]" />
{{-- slot で自前に書く (icon 等を混ぜたい時) --}}
<x-breadcrumb>
<li><a href="/"><x-i type="home-2" variant="linear" class="w-4 h-4" /> Home</a></li>
<li><a href="/docs">Docs</a></li>
<li><span>Breadcrumb</span></li>
</x-breadcrumb>
{{-- separator: chevron (default) / slash --}}
<x-breadcrumb separator="slash" :items="[...]" />
{{-- size: sm / md (default) / lg --}}
<x-breadcrumb size="lg" :items="[...]" />