UNavigationMenu not rendering menu items on mobile

[alinjie]

Environment

• Operating System: Darwin
• Node Version: 22
• Nuxt: 4.2.0
• Nuxt UI: 4.1.0
• Tested in browsers: Brave, Chrome, Safari

Is this bug related to Nuxt or Vue?

Nuxt

Package

v4.x

Version

v4.1.0

Reproduction

https://github.com/alinjie/navigation-menu-render-repro

Description

Hello! New to Nuxt UI so I may be missing something obvious, but I have an issue where the navigation menu items are not rendered on mobile/tablet view.

Large screen view:

Small screen view:

When clicking the hamburger menu, the modal opens but no items are displayed. However, I see the following warning in my console:

Additional context

No response

Logs

[benjamincanac]

This not related to the NavigationMenu component but to Header as it's default (center) slot is hidden on mobile: https://github.com/nuxt/ui/blob/v4/src/theme/header.ts#L6

You can change this behavior using the ui prop or your app.config.ts: https://ui.nuxt.com/docs/components/header#theme

[alinjie]

I'll give it a try, thanks!

[alinjie]

Hi again

I'm not sure I explained clearly enough the first time around, but I expect the center block of the header component to be hidden on mobile. It's the actual items, when the mobile menu is open, that are missing.

Using this image as an example (where the menu is open), I would expect there to be items within the green box, but there are none. I do not expect there to be anything within the red box, as it is when overriding the "hidden" class on the center block on mobile.

You can check out the published reproduction to see the issue:
https://navigation-menu-render-repro.vercel.app/

[acvigue]

@alinjie Fixed it by adding the NavigationMenu to the Header's body slot, with orientation set to vertical.

<UHeader>
      <template #title>Title Here</template>

      <UNavigationMenu :items="links" />

      <template #right>
          Right Template Here
      </template>

      <template #body> <<<
           <UNavigationMenu orientation="vertical" :items="links" /> <<<
      </template> <<<
</UHeader>

[alinjie]

@acvigue Thanks for the workaround. I'll keep this issue open, as I think this is a bug. According to the docs, you should be able to only include one instance of UNavigationMenu in order for things to render correctly.

[benjamincanac]

This is not a bug, it is intended. In previous versions I used to replicate the center slot for the mobile menu but realized the content of both #center and #body slot were always different, for example you'll use different orientation for the NavigationMenu.

This is why these are different and you have to define both.