Components
Loading preview...
Enchanced shadcn/ui breadcrumb
npx shadcn@latest add https://21st.dev/r/originui/breadcrumbimport {
Breadcrumb,
BreadcrumbItem,
BreadcrumbLink,
BreadcrumbList,
BreadcrumbPage,
BreadcrumbSeparator,
} from "@/components/ui/breadcrumb";
import {
DropdownMenu,
DropdownMenuContent,
DropdownMenuItem,
DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
import { Folders } from "lucide-react";
function Component() {
return (
<Breadcrumb>
<BreadcrumbList>
<BreadcrumbItem>
<BreadcrumbLink href="#">Home</BreadcrumbLink>
</BreadcrumbItem>
<BreadcrumbSeparator />
<BreadcrumbItem>
<DropdownMenu>
<DropdownMenuTrigger className="hover:text-foreground">
<span
role="presentation"
aria-hidden="true"
className="flex size-5 items-center justify-center"
>
<Folders size={16} strokeWidth={2} />
</span>
<span className="sr-only">Toggle menu</span>
</DropdownMenuTrigger>
<DropdownMenuContent align="start">
<DropdownMenuItem asChild>
<a href="#">Documentation</a>
</DropdownMenuItem>
<DropdownMenuItem asChild>
<a href="#">Themes</a>
</DropdownMenuItem>
<DropdownMenuItem asChild>
<a href="#">GitHub</a>
</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
</BreadcrumbItem>
<BreadcrumbSeparator />
<BreadcrumbItem>
<BreadcrumbPage>Breadcrumb</BreadcrumbPage>
</BreadcrumbItem>
</BreadcrumbList>
</Breadcrumb>
);
}
export { Component };