Back to components

Playground

Breadcrumb Component

Basic Breadcrumb

Breadcrumb with Custom Separator

Breadcrumb with Current Page Only

Usage Examples

Basic Breadcrumb

import { Breadcrumb } from "@/components/breadcrumb";

const items = [
  { label: "Home", href: "/" },
  { label: "Products", href: "/products" },
  { label: "Category", current: true }
];

<Breadcrumb items={items} />

Breadcrumb with Custom Separator

<Breadcrumb
  items={items}
  separator={<span className="text-foreground/40">›</span>}
/>

Breadcrumb with Icons

import { Home, Settings } from "lucide-react";

const items = [
  { label: "Home", href: "/", icon: <Home className="h-3 w-3" /> },
  { label: "Settings", href: "/settings", icon: <Settings className="h-3 w-3" /> },
  { label: "Profile", current: true }
];

<Breadcrumb items={items} />