Breadcrumb

1import {
2  Breadcrumb,
3  BreadcrumbItem,
4  BreadcrumbLink,
5  BreadcrumbList,
6  BreadcrumbPage,
7  BreadcrumbSeparator
8} from "@/components/ui/breadcrumb";
9import { Home } from "lucide-react";
10 
11export default function BreadcrumbWithIcon() {
12  return (
13    <Breadcrumb>
14      <BreadcrumbList>
15        <BreadcrumbItem>
16          <BreadcrumbLink href="/">
17            <Home className="size-4" />
18          </BreadcrumbLink>
19        </BreadcrumbItem>
20        <BreadcrumbSeparator />
21        <BreadcrumbItem>
22          <BreadcrumbLink href="/">Components</BreadcrumbLink>
23        </BreadcrumbItem>
24        <BreadcrumbSeparator />
25        <BreadcrumbItem>
26          <BreadcrumbPage>Breadcrumb</BreadcrumbPage>
27        </BreadcrumbItem>
28      </BreadcrumbList>
29    </Breadcrumb>
30  );
31}