Breadcrumb4

1import {
2  Breadcrumb,
3  BreadcrumbItem,
4  BreadcrumbLink,
5  BreadcrumbList,
6  BreadcrumbPage,
7  BreadcrumbSeparator,
8} from "@/ui/breadcrumb";
9import { Cart, ChevronRight, Home, Tag } from "@mynaui/icons-react";
10 
11export default function IconBreadcrumb() {
12  return (
13    <Breadcrumb>
14      <BreadcrumbList>
15        <BreadcrumbItem>
16          <BreadcrumbLink className="flex items-center gap-1">
17            <Home className="size-4 stroke-2" />
18            <span>Home</span>
19          </BreadcrumbLink>
20        </BreadcrumbItem>
21        <BreadcrumbSeparator>
22          <ChevronRight className="stroke-2" />
23        </BreadcrumbSeparator>
24        <BreadcrumbItem>
25          <BreadcrumbLink className="flex items-center gap-1">
26            <Cart className="size-4 stroke-2" />
27            <span>Products</span>
28          </BreadcrumbLink>
29        </BreadcrumbItem>
30        <BreadcrumbSeparator>
31          <ChevronRight className="stroke-2" />
32        </BreadcrumbSeparator>
33        <BreadcrumbItem>
34          <BreadcrumbPage className="flex items-center gap-1">
35            <Tag className="size-4 stroke-2" />
36            <span>Category</span>
37          </BreadcrumbPage>
38        </BreadcrumbItem>
39      </BreadcrumbList>
40    </Breadcrumb>
41  );
42}