{
  "$schema": "https://uipkge.dev/schema/registry-item.json",
  "name": "breadcrumb",
  "title": "Breadcrumb",
  "type": "registry:ui",
  "files": [
    {
      "path": "packages/registry-svelte/components/breadcrumb/Breadcrumb.svelte",
      "content": "<script lang=\"ts\" module>\n  import type { HTMLAttributes } from 'svelte/elements'\n\n  export interface BreadcrumbProps extends HTMLAttributes<HTMLElement> {\n    ref?: HTMLElement | null\n  }\n</script>\n\n<script lang=\"ts\">\n  let { class: className, children, ref = $bindable(null), ...restProps }: BreadcrumbProps = $props()\n</script>\n\n<nav bind:this={ref} aria-label=\"breadcrumb\" data-uipkge data-slot=\"breadcrumb\" class={className} {...restProps}>\n  {@render children?.()}\n</nav>\n",
      "type": "registry:ui",
      "target": "~/src/lib/components/ui/breadcrumb/Breadcrumb.svelte"
    },
    {
      "path": "packages/registry-svelte/components/breadcrumb/BreadcrumbEllipsis.svelte",
      "content": "<script lang=\"ts\" module>\n  import type { HTMLAttributes } from 'svelte/elements'\n\n  export interface BreadcrumbEllipsisProps extends HTMLAttributes<HTMLSpanElement> {\n    ref?: HTMLSpanElement | null\n  }\n</script>\n\n<script lang=\"ts\">\n  import { MoreHorizontal } from '@lucide/svelte'\n  import { cn } from '$lib/utils'\n\n  let { class: className, children, ref = $bindable(null), ...restProps }: BreadcrumbEllipsisProps = $props()\n</script>\n\n<span\n  bind:this={ref}\n  data-uipkge\n  data-slot=\"breadcrumb-ellipsis\"\n  class={cn('flex size-11 items-center justify-center', className)}\n  {...restProps}\n>\n  {#if children}\n    {@render children()}\n  {:else}\n    <MoreHorizontal class=\"size-4\" aria-hidden=\"true\" />\n  {/if}\n  <span class=\"sr-only\">More</span>\n</span>\n",
      "type": "registry:ui",
      "target": "~/src/lib/components/ui/breadcrumb/BreadcrumbEllipsis.svelte"
    },
    {
      "path": "packages/registry-svelte/components/breadcrumb/BreadcrumbItem.svelte",
      "content": "<script lang=\"ts\" module>\n  import type { HTMLAttributes } from 'svelte/elements'\n\n  export interface BreadcrumbItemProps extends HTMLAttributes<HTMLLIElement> {\n    ref?: HTMLLIElement | null\n  }\n</script>\n\n<script lang=\"ts\">\n  import { cn } from '$lib/utils'\n\n  let { class: className, children, ref = $bindable(null), ...restProps }: BreadcrumbItemProps = $props()\n</script>\n\n<li\n  bind:this={ref}\n  data-uipkge\n  data-slot=\"breadcrumb-item\"\n  class={cn('inline-flex items-center gap-1.5', className)}\n  {...restProps}\n>\n  {@render children?.()}\n</li>\n",
      "type": "registry:ui",
      "target": "~/src/lib/components/ui/breadcrumb/BreadcrumbItem.svelte"
    },
    {
      "path": "packages/registry-svelte/components/breadcrumb/BreadcrumbLink.svelte",
      "content": "<script lang=\"ts\" module>\n  import type { Snippet } from 'svelte'\n  import type { HTMLAnchorAttributes } from 'svelte/elements'\n\n  export interface BreadcrumbLinkProps extends HTMLAnchorAttributes {\n    /** Render your own element with the link's props and styles instead of\n     *  emitting an <a> — the Svelte counterpart of React's `asChild`. */\n    child?: Snippet<[{ props: Record<string, unknown> }]>\n    /** The rendered <a>, via `bind:ref`. Stays null in `child` mode. */\n    ref?: HTMLAnchorElement | null\n  }\n</script>\n\n<script lang=\"ts\">\n  import { cn } from '$lib/utils'\n\n  let { class: className, child, children, ref = $bindable(null), ...restProps }: BreadcrumbLinkProps = $props()\n\n  const mergedProps = $derived({\n    'data-uipkge': '',\n    'data-slot': 'breadcrumb-link',\n    class: cn(\n      'hover:text-foreground focus-visible:outline-ring rounded-sm underline-offset-4 transition-colors duration-200 hover:underline focus-visible:outline-2 focus-visible:outline-offset-2',\n      className,\n    ),\n    ...restProps,\n  })\n</script>\n\n{#if child}\n  {@render child({ props: mergedProps })}\n{:else}\n  <a bind:this={ref} {...mergedProps}>{@render children?.()}</a>\n{/if}\n",
      "type": "registry:ui",
      "target": "~/src/lib/components/ui/breadcrumb/BreadcrumbLink.svelte"
    },
    {
      "path": "packages/registry-svelte/components/breadcrumb/BreadcrumbList.svelte",
      "content": "<script lang=\"ts\" module>\n  import type { HTMLAttributes } from 'svelte/elements'\n\n  export interface BreadcrumbListProps extends HTMLAttributes<HTMLOListElement> {\n    ref?: HTMLOListElement | null\n  }\n</script>\n\n<script lang=\"ts\">\n  import { cn } from '$lib/utils'\n\n  let { class: className, children, ref = $bindable(null), ...restProps }: BreadcrumbListProps = $props()\n</script>\n\n<ol\n  bind:this={ref}\n  data-uipkge\n  data-slot=\"breadcrumb-list\"\n  class={cn('text-muted-foreground flex flex-wrap items-center gap-1.5 text-sm break-words sm:gap-2.5', className)}\n  {...restProps}\n>\n  {@render children?.()}\n</ol>\n",
      "type": "registry:ui",
      "target": "~/src/lib/components/ui/breadcrumb/BreadcrumbList.svelte"
    },
    {
      "path": "packages/registry-svelte/components/breadcrumb/BreadcrumbPage.svelte",
      "content": "<script lang=\"ts\" module>\n  import type { HTMLAttributes } from 'svelte/elements'\n\n  export interface BreadcrumbPageProps extends HTMLAttributes<HTMLSpanElement> {\n    ref?: HTMLSpanElement | null\n  }\n</script>\n\n<script lang=\"ts\">\n  import { cn } from '$lib/utils'\n\n  let { class: className, children, ref = $bindable(null), ...restProps }: BreadcrumbPageProps = $props()\n</script>\n\n<span\n  bind:this={ref}\n  data-uipkge\n  data-slot=\"breadcrumb-page\"\n  aria-current=\"page\"\n  class={cn('text-foreground cursor-default font-normal', className)}\n  {...restProps}\n>\n  {@render children?.()}\n</span>\n",
      "type": "registry:ui",
      "target": "~/src/lib/components/ui/breadcrumb/BreadcrumbPage.svelte"
    },
    {
      "path": "packages/registry-svelte/components/breadcrumb/BreadcrumbSeparator.svelte",
      "content": "<script lang=\"ts\" module>\n  import type { HTMLAttributes } from 'svelte/elements'\n\n  export interface BreadcrumbSeparatorProps extends HTMLAttributes<HTMLLIElement> {\n    ref?: HTMLLIElement | null\n  }\n</script>\n\n<script lang=\"ts\">\n  import { ChevronRight } from '@lucide/svelte'\n  import { cn } from '$lib/utils'\n\n  let { class: className, children, ref = $bindable(null), ...restProps }: BreadcrumbSeparatorProps = $props()\n</script>\n\n<li\n  bind:this={ref}\n  data-uipkge\n  data-slot=\"breadcrumb-separator\"\n  role=\"presentation\"\n  aria-hidden=\"true\"\n  class={cn('[&>svg]:size-3.5', className)}\n  {...restProps}\n>\n  {#if children}\n    {@render children()}\n  {:else}\n    <ChevronRight />\n  {/if}\n</li>\n",
      "type": "registry:ui",
      "target": "~/src/lib/components/ui/breadcrumb/BreadcrumbSeparator.svelte"
    },
    {
      "path": "packages/registry-svelte/components/breadcrumb/index.ts",
      "content": "export { default as Breadcrumb, type BreadcrumbProps } from './Breadcrumb.svelte'\nexport { default as BreadcrumbEllipsis, type BreadcrumbEllipsisProps } from './BreadcrumbEllipsis.svelte'\nexport { default as BreadcrumbItem, type BreadcrumbItemProps } from './BreadcrumbItem.svelte'\nexport { default as BreadcrumbLink, type BreadcrumbLinkProps } from './BreadcrumbLink.svelte'\nexport { default as BreadcrumbList, type BreadcrumbListProps } from './BreadcrumbList.svelte'\nexport { default as BreadcrumbPage, type BreadcrumbPageProps } from './BreadcrumbPage.svelte'\nexport { default as BreadcrumbSeparator, type BreadcrumbSeparatorProps } from './BreadcrumbSeparator.svelte'\n",
      "type": "registry:ui",
      "target": "~/src/lib/components/ui/breadcrumb/index.ts"
    }
  ],
  "dependencies": [
    "@lucide/svelte"
  ],
  "devDependencies": [],
  "registryDependencies": [],
  "description": "Hierarchical wayfinding strip that shows a user’s position in a nested page tree. Built from `<BreadcrumbList>` and `<BreadcrumbItem>` primitives so you can drop in custom separators, dropdowns for collapsed parents, and ellipsis for overflow.",
  "categories": [
    "navigation"
  ]
}