import * as React from "react" import { Slot } from "@radix-ui/react-slot" import { ChevronRight, ChevronsRight, MoreHorizontal } from "lucide-react" import { cn } from "@/lib/utils" import { Badge } from "@/components/ui/badge" interface BreadcrumbProps extends React.ComponentPropsWithoutRef<"nav"> { /** @default "default" */ // prettier-ignore variant?: "default" | "contained" | "badge-active" | "badge-outline" | "badge-fill" /** @default "default" */ separatorVariant?: "default" | "slash" | "dot" | "chevrons" | "step" } interface BreadcrumbContextValue { separatorVariant: BreadcrumbProps["separatorVariant"] contained: boolean badgeActive: boolean badgeFill: boolean badgeOutline: boolean } const BreadcrumbContext = React.createContext({ separatorVariant: "default", contained: false, badgeActive: false, badgeFill: false, badgeOutline: false }) const Breadcrumb = React.forwardRef( ( { separatorVariant = "default", variant = "default", className, ...props }, ref ) => { const contained = variant === "contained" const badgeActive = variant === "badge-active" const badgeFill = variant === "badge-fill" const badgeOutline = variant === "badge-outline" const contextValue: BreadcrumbContextValue = { separatorVariant, contained, badgeActive, badgeFill, badgeOutline } return (

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

)) BreadcrumbItem.displayName = "BreadcrumbItem" const BreadcrumbLink = React.forwardRef< HTMLAnchorElement, React.ComponentPropsWithoutRef<"a"> & { asChild?: boolean } >(({ asChild, className, children, ...props }, ref) => { const { badgeFill, badgeOutline } = React.useContext(BreadcrumbContext) const Comp = asChild ? Slot : "a" return ( {badgeFill ? ( {children} ) : badgeOutline ? ( {children} ) : ( children )} ) }) BreadcrumbLink.displayName = "BreadcrumbLink" const BreadcrumbPage = React.forwardRef< HTMLSpanElement, React.ComponentPropsWithoutRef<"span"> >(({ className, children, ...props }, ref) => { const { badgeActive, badgeOutline, badgeFill } = React.useContext(BreadcrumbContext) const content = badgeActive || badgeOutline || badgeFill ? ( {children} ) : ( children ) return ( {content} ) }) BreadcrumbPage.displayName = "BreadcrumbPage" const BreadcrumbSeparator = ({ children, className, ...props }: React.ComponentProps<"li">) => { const { separatorVariant } = React.useContext(BreadcrumbContext) let separatorContent: React.ReactNode if (children) { separatorContent = children } else { switch (separatorVariant) { case "slash": separatorContent = " / " break case "dot": separatorContent = " • " break case "chevrons": separatorContent = break case "step": separatorContent = ( ) break default: separatorContent = break } } return (
svg]:h-3.5 [&>svg]:w-3.5", separatorVariant === "step" ? "[&>svg]:w-5.5 [&>svg]:h-full" : "", className )} {...props} > {separatorContent}

Prop	Type	Default
variant	`enum`	`"default"`
separatorVariant	`enum`	`"default"`

Breadcrumb

Playground

Customize

Installation

Breadcrumb Props