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

breadcrumb-responsive.tsx — ui Source File

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

File tsx ComponentRegistry ChartRegistry 7 imports 1 functions

Entity Profile

Dependency Diagram

graph LR
  c31e3f75_d34a_36af_fc66_e1498115d32d["breadcrumb-responsive.tsx"]
  1d141819_425e_b5fd_4c8e_32f7c6a42cf2["react"]
  c31e3f75_d34a_36af_fc66_e1498115d32d --> 1d141819_425e_b5fd_4c8e_32f7c6a42cf2
  ba3d44f3_7b34_f9cc_6283_44817785c0df["link"]
  c31e3f75_d34a_36af_fc66_e1498115d32d --> ba3d44f3_7b34_f9cc_6283_44817785c0df
  5b9fe790_07fa_d673_2d62_394a21141145["use-media-query"]
  c31e3f75_d34a_36af_fc66_e1498115d32d --> 5b9fe790_07fa_d673_2d62_394a21141145
  07986cfc_fcd6_a023_4225_355f24adb9e8["breadcrumb"]
  c31e3f75_d34a_36af_fc66_e1498115d32d --> 07986cfc_fcd6_a023_4225_355f24adb9e8
  d418ad18_b947_f4e5_6e4c_01100d7a63e4["button"]
  c31e3f75_d34a_36af_fc66_e1498115d32d --> d418ad18_b947_f4e5_6e4c_01100d7a63e4
  e03b2544_1b68_470f_14f0_dfbd84c9df9b["drawer"]
  c31e3f75_d34a_36af_fc66_e1498115d32d --> e03b2544_1b68_470f_14f0_dfbd84c9df9b
  f16f43cb_04fd_5f33_2140_7eafce119350["dropdown-menu"]
  c31e3f75_d34a_36af_fc66_e1498115d32d --> f16f43cb_04fd_5f33_2140_7eafce119350
  style c31e3f75_d34a_36af_fc66_e1498115d32d fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

"use client"

import * as React from "react"
import Link from "next/link"

import { useMediaQuery } from "@/hooks/use-media-query"
import {
  Breadcrumb,
  BreadcrumbEllipsis,
  BreadcrumbItem,
  BreadcrumbLink,
  BreadcrumbList,
  BreadcrumbPage,
  BreadcrumbSeparator,
} from "@/registry/default/ui/breadcrumb"
import { Button } from "@/registry/default/ui/button"
import {
  Drawer,
  DrawerClose,
  DrawerContent,
  DrawerDescription,
  DrawerFooter,
  DrawerHeader,
  DrawerTitle,
  DrawerTrigger,
} from "@/registry/default/ui/drawer"
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuTrigger,
} from "@/registry/default/ui/dropdown-menu"

const items = [
  { href: "#", label: "Home" },
  { href: "#", label: "Documentation" },
  { href: "#", label: "Building Your Application" },
  { href: "#", label: "Data Fetching" },
  { label: "Caching and Revalidating" },
]

const ITEMS_TO_DISPLAY = 3

export default function BreadcrumbResponsive() {
  const [open, setOpen] = React.useState(false)
  const isDesktop = useMediaQuery("(min-width: 768px)")

  return (
    <Breadcrumb>
      <BreadcrumbList>
        <BreadcrumbItem>
          <BreadcrumbLink href={items[0].href}>{items[0].label}</BreadcrumbLink>
        </BreadcrumbItem>
        <BreadcrumbSeparator />
        {items.length > ITEMS_TO_DISPLAY ? (
          <>
            <BreadcrumbItem>
              {isDesktop ? (
                <DropdownMenu open={open} onOpenChange={setOpen}>
                  <DropdownMenuTrigger
// ... (74 more lines)

Domain

Subdomains

Functions

Dependencies

  • breadcrumb
  • button
  • drawer
  • dropdown-menu
  • link
  • react
  • use-media-query

Source

Frequently Asked Questions

What does breadcrumb-responsive.tsx do?
breadcrumb-responsive.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-responsive.tsx?
breadcrumb-responsive.tsx defines 1 function(s): BreadcrumbResponsive.
What does breadcrumb-responsive.tsx depend on?
breadcrumb-responsive.tsx imports 7 module(s): breadcrumb, button, drawer, dropdown-menu, link, react, use-media-query.
Where is breadcrumb-responsive.tsx in the architecture?
breadcrumb-responsive.tsx is located at deprecated/www/registry/default/examples/breadcrumb-responsive.tsx (domain: ComponentRegistry, subdomain: ChartRegistry, directory: deprecated/www/registry/default/examples).

Analyze Your Own Codebase

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

Try Supermodel Free