Breadcrumb with Tab Active

1import { ChevronsRight } from "lucide-react";
2import { Badge } from "@/registry/ui/badge";
3import {
4  Breadcrumb,
5  BreadcrumbItem,
6  BreadcrumbLink,
7  BreadcrumbList,
8  BreadcrumbPage,
9  BreadcrumbSeparator,
10} from "@/registry/ui/breadcrumb";
11 
12const BreadcrumbTabActiveDemo = () => {
13  return (
14    <Breadcrumb>
15      <BreadcrumbList>
16        <BreadcrumbItem>
17          <BreadcrumbLink href="#">Home</BreadcrumbLink>
18        </BreadcrumbItem>
19        <BreadcrumbSeparator>
20          <ChevronsRight />
21        </BreadcrumbSeparator>
22        <BreadcrumbItem>
23          <BreadcrumbLink href="#/components">Components</BreadcrumbLink>
24        </BreadcrumbItem>
25        <BreadcrumbSeparator>
26          <ChevronsRight />
27        </BreadcrumbSeparator>
28        <BreadcrumbItem>
29          <BreadcrumbPage>
30            <Badge className="rounded-full shadow-none">Breadcrumb</Badge>
31          </BreadcrumbPage>
32        </BreadcrumbItem>
33      </BreadcrumbList>
34    </Breadcrumb>
35  );
36};
37 
38export default BreadcrumbTabActiveDemo;