[BUG] - Custom Breadcrumbs Slot-Based Styling Not Working

[kalash-rentickle]

HeroUI Version

2.8.0-beta.5

---

Describe the bug

When using custom wrapper components around Breadcrumbs and BreadcrumbItem with slot-based class overrides (SlotsToClasses), the components do not render anything on screen. However, if I use the Breadcrumbs and BreadcrumbItem components directly from @heroui/react, they render correctly.

---

Actual behavior

The wrapped components render no visible output at all, and no errors or warnings appear in the console. The same props passed directly to HeroBreadcrumbs and HeroBreadcrumbItem produce the expected breadcrumb UI.

---

Steps to reproduce

1. Create custom wrapper components for Breadcrumbs and BreadcrumbItem that use SlotsToClasses to merge class names.
2. Use these wrapper components in a React app.
3. Observe that nothing renders.
4. Replace wrapper usage by direct import of Breadcrumbs and BreadcrumbItem from @heroui/react with the same props.
5. The breadcrumbs render correctly.

---

Expected behavior

Wrapped components using SlotsToClasses should render and apply styling correctly, identical to the direct usage of @heroui/react components.

---

Operating System

macOS, Linux

---

Browser

Chrome (latest)

[linear[bot]]

ENG-2578 Custom Breadcrumbs Slot-Based Styling Not Working

[kalash-rentickle]

Hello @markwilson , @awhitford, @DannyNemer , @jrr

I created Breadcrumbs and BreadcrumbItem components by wrapping Hero UI’s breadcrumb components to customize default styles and provide consistent usage across the app. I forward all props and refs to Hero UI components for compatibility. I merge and pass custom class names for internal slots (like base, item, separator) using clsx. I set default props (e.g., variant, color, size) in Breadcrumbs to standardize appearance. Usage is simple: wrap BreadcrumbItems inside Breadcrumbs with a separator.

BreadCrumbItem

` import { BreadcrumbItem as HeroBreadcrumbItem, type BreadcrumbItemProps as HeroBreadcrumbItemProps, type BreadcrumbItemSlots, SlotsToClasses, } from '@heroui/react'; import clsx from 'clsx'; import React from 'react';

export type BreadcrumbItemProps = HeroBreadcrumbItemProps;

const BreadcrumbItem: React.FC<BreadcrumbItemProps> = React.forwardRef( ({ classNames, children, ...props }, ref) => { const mergedClassNames: SlotsToClasses<BreadcrumbItemSlots> = { base: clsx(classNames?.base), item: clsx(classNames?.item), separator: clsx(classNames?.separator), };

return (
  <HeroBreadcrumbItem {...props} ref={ref} classNames={mergedClassNames}>
    {children}
  </HeroBreadcrumbItem>
);

} );

BreadcrumbItem.displayName = 'BreadcrumbItem'; export default BreadcrumbItem;

`

BreadCrumb

` import { Breadcrumbs as HeroBreadcrumbs, type BreadcrumbsProps as HeroBreadcrumbsProps, type BreadcrumbsSlots, SlotsToClasses, } from '@heroui/react'; import clsx from 'clsx'; import React from 'react';

export type BreadcrumbsProps = HeroBreadcrumbsProps;

const Breadcrumbs: React.FC<BreadcrumbsProps> = React.forwardRef( ({ classNames, children, ...props }, ref) => { const mergedClassNames: SlotsToClasses<BreadcrumbsSlots> = { base: clsx(classNames?.base), list: clsx(classNames?.list), ellipsis: clsx(classNames?.ellipsis), separator: clsx(classNames?.separator), };

return (
  <HeroBreadcrumbs
    variant="solid"
    color="secondary"
    size="lg"
    {...props}
    ref={ref}
    classNames={mergedClassNames}
  >
    {children}
  </HeroBreadcrumbs>
);

} );

Breadcrumbs.displayName = 'Breadcrumbs'; export default Breadcrumbs; `

[wingkwong]

Can you please share a sandbox instead? Also please don't randomly tag people.

[wingkwong]

Closing - inactivity