Styling behavior changes with orientation in NavigationMenu

[schamallo]

Environment

• Operating System: Windows_NT
• Node Version: v20.19.5
• Nuxt Version: 4.2.0
• CLI Version: 3.29.3
• Nitro Version: 2.12.9
• Package Manager: npm@11.6.2
• Builder: -
• User Config: devtools, modules, ssr, runtimeConfig, app, components, imports, vite, compatibilityDate, hooks, css, ui
• Runtime Modules: @nuxt/ui@4.1.0
• Build Modules: -

Is this bug related to Nuxt or Vue?

Nuxt

Package

v4.x

Version

v4.1.0

Reproduction

https://codesandbox.io/p/devbox/muddy-wave-9mmmts

Description

Hello

When styling children with the ui attribute of NavigationMenuItem, the styling is applied with vertical orientation but not horizontal.
It seems that the parent childLink style is applied in horizontal mode and the child link style is applied in vertical mode.

I need to style each child differently, so I need to be able to access each element's individually and cannot just set the parent style.

Additional context

No response

Logs

[benjamincanac]

I've answered this already in #5223 (comment), chilLink is only used in the content menu in horizontal orientation.

[schamallo]

Alright, so is there any way to apply individual child style in horizontal mode ? I've tried item, link, label and linkLabel, and none get applied.
Is there a reason why the styling is inconsistent ? I'm using both orientations in my app, which means I'll have to style everything twice

[benjamincanac]

From your app.config.ts you can override the styles for both, but when using the ui prop it should be different between horizontal and vertical yes.

What is the expected result exactly?

[schamallo]

I want to apply a different background color to each child element dynamically, as both the list of children and their particular color are subject to change.

children: users.value.map(user => {
    return {
        label: user,
        to: `/user/${user}`,
        ui: {
            link: UsersColors.getUserColorClasses(user),
        },
    }
})

I was able to do it like this for the vertical navigation, but I can't figure out how to do the same for the horizontal one

[benjamincanac]

You should be able to achieve this by passing a class to each user.

[robinmonsere]

I've answered this already in #5223 (comment), chilLink is only used in the content menu in horizontal orientation.

Then why is does the styling work in this case?

      slots: {
        link: 'text-default! p-2! cursor-pointer hover:before:bg-elevated! font-semibold before:transition-none! ',
        linkLeadingIcon: 'text-default!',
        childLink: 'text-default! cursor-pointer hover:before:bg-reddit!', // in collapsed state
        childLabel: 'font-semibold text-lg',
        label: 'text-lg!',
      },

[benjamincanac]

@robinmonsere Yes the childLink is also used inside the Popover when the NavigationMenu is on vertical orientation and in collapsed state:

• https://github.com/nuxt/ui/blob/v4/src/runtime/components/NavigationMenu.vue#L333
• https://github.com/nuxt/ui/blob/v4/src/runtime/components/NavigationMenu.vue#L368