{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "smart-breadcrumbs", "type": "registry:ui", "title": "Smart Breadcrumbs", "description": "Breadcrumbs that measure themselves and fold middle items into an accessible overflow menu when space runs short.", "author": "WANSTUDIO ", "dependencies": [ "motion" ], "files": [ { "path": "registry/wancraft/smart-breadcrumbs.tsx", "content": "\"use client\";\n\nimport * as React from \"react\";\nimport { AnimatePresence, motion } from \"motion/react\";\n\ntype Spring = { stiffness: number; damping: number; mass: number };\n\nexport interface BreadcrumbItem {\n /** Stable key; defaults to href or label. */\n id?: string;\n label: string;\n href?: string;\n /** Optional leading icon (decorative). */\n icon?: React.ReactNode;\n}\n\nexport interface SmartBreadcrumbsProps extends Omit, \"onDrag\" | \"onDragStart\" | \"onDragEnd\" | \"onAnimationStart\" | \"onAnimationEnd\"> {\n /** Trail from the root to the current page. The last item is the current page. */\n items: BreadcrumbItem[];\n /** Items at the start that never collapse. */\n keepFirst?: number;\n /** Items at the end (including the current page) that never collapse. */\n keepLast?: number;\n separator?: \"chevron\" | \"slash\" | \"dot\";\n size?: \"sm\" | \"md\";\n /** Spring for the collapse / expand layout animation. */\n spring?: Spring;\n /** Accent for hover underlines, focus rings and the open overflow button. */\n accent?: string;\n /** Accessible name of the nav landmark. */\n label?: string;\n /** Accessible name of the overflow (\"…\") button. */\n overflowLabel?: string;\n /** Called when a crumb or overflow menu item is activated (before navigation). */\n onNavigate?: (item: BreadcrumbItem, event: React.MouseEvent) => void;\n}\n\nfunction subscribeReducedMotion(cb: () => void) {\n const mq = window.matchMedia(\"(prefers-reduced-motion: reduce)\");\n mq.addEventListener(\"change\", cb);\n return () => mq.removeEventListener(\"change\", cb);\n}\nfunction usePrefersReducedMotion() {\n return React.useSyncExternalStore(\n subscribeReducedMotion,\n () => window.matchMedia(\"(prefers-reduced-motion: reduce)\").matches,\n () => false,\n );\n}\n\nconst keyOf = (item: BreadcrumbItem, index: number) => item.id ?? item.href ?? `${index}-${item.label}`;\n\nfunction Separator({ kind, className = \"\" }: { kind: \"chevron\" | \"slash\" | \"dot\"; className?: string }) {\n return (\n \n {kind === \"chevron\" ? (\n \n \n \n ) : kind === \"slash\" ? (\n /\n ) : (\n ·\n )}\n \n );\n}\n\n/**\n * Breadcrumbs that measure themselves with a ResizeObserver and fold middle items into an\n * accessible \"…\" menu button when space runs short, keeping the first and last items visible.\n * Collapsing and expanding animate with a layout spring; the current page carries aria-current.\n */\nexport function SmartBreadcrumbs({\n items,\n keepFirst = 1,\n keepLast = 2,\n separator = \"chevron\",\n size = \"md\",\n spring = { stiffness: 420, damping: 36, mass: 0.8 },\n accent = \"#FF7448\",\n label = \"Breadcrumb\",\n overflowLabel = \"Show hidden pages\",\n onNavigate,\n className = \"\",\n style,\n ...props\n}: SmartBreadcrumbsProps) {\n const uid = React.useId();\n const reduceMotion = usePrefersReducedMotion();\n const navRef = React.useRef(null);\n const measureRef = React.useRef(null);\n const buttonRef = React.useRef(null);\n const menuRef = React.useRef(null);\n const focusOnOpen = React.useRef<\"first\" | \"last\">(\"first\");\n const [layout, setLayout] = React.useState({ hidden: 0, ready: false, tight: false });\n const [menuOpen, setMenuOpen] = React.useState(false);\n\n const first = Math.max(0, Math.min(keepFirst, items.length));\n const last = Math.max(1, Math.min(keepLast, items.length - first));\n const collapsible = Math.max(0, items.length - first - last);\n\n /** Finds how many middle items must fold away for the trail to fit on one line. */\n const measure = React.useEffectEvent(() => {\n const nav = navRef.current;\n const ruler = measureRef.current;\n if (!nav || !ruler) return;\n const available = nav.clientWidth - 1;\n const widthOf = (name: string) => (ruler.querySelector(`[data-measure=\"${name}\"]`)?.offsetWidth ?? 0);\n const sep = widthOf(\"sep\");\n const ellipsis = widthOf(\"ellipsis\");\n const widths = items.map((_, i) => widthOf(String(i)));\n const total = (hide: number) => {\n let sum = 0;\n for (let i = 0; i < widths.length; i++) if (i < first || i >= first + hide) sum += widths[i];\n const lis = widths.length - hide + (hide > 0 ? 1 : 0);\n return sum + (hide > 0 ? ellipsis : 0) + sep * Math.max(0, lis - 1);\n };\n let hidden = 0;\n while (hidden < collapsible && total(hidden) > available) hidden++;\n // A single folded item would trade one crumb for \"…\": fold at least two when possible.\n if (hidden === 1 && collapsible >= 2) hidden = 2;\n // Still too wide with everything folded: ancestors shrink to their icon (or a short label).\n const tight = total(hidden) > available;\n setLayout((prev) => (prev.hidden === hidden && prev.tight === tight && prev.ready ? prev : { hidden, tight, ready: true }));\n });\n\n React.useEffect(() => {\n const nav = navRef.current;\n const ruler = measureRef.current;\n if (!nav || !ruler) return;\n const observer = new ResizeObserver(() => measure());\n observer.observe(nav);\n observer.observe(ruler);\n return () => observer.disconnect();\n }, []);\n // Re-measure when the trail or its rules change (the ruler's size may stay the same).\n const signature = `${items.map((item) => item.label).join(\"\\u0000\")}|${first}|${last}|${separator}|${size}`;\n React.useEffect(() => {\n const frame = requestAnimationFrame(() => measure());\n return () => cancelAnimationFrame(frame);\n }, [signature]);\n\n const hidden = Math.min(layout.hidden, collapsible);\n const hiddenItems = items.slice(first, first + hidden);\n // Close the menu when nothing is folded any more (adjust state during render).\n if (menuOpen && hidden === 0) setMenuOpen(false);\n\n // While the menu is open: focus an item, close on outside pointer or focus leaving.\n React.useEffect(() => {\n if (!menuOpen) return;\n const menuItems = Array.from(menuRef.current?.querySelectorAll('[role=\"menuitem\"]') ?? []);\n (focusOnOpen.current === \"last\" ? menuItems[menuItems.length - 1] : menuItems[0])?.focus();\n const onPointerDown = (event: PointerEvent) => {\n const target = event.target as Node;\n if (menuRef.current?.contains(target) || buttonRef.current?.contains(target)) return;\n setMenuOpen(false);\n };\n document.addEventListener(\"pointerdown\", onPointerDown);\n return () => document.removeEventListener(\"pointerdown\", onPointerDown);\n }, [menuOpen]);\n\n const openMenu = (focus: \"first\" | \"last\") => {\n focusOnOpen.current = focus;\n setMenuOpen(true);\n };\n const closeMenu = (returnFocus: boolean) => {\n setMenuOpen(false);\n if (returnFocus) buttonRef.current?.focus();\n };\n\n const onMenuKeyDown = (event: React.KeyboardEvent) => {\n const menuItems = Array.from(event.currentTarget.querySelectorAll('[role=\"menuitem\"]'));\n const index = menuItems.indexOf(document.activeElement as HTMLElement);\n const go = (i: number) => menuItems[(i + menuItems.length) % menuItems.length]?.focus();\n if (event.key === \"ArrowDown\") go(index + 1);\n else if (event.key === \"ArrowUp\") go(index - 1);\n else if (event.key === \"Home\") go(0);\n else if (event.key === \"End\") go(menuItems.length - 1);\n else if (event.key === \"Escape\") closeMenu(true);\n else if (event.key === \"Tab\") {\n setMenuOpen(false);\n return;\n } else return;\n event.preventDefault();\n };\n\n const text = size === \"sm\" ? \"text-[13px]\" : \"text-[15px]\";\n const sepPad = size === \"sm\" ? \"px-1.5\" : \"px-2\";\n const iconBox = size === \"sm\" ? \"[&_svg]:size-3.5\" : \"[&_svg]:size-4\";\n const crumbBase = `inline-flex min-w-0 items-center gap-1.5 whitespace-nowrap ${iconBox}`;\n const linkClass = `${crumbBase} rounded-[3px] text-zinc-500 underline-offset-4 decoration-[var(--sb-accent)] transition-colors outline-hidden hover:text-zinc-900 hover:underline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-solid focus-visible:outline-[var(--sb-accent)] dark:text-zinc-400 dark:hover:text-zinc-100`;\n const transition = layout.ready && !reduceMotion ? { type: \"spring\" as const, ...spring } : { duration: 0 };\n\n const crumbContent = (item: BreadcrumbItem, current: boolean, tight = false) => (\n <>\n {item.icon ? (\n \n {item.icon}\n \n ) : null}\n {item.label}\n \n );\n\n const renderCrumb = (item: BreadcrumbItem, index: number) => {\n const current = index === items.length - 1;\n if (current) {\n return (\n \n {crumbContent(item, true)}\n \n );\n }\n if (item.href) {\n return (\n onNavigate?.(item, event)}>\n {crumbContent(item, false, layout.tight)}\n \n );\n }\n return (\n \n {crumbContent(item, false, layout.tight)}\n \n );\n };\n\n // Visible list: first items, the overflow crumb, then the rest. Only the current page truncates.\n type Entry = { key: string; node: React.ReactNode; current?: boolean };\n const entries: Entry[] = [];\n items.forEach((item, index) => {\n if (index === first && hidden > 0) entries.push({ key: \"__overflow\", node: null });\n if (index >= first && index < first + hidden) return;\n entries.push({ key: keyOf(item, index), node: renderCrumb(item, index), current: index === items.length - 1 });\n });\n\n const menuId = `${uid}-menu`;\n const buttonId = `${uid}-more`;\n\n return (\n \n
    \n \n {entries.map((entry, i) => (\n \n {i > 0 ? : null}\n {entry.key === \"__overflow\" ? (\n <>\n (menuOpen ? closeMenu(false) : openMenu(\"first\"))}\n onKeyDown={(event) => {\n if (event.key === \"ArrowDown\" || event.key === \"ArrowUp\") {\n event.preventDefault();\n openMenu(event.key === \"ArrowUp\" ? \"last\" : \"first\");\n }\n }}\n className={`grid h-6 min-w-7 place-items-center rounded-md px-1.5 tracking-widest text-zinc-500 transition-colors outline-hidden hover:bg-zinc-900/[0.06] hover:text-zinc-900 focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-solid focus-visible:outline-[var(--sb-accent)] dark:text-zinc-400 dark:hover:bg-white/[0.08] dark:hover:text-zinc-100 ${menuOpen ? \"bg-zinc-900/[0.06] text-zinc-900 dark:bg-white/[0.08] dark:text-zinc-100\" : \"\"}`}\n >\n \n \n \n \n \n \n \n {menuOpen ? (\n \n {hiddenItems.map((item, i) => {\n const itemClass = `flex w-full items-center gap-2 rounded-lg px-2.5 py-1.5 text-left text-zinc-700 outline-hidden ${iconBox} hover:bg-zinc-900/[0.05] focus:bg-zinc-900/[0.06] focus-visible:outline-2 focus-visible:outline-offset-[-2px] focus-visible:outline-solid focus-visible:outline-[var(--sb-accent)] dark:text-zinc-300 dark:hover:bg-white/[0.06] dark:focus:bg-white/[0.08]`;\n const inner = (\n <>\n \n {first + i + 1}\n \n {item.icon ? (\n \n {item.icon}\n \n ) : null}\n {item.label}\n \n );\n return (\n
  1. \n {item.href ? (\n {\n onNavigate?.(item, event);\n setMenuOpen(false);\n }}\n >\n {inner}\n \n ) : (\n {\n onNavigate?.(item, event);\n closeMenu(true);\n }}\n >\n {inner}\n \n )}\n
    2. \n );\n })}\n \n ) : null}\n     \n \n ) : (\n entry.node\n )}\n \n ))}\n     \n
\n\n {/* Invisible ruler: every crumb at its natural width, plus a separator and the overflow button. */}\n
\n
    \n
  1. \n \n
    2. \n
  2. \n \n
    3. \n {items.map((item, index) => (\n
  3. \n {crumbContent(item, index === items.length - 1)}\n
    4. \n ))}\n
\n
\n \n );\n}\n", "type": "registry:ui" } ], "categories": [ "navigation" ], "docs": "Documentation: https://wancraft.my/components/smart-breadcrumbs" }