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 UIPrimitives 5 imports 4 functions

Entity Profile

Dependency Diagram

graph LR
  bdb83ef3_417c_6e2c_33b7_19ece266fa85["breadcrumb-example.tsx"]
  ba3d44f3_7b34_f9cc_6283_44817785c0df["link"]
  bdb83ef3_417c_6e2c_33b7_19ece266fa85 --> ba3d44f3_7b34_f9cc_6283_44817785c0df
  f56be340_a522_c6f7_dec3_5906873d14c8["example"]
  bdb83ef3_417c_6e2c_33b7_19ece266fa85 --> f56be340_a522_c6f7_dec3_5906873d14c8
  23815ff6_dea8_347d_8a17_d530b1631a0b["breadcrumb"]
  bdb83ef3_417c_6e2c_33b7_19ece266fa85 --> 23815ff6_dea8_347d_8a17_d530b1631a0b
  7328fa0a_98b6_fe77_42fd_0d1582b24604["button"]
  bdb83ef3_417c_6e2c_33b7_19ece266fa85 --> 7328fa0a_98b6_fe77_42fd_0d1582b24604
  ac307fe4_34c0_4667_089c_c9e7c15ca708["dropdown-menu"]
  bdb83ef3_417c_6e2c_33b7_19ece266fa85 --> ac307fe4_34c0_4667_089c_c9e7c15ca708
  style bdb83ef3_417c_6e2c_33b7_19ece266fa85 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

import Link from "next/link"

import {
  Example,
  ExampleWrapper,
} from "@/registry/bases/base/components/example"
import {
  Breadcrumb,
  BreadcrumbEllipsis,
  BreadcrumbItem,
  BreadcrumbLink,
  BreadcrumbList,
  BreadcrumbPage,
  BreadcrumbSeparator,
} from "@/registry/bases/base/ui/breadcrumb"
import { Button } from "@/registry/bases/base/ui/button"
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuTrigger,
} from "@/registry/bases/base/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>
          <BreadcrumbItem>
            <BreadcrumbLink href="#">Home</BreadcrumbLink>
          </BreadcrumbItem>
          <BreadcrumbSeparator />
          <BreadcrumbItem>
            <DropdownMenu>
              <DropdownMenuTrigger
                render={<Button size="icon-sm" variant="ghost" />}
              >
                <BreadcrumbEllipsis />
                <span className="sr-only">Toggle menu</span>
              </DropdownMenuTrigger>
              <DropdownMenuContent align="start">
                <DropdownMenuItem>Documentation</DropdownMenuItem>
                <DropdownMenuItem>Themes</DropdownMenuItem>
                <DropdownMenuItem>GitHub</DropdownMenuItem>
              </DropdownMenuContent>
            </DropdownMenu>
          </BreadcrumbItem>
          <BreadcrumbSeparator />
          <BreadcrumbItem>
            <BreadcrumbLink href="#">Components</BreadcrumbLink>
          </BreadcrumbItem>
          <BreadcrumbSeparator />
          <BreadcrumbItem>
            <BreadcrumbPage>Breadcrumb</BreadcrumbPage>
          </BreadcrumbItem>
        </BreadcrumbList>
      </Breadcrumb>
    </Example>
  )
}

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

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, UIPrimitives 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/base/examples/breadcrumb-example.tsx (domain: ComponentRegistry, subdomain: UIPrimitives, directory: apps/v4/registry/bases/base/examples).

Analyze Your Own Codebase

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

Try Supermodel Free