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.

Your Example Website or App

https://codesandbox.io/p/sandbox/qr9qgv

Steps to Reproduce the Bug or Issue

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.

Screenshots or Videos

Hello @wingkwong
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.
This is my demo code for the Breadcrumbs component on CodeSandbox: https://codesandbox.io/p/sandbox/qr9qgv

Operating System Version

macOS, Linux

Browser

Chrome

[linear]

ENG-2759 Custom Breadcrumbs Slot-Based Styling Not Working

[kalash-rentickle]

Hello @wingkwong
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.
This is my demo code for the Breadcrumbs component on CodeSandbox: https://codesandbox.io/p/sandbox/qr9qgv

[wingkwong]

Have you tried the latest version?

[kalash-rentickle]

Have you tried the latest version?

@wingkwong Yes, I’ve tried it with the latest version (2.8.2). Here’s my demo code for the Breadcrumbs component on CodeSandbox: https://codesandbox.io/p/sandbox/qr9qgv