About
Enchanced shadcn/ui breadcrumb
Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Breadcrumb to your project and fits it to your theme.
Code
How Breadcrumb is used: the demo's code. The component's own source comes with a free account.
Usage.tsx
import {
Breadcrumb,
BreadcrumbItem,
BreadcrumbLink,
BreadcrumbList,
BreadcrumbSeparator,
} from "@/components/ui/breadcrumb";
import {
Select,
SelectContent,
SelectItem,
SelectTrigger,
SelectValue,
} from "@/components/ui/select";
import { Database } from "lucide-react";
function Component() {
return (
<Breadcrumb>
<BreadcrumbList>
<BreadcrumbItem>
<BreadcrumbLink href="#">Databases</BreadcrumbLink>
</BreadcrumbItem>
<BreadcrumbSeparator />
<BreadcrumbItem>
<Select defaultValue="1">
<SelectTrigger
id="select-database"
className="relative ps-9"
aria-label="Select database"
>
<div className="pointer-events-none absolute inset-y-0 start-0 flex items-center justify-center ps-3 text-muted-foreground/80 group-has-[[disabled]]:opacity-50">
<Database size={16} strokeWidth={2} aria-hidden="true" />
</div>
<SelectValue placeholder="Select time" />
</SelectTrigger>
<SelectContent>
<SelectItem value="1">Orion</SelectItem>
<SelectItem value="2">Sigma</SelectItem>
<SelectItem value="3">Dorado</SelectItem>
</SelectContent>
</Select>
</BreadcrumbItem>
</BreadcrumbList>
</Breadcrumb>
);
}
export { Component };