From 8f7eb973c4300dcc87bf5d1a9a29676be4f84d54 Mon Sep 17 00:00:00 2001
From: Philippe Bernard <philippe.bernard@gmail.com>
Date: Sat, 25 Jan 2025 10:45:28 +0100
Subject: [PATCH] Add 'as' prop to BreadcrumbItem

---
 packages/ui/src/components/Breadcrumb/BreadcrumbItem.tsx | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/packages/ui/src/components/Breadcrumb/BreadcrumbItem.tsx b/packages/ui/src/components/Breadcrumb/BreadcrumbItem.tsx
index 45c3b63b8..c5ff29c9c 100644
--- a/packages/ui/src/components/Breadcrumb/BreadcrumbItem.tsx
+++ b/packages/ui/src/components/Breadcrumb/BreadcrumbItem.tsx
@@ -1,4 +1,4 @@
-import type { ComponentProps, FC } from "react";
+import type { ComponentProps, ElementType, FC } from "react";
 import { forwardRef } from "react";
 import { HiOutlineChevronRight } from "react-icons/hi";
 import { twMerge } from "tailwind-merge";
@@ -15,15 +15,16 @@ export interface FlowbiteBreadcrumbItemTheme {
 }
 
 export interface BreadcrumbItemProps extends Omit<ComponentProps<"li">, "ref"> {
+  as?: ElementType;
   href?: string;
   icon?: FC<ComponentProps<"svg">>;
   theme?: DeepPartial<FlowbiteBreadcrumbItemTheme>;
 }
 
 export const BreadcrumbItem = forwardRef<HTMLAnchorElement | HTMLSpanElement, BreadcrumbItemProps>(
-  ({ children, className, href, icon: Icon, theme: customTheme = {}, ...props }, ref) => {
+  ({ as = "a", children, className, href, icon: Icon, theme: customTheme = {}, ...props }, ref) => {
     const isLink = typeof href !== "undefined";
-    const Component = isLink ? "a" : "span";
+    const Component = isLink ? as : "span";
 
     const theme = mergeDeep(getTheme().breadcrumb.item, customTheme);