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

breadcrumb-example.tsx — ui Source File

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

File tsx ComponentRegistry ChartRegistry 5 imports 4 functions

Entity Profile

Dependency Diagram

graph LR
  a454953a_7f2f_df71_7b63_05db62ef0b00["breadcrumb-example.tsx"]
  ba3d44f3_7b34_f9cc_6283_44817785c0df["link"]
  a454953a_7f2f_df71_7b63_05db62ef0b00 --> ba3d44f3_7b34_f9cc_6283_44817785c0df
  da02b53a_0c1d_d1a1_af31_74d99f1cdd7a["example"]
  a454953a_7f2f_df71_7b63_05db62ef0b00 --> da02b53a_0c1d_d1a1_af31_74d99f1cdd7a
  54ee8410_1b30_8123_c884_6baa6661eb1a["breadcrumb"]
  a454953a_7f2f_df71_7b63_05db62ef0b00 --> 54ee8410_1b30_8123_c884_6baa6661eb1a
  381135fe_5f7a_910a_b8a2_691e9756a016["button"]
  a454953a_7f2f_df71_7b63_05db62ef0b00 --> 381135fe_5f7a_910a_b8a2_691e9756a016
  8001cb6e_41cc_4789_e2c4_6c9b6b1cc0bb["dropdown-menu"]
  a454953a_7f2f_df71_7b63_05db62ef0b00 --> 8001cb6e_41cc_4789_e2c4_6c9b6b1cc0bb
  style a454953a_7f2f_df71_7b63_05db62ef0b00 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

import Link from "next/link"

import {
  Example,
  ExampleWrapper,
} from "@/registry/bases/radix/components/example"
import {
  Breadcrumb,
  BreadcrumbEllipsis,
  BreadcrumbItem,
  BreadcrumbLink,
  BreadcrumbList,
  BreadcrumbPage,
  BreadcrumbSeparator,
} from "@/registry/bases/radix/ui/breadcrumb"
import { Button } from "@/registry/bases/radix/ui/button"
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuTrigger,
} from "@/registry/bases/radix/ui/dropdown-menu"

export default function BreadcrumbExample() {
  return (
    <ExampleWrapper>
      <BreadcrumbBasic />
      <BreadcrumbWithDropdown />
      <BreadcrumbWithLink />
    </ExampleWrapper>
  )
}

function BreadcrumbBasic() {
  return (
    <Example title="Basic" className="items-center justify-center">
      <Breadcrumb>
        <BreadcrumbList>
          <BreadcrumbItem>
            <BreadcrumbLink href="#">Home</BreadcrumbLink>
          </BreadcrumbItem>
          <BreadcrumbSeparator />
          <BreadcrumbItem>
            <BreadcrumbLink href="#">Components</BreadcrumbLink>
          </BreadcrumbItem>
          <BreadcrumbSeparator />
          <BreadcrumbItem>
            <BreadcrumbPage>Breadcrumb</BreadcrumbPage>
          </BreadcrumbItem>
        </BreadcrumbList>
      </Breadcrumb>
    </Example>
  )
}

function BreadcrumbWithDropdown() {
  return (
    <Example title="With Dropdown" className="items-center justify-center">
      <Breadcrumb>
        <BreadcrumbList>
// ... (63 more lines)

Domain

Subdomains

Functions

Dependencies

  • breadcrumb
  • button
  • dropdown-menu
  • example
  • link

Source

Frequently Asked Questions

What does breadcrumb-example.tsx do?
breadcrumb-example.tsx is a source file in the ui codebase, written in tsx. It belongs to the ComponentRegistry domain, ChartRegistry subdomain.
What functions are defined in breadcrumb-example.tsx?
breadcrumb-example.tsx defines 4 function(s): BreadcrumbBasic, BreadcrumbExample, BreadcrumbWithDropdown, BreadcrumbWithLink.
What does breadcrumb-example.tsx depend on?
breadcrumb-example.tsx imports 5 module(s): breadcrumb, button, dropdown-menu, example, link.
Where is breadcrumb-example.tsx in the architecture?
breadcrumb-example.tsx is located at apps/v4/registry/bases/radix/examples/breadcrumb-example.tsx (domain: ComponentRegistry, subdomain: ChartRegistry, directory: apps/v4/registry/bases/radix/examples).

Analyze Your Own Codebase

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

Try Supermodel Free