Targeting active menu styles

[idesignpixels]

Description

No Clear Documentation for Targeting Active Styles in NavigationMenu Component

Description

I'm trying to apply custom styles to the active state of a menu item in the NavigationMenu component, but there doesn't seem to be any clear documentation on how to do this.

The theming docs mention using the :ui attribute to target internal parts of a component, and the theme structure for NavigationMenu shows a large theme object. However, attempting to follow that structure often results in unexpected behavior—like rendering [object Object], which suggests that it doesn't expect an object or the nested configuration isn’t being parsed correctly.

Even large language models get tripped up when referencing the documentation. Some approaches I've tried (unsuccessfully) include:

link: {
  base: 'px-3 py-2 rounded-md',
  active: 'bg-primary text-white font-medium'
},
variants: {
  active: {
    true: {
      item: 'bg-primary text-white font-medium'
    }
  }
}

The only working solution so far is using data-* attributes like this:

link: 'text-md data-active:bg-primary data-active:text-white'

While this works, it’s undocumented and feels fragile—it could easily break with a future update if it’s not the intended method.

Question

What is the official and supported way to apply styles based on active state for subcomponents like link in NavigationMenu?

[alexandrekabolt]

I have the same issue on the project i'm working and still not found a clear solution.

I tried something similar with hover effects in addition but now I have some white flicker issue when hovering because of the bg-elevated & transition-colors classes

here's what I'm using

link: 'data-active:bg-gray-700 data-active:before:bg-gray-700 rounded-lg before:rounded-lg hover:bg-gray-700 hover:before:bg-gray-700',

Capture.video.2025-06-06.11.02.14.mp4

---

I'm migrating from Nuxt UI V2 to Nuxt UI V3 and theses complications with theme customization gives me the impression of regression at this state.

I would like to know if there's a better solution for doing this because I'm feeling like it's just me not doing the right thing but I can't figure out how to do it from the documentation.