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 { ChevronDownIcon } from 'lucide-react'
import {
Breadcrumb,
BreadcrumbItem,
BreadcrumbLink,
BreadcrumbList,
BreadcrumbSeparator,
} from '@/components/ui/flexnative-breadcrumb'
import { Button } from '@/components/ui/button'
import {
DropdownMenu,
DropdownMenuContent,
DropdownMenuItem,
DropdownMenuTrigger,
} from '@/components/ui/dropdown-menu'
export function Breadcrumb09() {
return (
<Breadcrumb>
<BreadcrumbList>
<BreadcrumbItem>
<BreadcrumbLink href="#">Docs</BreadcrumbLink>
</BreadcrumbItem>
<BreadcrumbSeparator />
<BreadcrumbItem>
<BreadcrumbLink href="#">Components</BreadcrumbLink>
</BreadcrumbItem>
<BreadcrumbSeparator />
<BreadcrumbItem>
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button variant="ghost" size="sm" className="-ml-1">
Breadcrumb
<ChevronDownIcon data-icon="inline-end" />
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent align="start">
<DropdownMenuItem>Breadcrumb</DropdownMenuItem>
<DropdownMenuItem>Button</DropdownMenuItem>
<DropdownMenuItem>Dropdown Menu</DropdownMenuItem>
<DropdownMenuItem>Tooltip</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
</BreadcrumbItem>
</BreadcrumbList>
</Breadcrumb>
)
}
export default function Default() {
return (
<div className="flex min-h-screen w-full items-center justify-center bg-background p-10">
<Breadcrumb09 />
</div>
)
}