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?