Components
Loading preview...
Display the current page location within a navigational hierarchy.
npx shadcn@latest add https://21st.dev/r/hero_ui/heroui-breadcrumbsimport { Breadcrumbs } from "@/components/ui/heroui-breadcrumbs";
function CustomSeparator() {
return (
<svg
className="h-3.5 w-3.5 text-zinc-400 dark:text-zinc-500"
viewBox="0 0 256 512"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M249.3 235.8c10.2 12.6 9.5 31.1-2.2 42.8l-128 128c-9.2 9.2-22.9 11.9-34.9 6.9S64.5 396.9 64.5 384l0-256c0-12.9 7.8-24.6 19.8-29.6s25.7-2.2 34.9 6.9l128 128 2.2 2.4z"
fill="currentColor"
/>
</svg>
);
}
export default function BreadcrumbsCustomSeparatorDemo() {
return (
<div className="flex min-h-screen w-full items-center justify-center overflow-hidden bg-background p-8">
<Breadcrumbs separator={<CustomSeparator />}>
<Breadcrumbs.Item href="#">Home</Breadcrumbs.Item>
<Breadcrumbs.Item href="#">Products</Breadcrumbs.Item>
<Breadcrumbs.Item href="#">Electronics</Breadcrumbs.Item>
<Breadcrumbs.Item href="#">Laptop</Breadcrumbs.Item>
</Breadcrumbs>
</div>
);
}
export { BreadcrumbsCustomSeparatorDemo };