Breadcrumbs

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<Breadcrumbs
  items="[]"
  centered="false"
  compact="false"
  showHome="true"
  homeLabel="Home"
/>

Legacy mount name: data-component="Breadcrumbs".

Props and attributes

Slots

This component does not declare a slot.

Events

This component does not declare a custom event.

Source contract

Installed source: components/Breadcrumbs.wrn

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>
    }
}