Bleedthrough in NavigationMenu

[rafte]

Environment

• Operating System: Windows_NT
• Node Version: v22.11.0
• Nuxt Version: 3.16.1
• CLI Version: 3.23.1
• Nitro Version: 2.11.7
• Package Manager: [email protected]
• Builder: -
• User Config: devtools, modules, css, future, compatibilityDate, i18n, imports
• Runtime Modules: @nuxt/[email protected], @nuxt/[email protected], @nuxt/[email protected], @nuxt/[email protected], @nuxt/[email protected], @nuxtjs/[email protected]
• Build Modules: -

Is this bug related to Nuxt or Vue?

Nuxt

Version

v3.0.1

Reproduction

https://codesandbox.io/p/devbox/lucid-austin-yffg3c

Description

When a NavigationMenu is rendered above a RadioGroup or Table, the underlying component visually bleeds through the NavigationMenu. This may also affect other components.

Expected behavior: The NavigationMenu should overlay and obscure any underlying components completely without bleed-through.

Reproduction: Render a NavigationMenu directly above a RadioGroup or Table. Observe visual bleed-through.

Additional context

No response

Logs

[HugoRCD]

@rafte Your reproduction doesn't use 3.0.1 but 3.0.0 so you need to add @import "tailwindcss" theme(static); instead of @import "tailwindcss";.

[HugoRCD]

But indeed I just saw that the menu is transparent 🤔

[rafte]

@HugoRCD Thanks, I updated the reproduction.

[HugoRCD]

Why not simply add a z-index? This work for me 🤔

<UNavigationMenu :items="items" class="w-full z-10" />