NavigationMenu items disappear when sidebar collapsed with tooltip enabled

[gawst]

Environment

MacBook Air M2
Memory: 8 GB
macOS: 15.2 (24C101)

Is this bug related to Nuxt or Vue?

Vue

Package

v4.x

Version

v4.4.0

Reproduction

Reproduction

• Use UDashboardSidebar with collapsible, a vertical UNavigationMenu, and the tooltip prop enabled.
• Include at least one active/selected navigation item.
• Collapse the sidebar.
• Dashboard link disappears unless the page is refreshed.

<script setup lang="ts">
import type { NavigationMenuItem } from '@nuxt/ui';

const items: NavigationMenuItem[][] = [
  [
    {
      label: 'Dashboard',
      icon: 'i-lucide-house',
      to: '/dashboard',
      // tooltip: { text: 'Dashboard' }
    },
    {
      label: 'Organizations',
      icon: 'i-lucide-inbox',
      to: '/org',
      // tooltip: { text: 'Organizations' }
    },
  ],
];
</script>

<template>
  <UDashboardSidebar collapsible>
    <template #default="{ collapsed }">
      <UNavigationMenu
        :collapsed="collapsed"
        :items="items[0]"
        orientation="vertical"
        tooltip
      />
    </template>
  </UDashboardSidebar>
</template>

Both global tooltip and per-item tooltip produce the same broken behavior.

Description

When using a vertical UNavigationMenu inside UDashboardSidebar with the sidebar collapsed and tooltip enabled, one of the menu links (e.g., Dashboard) disappears or does not render correctly until a page refresh. If the currently selected item is an item with children (e.g., Organizations), collapsing the sidebar causes the navigation items to break and become visually missing or broken.

This only happens when the tooltip prop is enabled (even on a per-item basis). Removing tooltip entirely fixes the problem.

• One or more navigation items disappear (e.g. Dashboard) when the sidebar collapses.
• Forced page refresh restores the missing item.
• The issue is reproducible only with tooltip enabled.

Additional context

No response

Logs

[benjamincanac]

Unfortunately I don't manage to reproduce your issue even though I'm using this pattern in multiple projects 🤔

[github-actions]

Would you be able to provide a reproduction? 🙏

More info

Why do I need to provide a reproduction?

Reproductions make it possible for us to triage and fix issues quickly with a relatively small team. It helps us discover the source of the problem, and also can reveal assumptions you or we might be making.

What will happen?

If you've provided a reproduction, we'll remove the label and try to reproduce the issue. If we can, we'll mark it as a bug and prioritise it based on its severity and how many people we think it might affect.

If needs reproduction labeled issues don't receive any substantial activity (e.g., new comments featuring a reproduction link), they will be closed automatically after a while. That's not because we don't care! At any point, feel free to comment with a reproduction and we'll reopen it.

How can I create a reproduction?

We have templates to create a minimal reproduction:

• Nuxt: https://codesandbox.io/p/devbox/nuxt-ui-xgrzw5
• Vue: https://codesandbox.io/p/devbox/nuxt-ui-vue-f2qp34

Please ensure that the reproduction is as minimal as possible. See more details in our guide.

You might also find these other articles interesting and/or helpful:

• The Importance of Reproductions
• How to Generate a Minimal, Complete, and Verifiable Example

[gawst]

Would you be able to provide a reproduction? 🙏

More info

Here's the reproduction, i've tried this in three different projects so far:

<script setup lang="ts">
import type { NavigationMenuItem } from '@nuxt/ui';

const items: NavigationMenuItem[][] = [
  [
    {
      label: 'Dashboard',
      icon: 'i-lucide-house',
      to: '/dashboard',
      // tooltip: { text: 'Dashboard' }
    },
    {
      label: 'Organizations',
      icon: 'i-lucide-inbox',
      to: '/org',
      // tooltip: { text: 'Organizations' }
    },
  ],
];
</script>

<template>
  <UDashboardSidebar collapsible>
    <template #default="{ collapsed }">
      <UNavigationMenu
        :collapsed="collapsed"
        :items="items[0]"
        orientation="vertical"
        tooltip
      />
    </template>
  </UDashboardSidebar>
</template>

[gawst]

Unfortunately I don't manage to reproduce your issue even though I'm using this pattern in multiple projects 🤔

Here's the reproduction, i've tried this in three different projects so far, I'm using Inertia Js v2 with Laravel 12:

<script setup lang="ts">
import type { NavigationMenuItem } from '@nuxt/ui';

const items: NavigationMenuItem[][] = [
  [
    {
      label: 'Dashboard',
      icon: 'i-lucide-house',
      to: '/dashboard',
      // tooltip: { text: 'Dashboard' }
    },
    {
      label: 'Organizations',
      icon: 'i-lucide-inbox',
      to: '/org',
      // tooltip: { text: 'Organizations' }
    },
  ],
];
</script>

<template>
  <UDashboardSidebar collapsible>
    <template #default="{ collapsed }">
      <UNavigationMenu
        :collapsed="collapsed"
        :items="items[0]"
        orientation="vertical"
        tooltip
      />
    </template>
  </UDashboardSidebar>
</template>

[benjamincanac]

I'm a bit confused, this is exactly the setup of both dashboard templates and this is working 🤔

• https://github.com/nuxt-ui-templates/dashboard/blob/main/app/layouts/default.vue
• https://github.com/nuxt-ui-templates/dashboard-vue/blob/main/src/layouts/default.vue

[MatCar]

I don't know if it is related but I have a similar problem now the linkLabel data slot has hidden class on iphone scrren (under md size) .... but works perfectly on desktop screen, and also the logo has problem too..

I think the problem is that in dashboardSidebar when you open the sidebar menu the property is still collapsed = true ... and this is not correct

[benjamincanac]

What version of Nuxt UI are you using? There was a fix somehow related in v4.5.1 🤔

[MatCar]

Version 4.5.1. under md size the collapsed is true no matter if you open the menu or not ... on lg or bigger sizes it works correctly.
After some tests I found something strange ... if you increase and reduce de screen size available I think it trigger something that sometimes everything works correctly even in sm, md sizes but again if you increase until you see again the smaller version of the menu (the collapsed version) and reduce again and open it, it's now broken.

To reproduce in large monitor with inspector open in lg size it should work, but if you reduce to md WITH THE MENU CLOSED it brakes, but if you reduce it WITH THE MENU OPEN it works ! So I think it's something related to listening event that are not accessible if the menu is closed maybe 🤔

[LJZApps]

I also can reproduce it.
Current Setup: Laravel with Inertia and NuxtUI (Just for Vue) version 4.5.1

<script setup lang="ts">
import {ref} from 'vue';
import UserMenu from "@/Components/UserMenu.vue";
import type { NavigationMenuItem } from '@nuxt/ui'

const open = ref(true)

const links = [[
    {
        label: 'Dashboard',
        icon: 'i-lucide-layout-dashboard',
        to: '/',
        onSelect: () => {
            open.value = false
        }
    }, {
        label: 'Projekt',
        icon: 'i-lucide-square-chart-gantt',
        to: '/projects',
        onSelect: () => {
            open.value = false
        }
    },
    {
        label: 'Vorlagen',
        icon: 'i-lucide-square-pen',
        to: '/drafts',
        onSelect: () => {
            open.value = false
        }
    }
]] satisfies NavigationMenuItem[]
</script>

<template>
    <UDashboardGroup unit="rem" storage="local">
        <UDashboardSidebar
            id="default"
            v-model:open="open"
            collapsible
            resizable
            class="bg-elevated/25"
            :ui="{ footer: 'lg:border-t lg:border-default' }"
        >
            <template #default="{ collapsed }">
                <UNavigationMenu
                    :collapsed="collapsed"
                    :items="links"
                    orientation="vertical"
                   tooltip
                />
            </template>

            <template #footer="{ collapsed }">
                <UserMenu :collapsed="collapsed"/>
            </template>
        </UDashboardSidebar>

        <slot/>
    </UDashboardGroup>
</template>