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 { ArrowUpRightIcon } from 'lucide-react'
import {
Breadcrumb,
BreadcrumbItem,
BreadcrumbLink,
BreadcrumbList,
BreadcrumbPage,
BreadcrumbSeparator,
} from '@/components/ui/flexnative-breadcrumb'
export function Breadcrumb08() {
return (
<Breadcrumb>
<BreadcrumbList>
<BreadcrumbItem>
<BreadcrumbLink asChild>
<a href="#" target="_blank" rel="noopener noreferrer">
Docs
</a>
</BreadcrumbLink>
</BreadcrumbItem>
<BreadcrumbSeparator />
<BreadcrumbItem>
<BreadcrumbLink asChild>
<a
href="#"
target="_blank"
rel="noopener noreferrer"
className="flex items-center gap-1"
>
Changelog
<ArrowUpRightIcon className="size-3.5" />
</a>
</BreadcrumbLink>
</BreadcrumbItem>
<BreadcrumbSeparator />
<BreadcrumbItem>
<BreadcrumbPage>v2.0</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">
<Breadcrumb08 />
</div>
)
}