元件
pinion-ui

Theme

Tune

Lang

Breadcrumb

階層式導航。包裝 daisyUI 5 的 breadcrumbs 類別。雙 API：透過 items 陣列傳遞，或自行在 <ul> 中撰寫 <li>。末項 (省略 url) 為目前位置，不轉為連結。分隔符號有 chevron (預設) / slash 兩種，尺寸為 sm / md / lg。

透過 items 陣列傳入 (省略最後一個 url = 目前位置)

<x-breadcrumb :items="[
    ['label' => 'Home', 'url' => '/'],
    ['label' => 'Docs', 'url' => '#docs'],
    ['label' => 'Breadcrumb'],
]" />

<div class="overflow-x-auto">
<ul class="flex items-center flex-nowrap list-none [&amp;_li&gt;a]:inline-flex [&amp;_li&gt;a]:items-center [&amp;_li&gt;a]:gap-1 [&amp;_li&gt;span]:inline-flex [&amp;_li&gt;span]:items-center [&amp;_li&gt;span]:gap-1 [&amp;_li+li]:before:content-['›'] [&amp;_li+li]:before:mx-2 [&amp;_li+li]:before:opacity-40">
<li>
<a href="/">Home</a>
</li>
<li>
<a href="#docs">Docs</a>
</li>
<li>
<span>Breadcrumb</span>
</li>
</ul>
</div>

透過 slot 自行撰寫 (想混入 icon 等時)

<x-breadcrumb>
    <li><a href="/">Home</a></li>
    <li><a href="#products">Products</a></li>
    <li><span>Detail</span></li>
</x-breadcrumb>

<div class="overflow-x-auto">
<ul class="flex items-center flex-nowrap list-none [&amp;_li&gt;a]:inline-flex [&amp;_li&gt;a]:items-center [&amp;_li&gt;a]:gap-1 [&amp;_li&gt;span]:inline-flex [&amp;_li&gt;span]:items-center [&amp;_li&gt;span]:gap-1 [&amp;_li+li]:before:content-['›'] [&amp;_li+li]:before:mx-2 [&amp;_li+li]:before:opacity-40">
<li>
<a href="/">Home</a>
</li>
<li>
<a href="#products">Products</a>
</li>
<li>
<span>Detail</span>
</li>
</ul>
</div>

separator: chevron (default) / slash

<x-breadcrumb separator="chevron" :items="[
    ['label' => 'Home', 'url' => '/'],
    ['label' => 'Settings', 'url' => '#settings'],
    ['label' => 'Profile'],
]" />
<x-breadcrumb separator="slash" :items="[
    ['label' => 'Home', 'url' => '/'],
    ['label' => 'Settings', 'url' => '#settings'],
    ['label' => 'Profile'],
]" />

<div class="overflow-x-auto">
<ul class="flex items-center flex-nowrap list-none [&amp;_li&gt;a]:inline-flex [&amp;_li&gt;a]:items-center [&amp;_li&gt;a]:gap-1 [&amp;_li&gt;span]:inline-flex [&amp;_li&gt;span]:items-center [&amp;_li&gt;span]:gap-1 [&amp;_li+li]:before:content-['›'] [&amp;_li+li]:before:mx-2 [&amp;_li+li]:before:opacity-40">
<li>
<a href="/">Home</a>
</li>
<li>
<a href="#settings">Settings</a>
</li>
<li>
<span>Profile</span>
</li>
</ul>
</div>
<div class="overflow-x-auto">
<ul class="flex items-center flex-nowrap list-none [&amp;_li&gt;a]:inline-flex [&amp;_li&gt;a]:items-center [&amp;_li&gt;a]:gap-1 [&amp;_li&gt;span]:inline-flex [&amp;_li&gt;span]:items-center [&amp;_li&gt;span]:gap-1 [&amp;_li+li]:before:content-['/'] [&amp;_li+li]:before:mx-2 [&amp;_li+li]:before:opacity-40">
<li>
<a href="/">Home</a>
</li>
<li>
<a href="#settings">Settings</a>
</li>
<li>
<span>Profile</span>
</li>
</ul>
</div>

size: sm / md (default) / lg

<x-breadcrumb size="sm" :items="[
    ['label' => 'Home', 'url' => '/'],
    ['label' => 'Library', 'url' => '#library'],
    ['label' => 'Books'],
]" />
<x-breadcrumb size="md" :items="[
    ['label' => 'Home', 'url' => '/'],
    ['label' => 'Library', 'url' => '#library'],
    ['label' => 'Books'],
]" />
<x-breadcrumb size="lg" :items="[
    ['label' => 'Home', 'url' => '/'],
    ['label' => 'Library', 'url' => '#library'],
    ['label' => 'Books'],
]" />

<div class="overflow-x-auto text-sm">
<ul class="flex items-center flex-nowrap list-none [&amp;_li&gt;a]:inline-flex [&amp;_li&gt;a]:items-center [&amp;_li&gt;a]:gap-1 [&amp;_li&gt;span]:inline-flex [&amp;_li&gt;span]:items-center [&amp;_li&gt;span]:gap-1 [&amp;_li+li]:before:content-['›'] [&amp;_li+li]:before:mx-2 [&amp;_li+li]:before:opacity-40">
<li>
<a href="/">Home</a>
</li>
<li>
<a href="#library">Library</a>
</li>
<li>
<span>Books</span>
</li>
</ul>
</div>
<div class="overflow-x-auto">
<ul class="flex items-center flex-nowrap list-none [&amp;_li&gt;a]:inline-flex [&amp;_li&gt;a]:items-center [&amp;_li&gt;a]:gap-1 [&amp;_li&gt;span]:inline-flex [&amp;_li&gt;span]:items-center [&amp;_li&gt;span]:gap-1 [&amp;_li+li]:before:content-['›'] [&amp;_li+li]:before:mx-2 [&amp;_li+li]:before:opacity-40">
<li>
<a href="/">Home</a>
</li>
<li>
<a href="#library">Library</a>
</li>
<li>
<span>Books</span>
</li>
</ul>
</div>
<div class="overflow-x-auto text-lg">
<ul class="flex items-center flex-nowrap list-none [&amp;_li&gt;a]:inline-flex [&amp;_li&gt;a]:items-center [&amp;_li&gt;a]:gap-1 [&amp;_li&gt;span]:inline-flex [&amp;_li&gt;span]:items-center [&amp;_li&gt;span]:gap-1 [&amp;_li+li]:before:content-['›'] [&amp;_li+li]:before:mx-2 [&amp;_li+li]:before:opacity-40">
<li>
<a href="/">Home</a>
</li>
<li>
<a href="#library">Library</a>
</li>
<li>
<span>Books</span>
</li>
</ul>
</div>

real-world — 較長的路徑 (5 層) + slash + sm

<x-breadcrumb size="sm" separator="slash" :items="[
    ['label' => 'Home', 'url' => '/'],
    ['label' => 'Organization', 'url' => '#org'],
    ['label' => 'Yakaze Tech Studio', 'url' => '#org/yakaze'],
    ['label' => 'Projects', 'url' => '#org/yakaze/projects'],
    ['label' => 'pinion-ui', 'url' => '#org/yakaze/projects/pinion-ui'],
    ['label' => 'Breadcrumb'],
]" />

<div class="overflow-x-auto text-sm">
<ul class="flex items-center flex-nowrap list-none [&amp;_li&gt;a]:inline-flex [&amp;_li&gt;a]:items-center [&amp;_li&gt;a]:gap-1 [&amp;_li&gt;span]:inline-flex [&amp;_li&gt;span]:items-center [&amp;_li&gt;span]:gap-1 [&amp;_li+li]:before:content-['/'] [&amp;_li+li]:before:mx-2 [&amp;_li+li]:before:opacity-40">
<li>
<a href="/">Home</a>
</li>
<li>
<a href="#org">Organization</a>
</li>
<li>
<a href="#org/yakaze">Yakaze Tech Studio</a>
</li>
<li>
<a href="#org/yakaze/projects">Projects</a>
</li>
<li>
<a href="#org/yakaze/projects/pinion-ui">pinion-ui</a>
</li>
<li>
<span>Breadcrumb</span>
</li>
</ul>
</div>

real-world — 透過 slot API 組合 icon + label

<x-breadcrumb>
    <li>
        <a href="/">
            <x-i type="home-2" variant="linear" class="w-4 h-4" />
            Home
        </a>
    </li>
    <li>
        <a href="#docs">
            <x-i type="document-text" variant="linear" class="w-4 h-4" />
            Docs
        </a>
    </li>
    <li>
        <span class="inline-flex items-center gap-1">
            <x-i type="bookmark" variant="linear" class="w-4 h-4" />
            Breadcrumb
        </span>
    </li>
</x-breadcrumb>

<div class="overflow-x-auto">
<ul class="flex items-center flex-nowrap list-none [&amp;_li&gt;a]:inline-flex [&amp;_li&gt;a]:items-center [&amp;_li&gt;a]:gap-1 [&amp;_li&gt;span]:inline-flex [&amp;_li&gt;span]:items-center [&amp;_li&gt;span]:gap-1 [&amp;_li+li]:before:content-['›'] [&amp;_li+li]:before:mx-2 [&amp;_li+li]:before:opacity-40">
<li>
<a href="/"><svg class="w-4 h-4" viewbox="0 0 24 24">
<g fill="none" stroke="currentColor" stroke-width="1.5">
<path d="M2 12.204c0-2.289 0-3.433.52-4.381c.518-.949 1.467-1.537 3.364-2.715l2-1.241C9.889 2.622 10.892 2 12 2s2.11.622 4.116 1.867l2 1.241c1.897 1.178 2.846 1.766 3.365 2.715S22 9.915 22 12.203v1.522c0 3.9 0 5.851-1.172 7.063S17.771 22 14 22h-4c-3.771 0-5.657 0-6.828-1.212S2 17.626 2 13.725z"></path>
<path stroke-linecap="round" d="M12 15v3"></path>
</g></svg> Home</a>
</li>
<li>
<a href="#docs"><svg class="w-4 h-4" viewbox="0 0 24 24">
<g fill="none" stroke="currentColor" stroke-width="1.5">
<path d="M3 10c0-3.771 0-5.657 1.172-6.828S7.229 2 11 2h2c3.771 0 5.657 0 6.828 1.172S21 6.229 21 10v4c0 3.771 0 5.657-1.172 6.828S16.771 22 13 22h-2c-3.771 0-5.657 0-6.828-1.172S3 17.771 3 14z"></path>
<path stroke-linecap="round" d="M8 12h8M8 8h8m-8 8h5"></path>
</g></svg> Docs</a>
</li>
<li>
<span class="inline-flex items-center gap-1"><svg class="w-4 h-4" viewbox="0 0 24 24">
<g fill="none" stroke="currentColor" stroke-width="1.5">
<path d="M21 16.09v-4.992c0-4.29 0-6.433-1.318-7.766C18.364 2 16.242 2 12 2S5.636 2 4.318 3.332S3 6.81 3 11.098v4.993c0 3.096 0 4.645.734 5.321c.35.323.792.526 1.263.58c.987.113 2.14-.907 4.445-2.946c1.02-.901 1.529-1.352 2.118-1.47c.29-.06.59-.06.88 0c.59.118 1.099.569 2.118 1.47c2.305 2.039 3.458 3.059 4.445 2.945c.47-.053.913-.256 1.263-.579c.734-.676.734-2.224.734-5.321Z"></path>
<path stroke-linecap="round" d="M15 6H9"></path>
</g></svg> Breadcrumb</span>
</li>
</ul>
</div>