Components
Loading preview...
A Breadcrumb navigation from the Flexnative UI registry with 9 variants: basic links, leading home icon, custom slash separator, dot separator, ellipsis collapse, dropdown for hidden levels, responsive collapse, asChild custom link, and an end-of-trail page switcher. Built on Radix (Slot + dropdown-menu).
@reapollo
npx shadcn@latest add https://21st.dev/r/larsen66/flexnative-breadcrumb'use client'
import { FileTextIcon, FolderIcon, HouseIcon } from 'lucide-react'
import {
Breadcrumb,
BreadcrumbItem,
BreadcrumbLink,
BreadcrumbList,
BreadcrumbPage,
BreadcrumbSeparator,
} from '@/components/ui/flexnative-breadcrumb'
export function Breadcrumb02() {
return (
<Breadcrumb>
<BreadcrumbList>
<BreadcrumbItem>
<BreadcrumbLink href="#" className="flex items-center gap-1.5">
<HouseIcon className="size-3.5" />
Home
</BreadcrumbLink>
</BreadcrumbItem>
<BreadcrumbSeparator />
<BreadcrumbItem>
<BreadcrumbLink href="#" className="flex items-center gap-1.5">
<FolderIcon className="size-3.5" />
Documents
</BreadcrumbLink>
</BreadcrumbItem>
<BreadcrumbSeparator />
<BreadcrumbItem>
<BreadcrumbPage className="flex items-center gap-1.5">
<FileTextIcon className="size-3.5" />
Q4 Report
</BreadcrumbPage>
</BreadcrumbItem>
</BreadcrumbList>
</Breadcrumb>
)
}
export default function Default() {
return (
<div className="flex min-h-screen w-full items-center justify-center bg-background p-10">
<Breadcrumb02 />
</div>
)
}