Breadcrumbs and Dropdown Lists Not Visible

[belalali0626]

Hi NextUI community!

I'm encountering an issue where Breadcrumbs and Dropdown lists are not visible in my Next.js application.
Environment:

• NextUI: latest version
• Next.js: 14
• Theme: Dark mode
• Browser: Chrome/Firefox (issue present in both)

Issue Description:

1. Breadcrumbs components are rendered but not visible in the navbar
2. Dropdown menus don't appear when clicking dropdown triggers
3. The DOM shows the elements are present, but they're not visible to users

Code Example:

<Navbar maxWidth="full" position="sticky"> <NavbarContent className="basis-1/5 sm:basis-full" justify="start"> <button className="p-2 hover:bg-default-100 rounded-lg transition-colors"> <ChevronLeft className="w-5 h-5 text-default-500" /> </button> <Breadcrumbs> <BreadcrumbItem>Dashboard</BreadcrumbItem> <BreadcrumbItem>Overview</BreadcrumbItem> </Breadcrumbs> </NavbarContent> {/* ... rest of navbar code */} </Navbar>

Expected Behavior:

• Breadcrumbs should be visible in the navbar
• Dropdown menus should appear when clicking their triggers
• All components should respect the current theme's color scheme

Attempted Solutions:

• Tried explicitly setting text colors
• Verified components are properly imported and rendered
• Checked for any CSS conflicts
• Confirmed elements exist in DOM inspection

Could this be related to z-index issues or theme configuration? Any guidance would be appreciated.

I do suspect this is a issue somewhere within the config, or a package issue. But I've installed all individual components, still fails. Anyone with more knowledge of this framework would be appreciated.

Screenshots: