06bbde6e-cce6-4d3e-93bc-e64d75f8751b/research/base44/breadcrumb.md

import * as React from "react" import { Slot } from "@radix-ui/react-slot" import { ChevronRight, MoreHorizontal } from "lucide-react"

import { cn } from "@/lib/utils"

const Breadcrumb = React.forwardRef( ({ ...props }, ref) => <nav ref={ref} aria-label="breadcrumb" {...props} /> ) Breadcrumb.displayName = "Breadcrumb"

const BreadcrumbList = React.forwardRef(({ className, ...props }, ref) => (

)) BreadcrumbList.displayName = "BreadcrumbList"

const BreadcrumbItem = React.forwardRef(({ className, ...props }, ref) => (

1. )) BreadcrumbItem.displayName = "BreadcrumbItem"

   const BreadcrumbLink = React.forwardRef(({ asChild, className, ...props }, ref) => { const Comp = asChild ? Slot : "a"

   return ( (<Comp ref={ref} className={cn("transition-colors hover:text-foreground", className)} {...props} />) ); }) BreadcrumbLink.displayName = "BreadcrumbLink"

   const BreadcrumbPage = React.forwardRef(({ className, ...props }, ref) => ( <span ref={ref} role="link" aria-disabled="true" aria-current="page" className={cn("font-normal text-foreground", className)} {...props} /> )) BreadcrumbPage.displayName = "BreadcrumbPage"

   const BreadcrumbSeparator = ({ children, className, ...props }) => (

2. svg]:w-3.5 [&>svg]:h-3.5", className)} {...props}> {children ?? }
) BreadcrumbSeparator.displayName = "BreadcrumbSeparator"

const BreadcrumbEllipsis = ({ className, ...props }) => ( <span role="presentation" aria-hidden="true" className={cn("flex h-9 w-9 items-center justify-center", className)} {...props}> More ) BreadcrumbEllipsis.displayName = "BreadcrumbElipssis"

export { Breadcrumb, BreadcrumbList, BreadcrumbItem, BreadcrumbLink, BreadcrumbPage, BreadcrumbSeparator, BreadcrumbEllipsis, }