Breadcrumb component to allow a react-router <Link> instead of a bare <a>

[rnicholus]

• I have searched the Issues to see if this bug has already been reported
• I have tested the latest version

Summary

Currently, <BreadcrumbItem> can be rendered as an anchor link or a span. But given that this is a React library, and the overwhelming majority of React apps use react-router, <BreadcrumbItem> should at least be able to render a <Link>.

This can probably be accomplished by refactoring <BreadcrumbItem> to accept as={Link}.

[j-vitali]

i'm using next, also want this feature...

[akashMasih]

I am working on this feature

[JuniYadi]

this changes based on button, but how to test it?

import type { ComponentPropsWithoutRef, ElementType, ForwardedRef, FC } from "react";
import { createElement, forwardRef } from "react";
import { HiOutlineChevronRight } from "react-icons/hi";
import { twMerge } from "tailwind-merge";
import { mergeDeep } from "../../helpers/merge-deep";
import { getTheme } from "../../theme-store";
import type { DeepPartial } from "../../types";
import type { FlowbiteBoolean } from "../Flowbite";

export interface FlowbiteBreadcrumbItemTheme {
  base: string;
  chevron: string;
  href: FlowbiteBoolean;
  icon: string;
}

export type BreadcrumbItemProps<T extends ElementType = "span"> = {
  as?: T;
  href?: string;
  icon?: FC<ComponentPropsWithoutRef<"svg">>;
  theme?: DeepPartial<FlowbiteBreadcrumbItemTheme>;
} & ComponentPropsWithoutRef<T>;

export const BreadcrumbItem = forwardRef(
  <T extends ElementType = "span">(
    { children, className, as: Component, href, icon: Icon, theme: customTheme = {}, ...props }: BreadcrumbItemProps<T>,
    ref: ForwardedRef<T>,
  ) => {
    const BaseComponent = Component || (href ? "a" : "span");

    const theme = mergeDeep(getTheme().breadcrumb.item, customTheme);

    return (
      <li className={twMerge(theme.base, className)} {...props}>
        <HiOutlineChevronRight aria-hidden className={theme.chevron} data-testid="flowbite-breadcrumb-separator" />
        {createElement(
          BaseComponent,
          {
            ref,
            href,
            className: theme.href[href ? "on" : "off"],
            "data-testid": "flowbite-breadcrumb-item",
            ...props,
          },
          <>
            {Icon && <Icon aria-hidden className={theme.icon} />}
            {children}
          </>,
        )}
      </li>
    );
  },
);

BreadcrumbItem.displayName = "Breadcrumb.Item";