Breadcrumb
階層ナビゲーション。daisyUI 5 の breadcrumbs class を wrap。dual API: items 配列で渡すか、自前で <ul> に <li> を書くか。最後の item (url 省略) は現在地として link 化しない。separator は chevron (default) / slash の 2 種、size は 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="[...]" />