106 lines
4.0 KiB
Plaintext
106 lines
4.0 KiB
Plaintext
component Breadcrumbs {
|
|
props {
|
|
class: string = ""
|
|
items = []
|
|
centered = false
|
|
compact = false
|
|
showHome = true
|
|
homeLabel = "Home"
|
|
homeHref = "/"
|
|
}
|
|
|
|
view {
|
|
<nav
|
|
aria-label="Breadcrumb"
|
|
class="w-full {class}"
|
|
class:hidden="items.length === 0 && !showHome"
|
|
>
|
|
<ol
|
|
class="flex flex-wrap items-center text-slate-500 dark:text-slate-400"
|
|
class:justify-center="centered"
|
|
class:gap-1.5="compact"
|
|
class:text-xs="compact"
|
|
class:gap-2="!compact"
|
|
class:text-sm="!compact"
|
|
>
|
|
<!-- Home -->
|
|
<li
|
|
class:hidden="!showHome"
|
|
class:inline-flex="showHome"
|
|
>
|
|
<a
|
|
href="{homeHref}"
|
|
class="group inline-flex items-center gap-1.5 rounded-lg transition hover:text-indigo-700 focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500 dark:hover:text-indigo-300"
|
|
>
|
|
<span class="icon-[lucide--home] h-3.5 w-3.5" aria-hidden="true" ></span>
|
|
|
|
<span class:hidden="compact">
|
|
{homeLabel}
|
|
</span>
|
|
|
|
<span
|
|
class="sr-only"
|
|
class:hidden="!compact"
|
|
>
|
|
{homeLabel}
|
|
</span>
|
|
</a>
|
|
</li>
|
|
|
|
<!-- Separator after home -->
|
|
<li
|
|
aria-hidden="true"
|
|
class="text-slate-300 dark:text-slate-700"
|
|
class:hidden="!showHome || items.length === 0"
|
|
class:inline-flex="showHome && items.length > 0"
|
|
>
|
|
<span class="icon-[lucide--chevron-right] h-3.5 w-3.5" ></span>
|
|
</li>
|
|
|
|
<!-- Dynamic breadcrumb items -->
|
|
{#each items as item, index}
|
|
<li class="inline-flex min-w-0 items-center gap-2">
|
|
<!-- Linked item -->
|
|
<a
|
|
href="{item.href}"
|
|
class="max-w-48 truncate rounded-lg transition hover:text-indigo-700 focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500 dark:hover:text-indigo-300 sm:max-w-64"
|
|
class:hidden="item.current || item.href === ''"
|
|
class:inline-flex="!item.current && item.href !== ''"
|
|
>
|
|
{item.label}
|
|
</a>
|
|
|
|
<!-- Current item -->
|
|
<span
|
|
aria-current="page"
|
|
class="max-w-48 truncate font-semibold text-slate-950 dark:text-white sm:max-w-64"
|
|
class:hidden="!item.current"
|
|
class:inline-flex="item.current"
|
|
>
|
|
{item.label}
|
|
</span>
|
|
|
|
<!-- Plain unlinked item -->
|
|
<span
|
|
class="max-w-48 truncate text-slate-600 dark:text-slate-300 sm:max-w-64"
|
|
class:hidden="item.current || item.href !== ''"
|
|
class:inline-flex="!item.current && item.href === ''"
|
|
>
|
|
{item.label}
|
|
</span>
|
|
|
|
<!-- Separator -->
|
|
<span
|
|
aria-hidden="true"
|
|
class="inline-flex text-slate-300 dark:text-slate-700"
|
|
class:hidden="index === items.length - 1"
|
|
>
|
|
<span class="icon-[lucide--chevron-right] h-3.5 w-3.5" ></span>
|
|
</span>
|
|
</li>
|
|
{/each}
|
|
</ol>
|
|
</nav>
|
|
}
|
|
}
|