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 {
Breadcrumb,
BreadcrumbItem,
BreadcrumbLink,
BreadcrumbList,
BreadcrumbPage,
BreadcrumbSeparator,
} from '@/components/ui/flexnative-breadcrumb'
// A plain dot makes a lighter divider than the default chevron.
export function Breadcrumb04() {
return (
<Breadcrumb>
<BreadcrumbList>
<BreadcrumbItem>
<BreadcrumbLink href="#">Docs</BreadcrumbLink>
</BreadcrumbItem>
<BreadcrumbSeparator className="[&>svg]:hidden">
<span aria-hidden>·</span>
</BreadcrumbSeparator>
<BreadcrumbItem>
<BreadcrumbLink href="#">Components</BreadcrumbLink>
</BreadcrumbItem>
<BreadcrumbSeparator className="[&>svg]:hidden">
<span aria-hidden>·</span>
</BreadcrumbSeparator>
<BreadcrumbItem>
<BreadcrumbPage>Breadcrumb</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">
<Breadcrumb04 />
</div>
)
}