Breadcrumb with Icon and Label (Alternate)

1import { ChevronsRight, Component, Home, Route } from "lucide-react";
2import {
3  Breadcrumb,
4  BreadcrumbItem,
5  BreadcrumbLink,
6  BreadcrumbList,
7  BreadcrumbPage,
8  BreadcrumbSeparator,
9} from "@/registry/ui/breadcrumb";
10 
11const BreadcrumbsSteps = () => {
12  return (
13    <Breadcrumb>
14      <BreadcrumbList className="gap-5!">
15        <BreadcrumbItem>
16          <BreadcrumbLink href="#">
17            <div className="flex flex-col items-center gap-1">
18              <Home className="h-4 w-4" />
19              Home
20            </div>
21          </BreadcrumbLink>
22        </BreadcrumbItem>
23        <BreadcrumbSeparator>
24          <ChevronsRight />
25        </BreadcrumbSeparator>
26        <BreadcrumbItem>
27          <BreadcrumbLink href="#/components">
28            <div className="flex flex-col items-center gap-1">
29              <Component className="h-4 w-4" />
30              Components
31            </div>
32          </BreadcrumbLink>
33        </BreadcrumbItem>
34        <BreadcrumbSeparator>
35          <ChevronsRight />
36        </BreadcrumbSeparator>
37        <BreadcrumbItem>
38          <BreadcrumbPage>
39            <div className="flex flex-col items-center gap-1">
40              <Route className="h-4 w-4" />
41              Breadcrumb
42            </div>
43          </BreadcrumbPage>
44        </BreadcrumbItem>
45      </BreadcrumbList>
46    </Breadcrumb>
47  );
48};
49 
50export default BreadcrumbsSteps;