Components
Loading preview...
Here is Breadcrumb component
@base-ui
npx shadcn@latest add https://21st.dev/r/base-ui/breadcrumb-1import { Badge } from "@/components/ui/badge";
import {
Breadcrumb,
BreadcrumbItem,
BreadcrumbLink,
BreadcrumbList,
BreadcrumbPage,
BreadcrumbSeparator,
} from "@/components/ui/breadcrumb";
import { ChevronsRightIcon } from "lucide-react";
export default function BreadcrumbWithBackground() {
return (
<Breadcrumb className="bg-secondary py-1.5 px-4 rounded-lg">
<BreadcrumbList>
<BreadcrumbItem>
<BreadcrumbLink href="#">Home</BreadcrumbLink>
</BreadcrumbItem>
<BreadcrumbSeparator>
<ChevronsRightIcon />
</BreadcrumbSeparator>
<BreadcrumbItem>
<BreadcrumbLink href="#components">Components</BreadcrumbLink>
</BreadcrumbItem>
<BreadcrumbSeparator>
<ChevronsRightIcon />
</BreadcrumbSeparator>
<BreadcrumbItem>
<BreadcrumbPage>Breadcrumb</BreadcrumbPage>
</BreadcrumbItem>
</BreadcrumbList>
</Breadcrumb>
);
}