import { Slot } from "@radix-ui/react-slot"; import * as React from "react"; import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger, } from "@/components/registry/primitives/core/dropdown-menu"; import { ThemeIcon } from "@/components/registry/primitives/core/theme-icon"; import { Link } from "@/components/registry/primitives/editables/link"; import { cn } from "@/lib/registry/cn"; import type { HTMLLink, LinkField, LinkFieldValue, } from "@/lib/registry/sitecore"; const Breadcrumb = React.forwardRef< React.ElementRef<"nav">, React.ComponentPropsWithoutRef<"nav"> >(({ className, ...props }, ref) => (

)); Breadcrumb.displayName = "Breadcrumb"; const BreadcrumbList = React.forwardRef< React.ElementRef<"ol">, React.ComponentPropsWithoutRef<"ol"> >(({ className, ...props }, ref) => (

)); BreadcrumbItem.displayName = "BreadcrumbItem"; const BreadcrumbLink = React.forwardRef< React.ElementRef<"a">, React.ComponentPropsWithoutRef<"a"> & { asChild?: boolean; field?: LinkField | LinkFieldValue | HTMLLink; } >(({ asChild, className, field, children, ...props }, ref) => { if (field) { return ( {children} ); } const Comp = asChild ? Slot : "a"; return ( {children} ); }); BreadcrumbLink.displayName = "BreadcrumbLink"; const BreadcrumbPage = React.forwardRef< React.ElementRef<"span">, React.ComponentPropsWithoutRef<"span"> >(({ className, ...props }, ref) => ( )); BreadcrumbPage.displayName = "BreadcrumbPage"; function BreadcrumbSeparator({ children, className, ...props }: React.ComponentProps<"li">) { return (
svg]:size-3.5", className)} {...props} > {children ?? ( )}

{home && ( <> {link( home, <> {home.label} , )} )} {hasIntermediate && ( <> {dropdownAncestors.map((ancestor) => ( {link(ancestor, ancestor.label)} ))} )} {intermediate.map((ancestor) => ( {link(ancestor, ancestor.label)} ))} {hasLastAncestor && lastAncestor && ( <> {link(lastAncestor, lastAncestor.label)} )} {currentPage && ( {currentPage} )}

Breadcrumb

Showcase

Breadcrumb