"use client" import * as React from "react" import { cn } from "@/lib/utils" import { Breadcrumb, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, type BreadcrumbProps } from "@/components/ui/breadcrumb" interface DynamicBreadcrumbProps { /** Whether to show the home link at the start of the breadcrumb * @default false */ displayHome?: boolean /** Whether to make the links active or not * @default false */ activeLinks?: boolean /** Additional CSS classes to apply to the breadcrumb container */ className?: string } function DynamicBreadcrumb({ displayHome = false, activeLinks = false, className, ...props }: DynamicBreadcrumbProps & BreadcrumbProps) { const [pathSegments, setPathSegments] = React.useState([]) React.useEffect(() => { if (typeof window === "undefined") return const pathname = window.location.pathname const segments = pathname.split("/").filter((segment) => segment) setPathSegments(segments) }, []) return ( {displayHome && ( <> {activeLinks ? Home : Home} {pathSegments.length > 0 && } )} {pathSegments.map((segment, index) => { const href = "/" + pathSegments.slice(0, index + 1).join("/") const isLast = index === pathSegments.length - 1 const displayName = segment .replace(/-/g, " ") .replace(/\b\w/g, (c) => c.toUpperCase()) return ( {isLast ? ( {displayName} ) : ( <> {activeLinks ? ( {displayName} ) : ( {displayName} )} )} {!isLast && } ) })} ) } export { DynamicBreadcrumb } export type { DynamicBreadcrumbProps }

Prop	Type	Default
displayHome	`boolean`	`false`
activeLinks	`boolean`	`false`
className	`string`	—

Dynamic Breadcrumb

Playground

Customize

Installation

DynamicBreadcrumb Props