DocsBreadcrumb() — ui Function Reference

Architecture documentation for the DocsBreadcrumb() function in docs-breadcrumb.tsx from the ui codebase.

Function tsx Internationalization Dictionary

Entity Profile

Internationalization→ Dictionary→ DocsBreadcrumb() — ui Function Reference

Dependency Diagram

graph TD
  3a91664a_55bf_44fb_34d0_ac079f9e7e29["DocsBreadcrumb()"]
  963b1f56_a7c0_7f64_3ff0_1c49cfb4bcb7["docs-breadcrumb.tsx"]
  3a91664a_55bf_44fb_34d0_ac079f9e7e29 -->|defined in| 963b1f56_a7c0_7f64_3ff0_1c49cfb4bcb7
  style 3a91664a_55bf_44fb_34d0_ac079f9e7e29 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

apps/v4/components/docs-breadcrumb.tsx lines 18–65

export function DocsBreadcrumb({
  tree,
  className,
}: {
  tree: Root
  className?: string
}) {
  const pathname = usePathname()
  const items = useBreadcrumb(pathname, tree)

  if (items.length === 0) return null

  return (
    <Breadcrumb className={className}>
      <BreadcrumbList>
        <BreadcrumbItem>
          <BreadcrumbLink asChild>
            <Link href="/docs" className="hover:text-accent-foreground">
              Docs
            </Link>
          </BreadcrumbLink>
        </BreadcrumbItem>
        <BreadcrumbSeparator />
        {items.map((item, i) => (
          <Fragment key={i}>
            {i !== 0 && <BreadcrumbSeparator />}
            {item.url ? (
              <BreadcrumbItem>
                <BreadcrumbLink asChild>
                  <Link
                    href={item.url}
                    className="hover:text-accent-foreground truncate"
                  >
                    {item.name}
                  </Link>
                </BreadcrumbLink>
              </BreadcrumbItem>
            ) : (
              <BreadcrumbItem>
                <BreadcrumbPage>{item.name}</BreadcrumbPage>
              </BreadcrumbItem>
            )}
          </Fragment>
        ))}
      </BreadcrumbList>
    </Breadcrumb>
  )
}