BreadcrumbsInternal() — supabase Function Reference

Architecture documentation for the BreadcrumbsInternal() function in Breadcrumbs.tsx from the supabase codebase.

Function tsx DocumentationSystem ReferenceGen calls 1

Entity Profile

DocumentationSystem→ ReferenceGen→ BreadcrumbsInternal() — supabase Function Reference

Dependency Diagram

graph TD
  b07d014e_c2b2_1696_d0a1_67733fe3e7e1["BreadcrumbsInternal()"]
  5f4db0c7_143a_6760_4b0f_51f5fff05cce["useBreadcrumbs()"]
  b07d014e_c2b2_1696_d0a1_67733fe3e7e1 -->|calls| 5f4db0c7_143a_6760_4b0f_51f5fff05cce
  style b07d014e_c2b2_1696_d0a1_67733fe3e7e1 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

apps/docs/components/Breadcrumbs.tsx lines 45–158

const BreadcrumbsInternal = ({
  className,
  minLength = 2,
  forceDisplayOnMobile = false,
}: BreadcrumbsProps) => {
  const breadcrumbs = useBreadcrumbs()
  const [open, setOpen] = React.useState(false)
  const isMobile = useBreakpoint('md')

  const ITEMS_TO_DISPLAY = isMobile ? 4 : 3

  if (!breadcrumbs?.length || breadcrumbs?.length < minLength) return null

  const appendedBreadcrumbs = breadcrumbs?.slice(
    -ITEMS_TO_DISPLAY + 1,
    isMobile && !forceDisplayOnMobile ? -1 : undefined
  )

  return (
    <Breadcrumb className={cn(className)}>
      <BreadcrumbList className="text-foreground-lighter p-0">
        {breadcrumbs.length >= ITEMS_TO_DISPLAY && (
          <>
            <BreadcrumbItem>
              {breadcrumbs[0].url ? (
                <BreadcrumbLink asChild>
                  <Link href={breadcrumbs[0].url}>
                    {breadcrumbs[0].title || breadcrumbs[0].name}
                  </Link>
                </BreadcrumbLink>
              ) : (
                <BreadcrumbPage>{breadcrumbs[0].title || breadcrumbs[0].name}</BreadcrumbPage>
              )}
            </BreadcrumbItem>
            <BreadcrumbSeparator />
          </>
        )}
        {breadcrumbs.length > ITEMS_TO_DISPLAY && (
          <>
            <BreadcrumbItem>
              {!isMobile ? (
                <DropdownMenu open={open} onOpenChange={setOpen}>
                  <DropdownMenuTrigger className="flex items-center gap-1" aria-label="Toggle menu">
                    <BreadcrumbEllipsis className="h-4 w-4" />
                  </DropdownMenuTrigger>
                  <DropdownMenuContent align="start">
                    {breadcrumbs.slice(1, -2).map((crumb, index) => (
                      <DropdownMenuItem
                        key={index}
                        className={cn(!crumb.url && 'pointer-events-none')}
                      >
                        {crumb.url ? (
                          <Link href={crumb.url}>{crumb.title || crumb.name}</Link>
                        ) : (
                          crumb.title || crumb.name
                        )}
                      </DropdownMenuItem>
                    ))}
                  </DropdownMenuContent>
                </DropdownMenu>
              ) : (
                <Drawer open={open} onOpenChange={setOpen}>
                  <DrawerTrigger aria-label="Toggle Menu">
                    <BreadcrumbEllipsis className="h-4 w-4" />
                  </DrawerTrigger>
                  <DrawerContent>
                    <div className="grid gap-1 px-4">
                      {breadcrumbs.slice(1, -2).map((crumb, index) =>
                        crumb.url ? (
                          <Link key={index} href={crumb.url}>
                            {crumb.title || crumb.name}
                          </Link>
                        ) : (
                          crumb.title || crumb.name
                        )
                      )}
                    </div>
                    <DrawerFooter className="pt-4">
                      <DrawerClose asChild>
                        <Button type="outline">Close</Button>
                      </DrawerClose>
                    </DrawerFooter>
                  </DrawerContent>
                </Drawer>
              )}
            </BreadcrumbItem>
            <BreadcrumbSeparator />
          </>
        )}
        {appendedBreadcrumbs?.map((crumb, index) => (
          <Fragment key={index}>
            <BreadcrumbItem
              className={cn(
                'flex items-center overflow-hidden',
                index === appendedBreadcrumbs.length - 1 && 'md:text-foreground-light'
              )}
            >
              {crumb.url ? (
                <BreadcrumbLink asChild>
                  <Link href={crumb.url}>{crumb.title || crumb.name}</Link>
                </BreadcrumbLink>
              ) : (
                <BreadcrumbPage>{crumb.title || crumb.name}</BreadcrumbPage>
              )}
            </BreadcrumbItem>
            <BreadcrumbSeparator
              className={cn(index === appendedBreadcrumbs.length - 1 && 'md:hidden')}
            />
          </Fragment>
        ))}
      </BreadcrumbList>
    </Breadcrumb>
  )
}