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 { Button } from '@/components/ui/button'
import {
Breadcrumb,
BreadcrumbEllipsis,
BreadcrumbItem,
BreadcrumbLink,
BreadcrumbList,
BreadcrumbPage,
BreadcrumbSeparator,
} from '@/components/ui/flexnative-breadcrumb'
import {
DropdownMenu,
DropdownMenuContent,
DropdownMenuItem,
DropdownMenuTrigger,
} from '@/components/ui/dropdown-menu'
export function Breadcrumb07() {
return (
<Breadcrumb>
<BreadcrumbList>
<BreadcrumbItem>
<BreadcrumbLink href="#">Home</BreadcrumbLink>
</BreadcrumbItem>
<BreadcrumbSeparator />
<BreadcrumbItem className="sm:hidden">
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button variant="ghost" size="icon-xs" aria-label="Toggle menu">
<BreadcrumbEllipsis />
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent align="start">
<DropdownMenuItem>Workspace</DropdownMenuItem>
<DropdownMenuItem>Projects</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
</BreadcrumbItem>
<BreadcrumbSeparator className="sm:hidden" />
<BreadcrumbItem className="hidden sm:inline-flex">
<BreadcrumbLink href="#">Workspace</BreadcrumbLink>
</BreadcrumbItem>
<BreadcrumbSeparator className="hidden sm:inline-flex" />
<BreadcrumbItem className="hidden sm:inline-flex">
<BreadcrumbLink href="#">Projects</BreadcrumbLink>
</BreadcrumbItem>
<BreadcrumbSeparator className="hidden sm:inline-flex" />
<BreadcrumbItem>
<BreadcrumbPage>Acme Website</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">
<Breadcrumb07 />
</div>
)
}