UNavigationMenu I'm facing an issue with the collapse functionality of my nested navigation menu.

[richard-hernandez-dev]

Environment

• Operating System: Windows_NT
• Node Version: v22.11.0
• Nuxt Version: 3.15.1
• CLI Version: 3.20.0
• Nitro Version: 2.10.4
• Package Manager: [email protected]
• Builder: -
• User Config: components, css, extends, modules, ui, supabase, i18n, app, mapbox, runtimeConfig, compatibilityDate
• Runtime Modules: [email protected], @nuxt/[email protected], @nuxt/[email protected], @nuxtjs/[email protected], @vueuse/[email protected], @nuxtjs/[email protected], @vueuse/motion/[email protected]
• Build Modules: -

Is this bug related to Nuxt or Vue?

Nuxt

Version

v3.0.0-alpha.10

Reproduction

https://codesandbox.io/p/devbox/quizzical-wood-ntyxty

Description

when a child item at the second level has more than three levels of nested children, the collapse button for that second-level item stops working.

I'm using the following code snippet:
Is this a known limitation of the UNavigationMenu component, or could it be a bug?

I would greatly appreciate any guidance on how to resolve this issue and ensure the collapse
TypeScript

<script setup lang="ts">
  const items = ref([
    {
      label: 'Home',
      icon: 'i-tabler-home',
      description: 'Fully styled and customizable components for Nuxt.',
      children: [
        {
          label: 'Introduction 2',
          description: 'Fully styled and customizable components for Nuxt.',
          icon: 'i-lucide-house',
          children: [
            {
              label: 'Getting Started 3',
              description: 'Learn how to get started with Reka UI.',
              icon: 'i-tabler-star',
              to: '/',
            },
            {
              label: 'Installation 3',
              description: 'Learn how to get started with Reka UI in your Nuxt project.',
              icon: 'i-lucide-house',
              to: '/',
            },
          ],
        },
      ],
    },
  ])
</script>

<template>
  <UNavigationMenu
    orientation="vertical"
    :items="links"
    color="neutral"
    :ui="{
      link: 'group relative flex items-center gap-2 px-3 py-2 font-bold rounded-md text-md focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary-500 dark:focus-visible:before:ring-primary-400 before:absolute before:inset-px before:rounded-md disabled:cursor-not-allowed disabled:opacity-75',
    }"
  />
</template>

Additional context

No response

Logs