Breadcrumb with Background

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