first

src/lib/components/ui/breadcrumb/breadcrumb-ellipsis.svelte

@@ -0,0 +1,17 @@
+<script>
+  import Ellipsis from "lucide-svelte/icons/ellipsis";
+  import { cn } from "$lib/utils.js";
+
+  let { ref = $bindable(null), class: className, ...restProps } = $props();
+</script>
+
+<span
+  bind:this={ref}
+  role="presentation"
+  aria-hidden="true"
+  class={cn("flex size-9 items-center justify-center", className)}
+  {...restProps}
+>
+  <Ellipsis class="size-4" />
+  <span class="sr-only">More</span>
+</span>

src/lib/components/ui/breadcrumb/breadcrumb-item.svelte

@@ -0,0 +1,9 @@
+<script>
+  import { cn } from "$lib/utils.js";
+
+  let { ref = $bindable(null), class: className, children, ...restProps } = $props();
+</script>
+
+<li bind:this={ref} class={cn("inline-flex items-center gap-1.5", className)} {...restProps}>
+  {@render children?.()}
+</li>

src/lib/components/ui/breadcrumb/breadcrumb-link.svelte

@@ -0,0 +1,26 @@
+<script>
+  import { cn } from "$lib/utils.js";
+
+  let {
+    ref = $bindable(null),
+    class: className,
+    href = undefined,
+    child,
+    children,
+    ...restProps
+  } = $props();
+
+  const attrs = $derived({
+    class: cn("hover:text-foreground transition-colors", className),
+    href,
+    ...restProps,
+  });
+</script>
+
+{#if child}
+  {@render child({ props: attrs })}
+{:else}
+  <a bind:this={ref} {...attrs}>
+    {@render children?.()}
+  </a>
+{/if}

src/lib/components/ui/breadcrumb/breadcrumb-list.svelte

@@ -0,0 +1,16 @@
+<script>
+  import { cn } from "$lib/utils.js";
+
+  let { ref = $bindable(null), class: className, children, ...restProps } = $props();
+</script>
+
+<ol
+  bind:this={ref}
+  class={cn(
+    "flex flex-wrap items-center gap-1.5 break-words text-sm text-muted-foreground sm:gap-2.5",
+    className,
+  )}
+  {...restProps}
+>
+  {@render children?.()}
+</ol>

src/lib/components/ui/breadcrumb/breadcrumb-page.svelte

@@ -0,0 +1,16 @@
+<script>
+  import { cn } from "$lib/utils.js";
+
+  let { ref = $bindable(null), class: className, children, ...restProps } = $props();
+</script>
+
+<span
+  bind:this={ref}
+  role="link"
+  aria-disabled="true"
+  aria-current="page"
+  class={cn("font-normal text-foreground", className)}
+  {...restProps}
+>
+  {@render children?.()}
+</span>

src/lib/components/ui/breadcrumb/breadcrumb-separator.svelte

@@ -0,0 +1,20 @@
+<script>
+  import ChevronRight from "lucide-svelte/icons/chevron-right";
+  import { cn } from "$lib/utils.js";
+
+  let { ref = $bindable(null), class: className, children, ...restProps } = $props();
+</script>
+
+<li
+  role="presentation"
+  aria-hidden="true"
+  class={cn("[&>svg]:size-3.5", className)}
+  bind:this={ref}
+  {...restProps}
+>
+  {#if children}
+    {@render children?.()}
+  {:else}
+    <ChevronRight />
+  {/if}
+</li>

src/lib/components/ui/breadcrumb/breadcrumb.svelte

@@ -0,0 +1,7 @@
+<script>
+  let { ref = $bindable(), class: className, children, ...restProps } = $props();
+</script>
+
+<nav bind:this={ref} class={className} aria-label="breadcrumb" {...restProps}>
+  {@render children?.()}
+</nav>

src/lib/components/ui/breadcrumb/index.js

@@ -0,0 +1,25 @@
+import Ellipsis from "./breadcrumb-ellipsis.svelte";
+import Item from "./breadcrumb-item.svelte";
+import Link from "./breadcrumb-link.svelte";
+import List from "./breadcrumb-list.svelte";
+import Page from "./breadcrumb-page.svelte";
+import Separator from "./breadcrumb-separator.svelte";
+import Root from "./breadcrumb.svelte";
+
+export {
+  //
+  Root as Breadcrumb,
+  Ellipsis as BreadcrumbEllipsis,
+  Item as BreadcrumbItem,
+  Link as BreadcrumbLink,
+  List as BreadcrumbList,
+  Page as BreadcrumbPage,
+  Separator as BreadcrumbSeparator,
+  Ellipsis,
+  Item,
+  Link,
+  List,
+  Page,
+  Root,
+  Separator,
+};