ui Architecture Docs
Home / File/ docs-breadcrumb.tsx — ui Source File

docs-breadcrumb.tsx — ui Source File

Architecture documentation for docs-breadcrumb.tsx, a tsx file in the ui codebase. 6 imports, 0 dependents.

File tsx Internationalization Dictionary 6 imports 1 functions

Entity Profile

Dependency Diagram

graph LR
  963b1f56_a7c0_7f64_3ff0_1c49cfb4bcb7["docs-breadcrumb.tsx"]
  1d141819_425e_b5fd_4c8e_32f7c6a42cf2["react"]
  963b1f56_a7c0_7f64_3ff0_1c49cfb4bcb7 --> 1d141819_425e_b5fd_4c8e_32f7c6a42cf2
  ba3d44f3_7b34_f9cc_6283_44817785c0df["link"]
  963b1f56_a7c0_7f64_3ff0_1c49cfb4bcb7 --> ba3d44f3_7b34_f9cc_6283_44817785c0df
  f5b0b1d9_de2f_9c31_0bcd_4adbd07581cb["navigation"]
  963b1f56_a7c0_7f64_3ff0_1c49cfb4bcb7 --> f5b0b1d9_de2f_9c31_0bcd_4adbd07581cb
  8872b469_a1dd_55c3_61ca_866e4331131c["breadcrumb"]
  963b1f56_a7c0_7f64_3ff0_1c49cfb4bcb7 --> 8872b469_a1dd_55c3_61ca_866e4331131c
  bbb5865c_0865_78cd_fe8b_8ed5c3156f41["page-tree"]
  963b1f56_a7c0_7f64_3ff0_1c49cfb4bcb7 --> bbb5865c_0865_78cd_fe8b_8ed5c3156f41
  ae3635e3_d1ef_d848_ce80_aa7c696f0ec1["breadcrumb"]
  963b1f56_a7c0_7f64_3ff0_1c49cfb4bcb7 --> ae3635e3_d1ef_d848_ce80_aa7c696f0ec1
  style 963b1f56_a7c0_7f64_3ff0_1c49cfb4bcb7 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

"use client"

import { Fragment } from "react"
import Link from "next/link"
import { usePathname } from "next/navigation"
import { useBreadcrumb } from "fumadocs-core/breadcrumb"
import type { Root } from "fumadocs-core/page-tree"

import {
  Breadcrumb,
  BreadcrumbItem,
  BreadcrumbLink,
  BreadcrumbList,
  BreadcrumbPage,
  BreadcrumbSeparator,
} from "@/registry/new-york-v4/ui/breadcrumb"

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

Domain

Subdomains

Functions

Dependencies

  • breadcrumb
  • breadcrumb
  • link
  • navigation
  • page-tree
  • react

Source

Frequently Asked Questions

What does docs-breadcrumb.tsx do?
docs-breadcrumb.tsx is a source file in the ui codebase, written in tsx. It belongs to the Internationalization domain, Dictionary subdomain.
What functions are defined in docs-breadcrumb.tsx?
docs-breadcrumb.tsx defines 1 function(s): DocsBreadcrumb.
What does docs-breadcrumb.tsx depend on?
docs-breadcrumb.tsx imports 6 module(s): breadcrumb, breadcrumb, link, navigation, page-tree, react.
Where is docs-breadcrumb.tsx in the architecture?
docs-breadcrumb.tsx is located at apps/v4/components/docs-breadcrumb.tsx (domain: Internationalization, subdomain: Dictionary, directory: apps/v4/components).

Analyze Your Own Codebase

Get architecture documentation, dependency graphs, and domain analysis for your codebase in minutes.

Try Supermodel Free