core component

Breadcrumbs

Reusable breadcrumbs component.

@wrnexus/ui 0.2.647 props0 slots0 events

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

Prop	Type	Requirement	Default
`class`	`string`	Optional	`""`
`items`	`string`	Optional	`[]`
`centered`	`boolean`	Optional	`false`
`compact`	`boolean`	Optional	`false`
`showHome`	`boolean`	Optional	`true`
`homeLabel`	`string`	Optional	`"Home"`
`homeHref`	`string`	Optional	`"/"`

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