From 2a9dba536430b026a79e0ad890b9a9912d149ebb Mon Sep 17 00:00:00 2001
From: Michel EDIGHOFFER <edimitchel@gmail.com>
Date: Mon, 24 Nov 2025 01:19:48 +0100
Subject: [PATCH 1/3] feat(NavigationMenu): add nested children support for
 vertical collapsed menu

---
 .../app/pages/components/navigation-menu.vue  | 51 ++++++++++++-
 src/runtime/components/NavigationMenu.vue     | 71 +++++++++++--------
 2 files changed, 89 insertions(+), 33 deletions(-)

diff --git a/playgrounds/nuxt/app/pages/components/navigation-menu.vue b/playgrounds/nuxt/app/pages/components/navigation-menu.vue
index 463f66c86d..b50e0d47ed 100644
--- a/playgrounds/nuxt/app/pages/components/navigation-menu.vue
+++ b/playgrounds/nuxt/app/pages/components/navigation-menu.vue
@@ -14,9 +14,9 @@ const attrs = reactive({
 
 const highlight = ref(true)
 const highlightColor = ref()
-const orientation = ref('horizontal' as keyof typeof theme.variants.orientation)
+const orientation = ref('vertical' as keyof typeof theme.variants.orientation)
 const contentOrientation = ref('horizontal' as keyof typeof theme.variants.contentOrientation)
-const collapsed = ref(false)
+const collapsed = ref(true)
 const arrow = ref(false)
 
 const items = [
@@ -50,12 +50,57 @@ const items = [
     to: '/components/navigation-menu',
     type: 'trigger',
     active: true,
+    popover: {
+      mode: 'click'
+    },
     defaultOpen: true,
     children: [{
       label: 'Link',
       icon: 'i-lucide-link',
       description: 'Use NuxtLink with superpowers.',
-      to: '/components/link'
+      to: '/components/link',
+      children: [{
+        label: 'Button',
+        icon: 'i-lucide-square',
+        description: 'Display a modal dialog overlay for important content.',
+        to: '/components/modal'
+      }, {
+        label: 'Pagination',
+        icon: 'i-lucide-parking-meter',
+        description: 'Display a list of pages.',
+        to: '/components/pagination'
+      }, {
+        label: 'Popover',
+        icon: 'i-lucide-message-circle',
+        description: 'Display a non-modal dialog that floats around a trigger element.',
+        to: '/components/popover',
+        children: [{
+          label: 'Button',
+          icon: 'i-lucide-square',
+          description: 'Display a modal dialog overlay for important content.',
+          to: '/components/modal'
+        }, {
+          label: 'Pagination',
+          icon: 'i-lucide-parking-meter',
+          description: 'Display a list of pages.',
+          to: '/components/pagination'
+        }, {
+          label: 'Popover',
+          icon: 'i-lucide-message-circle',
+          description: 'Display a non-modal dialog that floats around a trigger element.',
+          to: '/components/popover'
+        }, {
+          label: 'Progress',
+          icon: 'i-lucide-loader',
+          description: 'Show a horizontal bar to indicate task progression.',
+          to: '/components/progress'
+        }]
+      }, {
+        label: 'Progress',
+        icon: 'i-lucide-loader',
+        description: 'Show a horizontal bar to indicate task progression.',
+        to: '/components/progress'
+      }]
     }, {
       label: 'Modal',
       icon: 'i-lucide-square',
diff --git a/src/runtime/components/NavigationMenu.vue b/src/runtime/components/NavigationMenu.vue
index f74aa55cd1..7f83f5d1ae 100644
--- a/src/runtime/components/NavigationMenu.vue
+++ b/src/runtime/components/NavigationMenu.vue
@@ -260,12 +260,13 @@ const contentProps = toRef(() => props.content)
 const tooltipProps = toRef(() => defu(typeof props.tooltip === 'boolean' ? {} : props.tooltip, { delayDuration: 0, content: { side: 'right' } }) as TooltipProps)
 const popoverProps = toRef(() => defu(typeof props.popover === 'boolean' ? {} : props.popover, { mode: 'hover', content: { side: 'right', align: 'start', alignOffset: 2 } }) as PopoverProps)
 
-const [DefineLinkTemplate, ReuseLinkTemplate] = createReusableTemplate<{ item: NavigationMenuItem, index: number, active?: boolean }>()
-const [DefineItemTemplate, ReuseItemTemplate] = createReusableTemplate<{ item: NavigationMenuItem, index: number, level?: number }>({
+const [DefineLinkTemplate, ReuseLinkTemplate] = createReusableTemplate<{ item: NavigationMenuItem, index: number, active?: boolean, withLabel?: boolean }>()
+const [DefineItemTemplate, ReuseItemTemplate] = createReusableTemplate<{ item: NavigationMenuItem, index: number, level?: number, withLabel?: boolean }>({
   props: {
     item: Object,
     index: Number,
-    level: Number
+    level: Number,
+    withLabel: Boolean
   }
 })
 
@@ -300,7 +301,7 @@ function getAccordionDefaultValue(list: NavigationMenuItem[], level = 0) {
 </script>
 
 <template>
-  <DefineLinkTemplate v-slot="{ item, active, index }">
+  <DefineLinkTemplate v-slot="{ item, active, index, withLabel }">
     <slot :name="((item.slot || 'item') as keyof NavigationMenuSlots<T>)" :item="item" :index="index" :active="active" :ui="ui">
       <slot :name="((item.slot ? `${item.slot}-leading` : 'item-leading') as keyof NavigationMenuSlots<T>)" :item="item" :active="active" :index="index" :ui="ui">
         <UAvatar v-if="item.avatar" :size="((item.ui?.linkLeadingAvatarSize || props.ui?.linkLeadingAvatarSize || ui.linkLeadingAvatarSize()) as AvatarProps['size'])" v-bind="item.avatar" data-slot="linkLeadingAvatar" :class="ui.linkLeadingAvatar({ class: [props.ui?.linkLeadingAvatar, item.ui?.linkLeadingAvatar], active, disabled: !!item.disabled })" />
@@ -310,7 +311,7 @@ function getAccordionDefaultValue(list: NavigationMenuItem[], level = 0) {
       <span
         v-if="get(item, props.labelKey as string) || !!slots[(item.slot ? `${item.slot}-label` : 'item-label') as keyof NavigationMenuSlots<T>]"
         data-slot="linkLabel"
-        :class="ui.linkLabel({ class: [props.ui?.linkLabel, item.ui?.linkLabel] })"
+        :class="ui.linkLabel({ collapsed: (withLabel && collapsed) ? false : collapsed, class: [props.ui?.linkLabel, item.ui?.linkLabel] })"
       >
         <slot :name="((item.slot ? `${item.slot}-label` : 'item-label') as keyof NavigationMenuSlots<T>)" :item="item" :active="active" :index="index">
           {{ get(item, props.labelKey as string) }}
@@ -320,11 +321,11 @@ function getAccordionDefaultValue(list: NavigationMenuItem[], level = 0) {
       </span>
 
       <component
-        :is="orientation === 'vertical' && item.children?.length && !collapsed ? AccordionTrigger : 'span'"
+        :is="orientation === 'vertical' && item.children?.length && (!collapsed || withLabel) ? AccordionTrigger : 'span'"
         v-if="(item.badge || item.badge === 0) || (orientation === 'horizontal' && (item.children?.length || !!slots[(item.slot ? `${item.slot}-content` : 'item-content') as keyof NavigationMenuSlots<T>])) || (orientation === 'vertical' && item.children?.length) || item.trailingIcon || !!slots[(item.slot ? `${item.slot}-trailing` : 'item-trailing') as keyof NavigationMenuSlots<T>]"
         as="span"
         data-slot="linkTrailing"
-        :class="ui.linkTrailing({ class: [props.ui?.linkTrailing, item.ui?.linkTrailing] })"
+        :class="ui.linkTrailing({ collapsed: (withLabel && collapsed) ? false : collapsed, class: [props.ui?.linkTrailing, item.ui?.linkTrailing] })"
         @click.stop.prevent
       >
         <slot :name="((item.slot ? `${item.slot}-trailing` : 'item-trailing') as keyof NavigationMenuSlots<T>)" :item="item" :active="active" :index="index" :ui="ui">
@@ -345,26 +346,26 @@ function getAccordionDefaultValue(list: NavigationMenuItem[], level = 0) {
     </slot>
   </DefineLinkTemplate>
 
-  <DefineItemTemplate v-slot="{ item, index, level = 0 }">
+  <DefineItemTemplate v-slot="{ item, index, level = 0, withLabel }">
     <component
-      :is="(orientation === 'vertical' && !collapsed) ? AccordionItem : NavigationMenuItem"
+      :is="(orientation === 'vertical' && (!collapsed || withLabel)) ? AccordionItem : NavigationMenuItem"
       as="li"
       :value="item.value || (level > 0 ? `item-${level}-${index}` : `item-${index}`)"
     >
-      <div v-if="orientation === 'vertical' && item.type === 'label' && !collapsed" data-slot="label" :class="ui.label({ class: [props.ui?.label, item.ui?.label, item.class] })">
-        <ReuseLinkTemplate :item="item" :index="index" />
+      <div v-if="orientation === 'vertical' && item.type === 'label' && (!collapsed || withLabel)" data-slot="label" :class="ui.label({ class: [props.ui?.label, item.ui?.label, item.class] })">
+        <ReuseLinkTemplate :item="item" :index="index" :with-label="withLabel" />
       </div>
-      <ULink v-else-if="item.type !== 'label'" v-slot="{ active, ...slotProps }" v-bind="(orientation === 'vertical' && item.children?.length && !collapsed && item.type === 'trigger') ? {} : pickLinkProps(item as Omit<NavigationMenuItem, 'type'>)" custom>
+      <ULink v-else-if="item.type !== 'label'" v-slot="{ active, ...slotProps }" v-bind="(orientation === 'vertical' && item.children?.length && (!collapsed || withLabel) && item.type === 'trigger') ? {} : pickLinkProps(item as Omit<NavigationMenuItem, 'type'>)" custom>
         <component
-          :is="(orientation === 'horizontal' && (item.children?.length || !!slots[(item.slot ? `${item.slot}-content` : 'item-content') as keyof NavigationMenuSlots<T>])) ? NavigationMenuTrigger : ((orientation === 'vertical' && item.children?.length && !collapsed && !(slotProps as any).href) ? AccordionTrigger : NavigationMenuLink)"
+          :is="(orientation === 'horizontal' && (item.children?.length || !!slots[(item.slot ? `${item.slot}-content` : 'item-content') as keyof NavigationMenuSlots<T>])) ? NavigationMenuTrigger : ((orientation === 'vertical' && item.children?.length && (!collapsed || withLabel) && !(slotProps as any).href) ? AccordionTrigger : NavigationMenuLink)"
           as-child
           :active="active || item.active"
           :disabled="item.disabled"
           @select="item.onSelect"
         >
           <UPopover v-if="orientation === 'vertical' && collapsed && item.children?.length && (!!props.popover || !!item.popover)" v-bind="{ ...popoverProps, ...(typeof item.popover === 'boolean' ? {} : item.popover || {}) }" :ui="{ content: ui.content({ class: [props.ui?.content, item.ui?.content] }) }">
-            <ULinkBase v-bind="slotProps" data-slot="link" :class="ui.link({ class: [props.ui?.link, item.ui?.link, item.class], active: active || item.active, disabled: !!item.disabled, level: level > 0 })">
-              <ReuseLinkTemplate :item="item" :active="active || item.active" :index="index" />
+            <ULinkBase v-bind="slotProps" data-slot="link" :class="(withLabel ? ui.childLink : ui.link)({ class: [props.ui?.link, item.ui?.link, item.class], active: active || item.active, disabled: !!item.disabled, level: level > 0 })">
+              <ReuseLinkTemplate :item="item" :active="active || item.active" :index="index" :with-label="withLabel" />
             </ULinkBase>
 
             <template #content="{ close }">
@@ -380,21 +381,31 @@ function getAccordionDefaultValue(list: NavigationMenuItem[], level = 0) {
                   <li data-slot="childLabel" :class="ui.childLabel({ class: [props.ui?.childLabel, item.ui?.childLabel] })">
                     {{ get(item, props.labelKey as string) }}
                   </li>
-                  <li v-for="(childItem, childIndex) in item.children" :key="childIndex" data-slot="childItem" :class="ui.childItem({ class: [props.ui?.childItem, item.ui?.childItem] })">
-                    <ULink v-slot="{ active: childActive, ...childSlotProps }" v-bind="pickLinkProps(childItem)" custom>
-                      <NavigationMenuLink as-child :active="childActive" @select="childItem.onSelect">
-                        <ULinkBase v-bind="childSlotProps" data-slot="childLink" :class="ui.childLink({ class: [props.ui?.childLink, item.ui?.childLink, childItem.class], active: childActive })">
-                          <UIcon v-if="childItem.icon" :name="childItem.icon" data-slot="childLinkIcon" :class="ui.childLinkIcon({ class: [props.ui?.childLinkIcon, item.ui?.childLinkIcon], active: childActive })" />
-
-                          <span data-slot="childLinkLabel" :class="ui.childLinkLabel({ class: [props.ui?.childLinkLabel, item.ui?.childLinkLabel], active: childActive })">
-                            {{ get(childItem, props.labelKey as string) }}
-
-                            <UIcon v-if="childItem.target === '_blank' && externalIcon !== false" :name="typeof externalIcon === 'string' ? externalIcon : appConfig.ui.icons.external" data-slot="childLinkLabelExternalIcon" :class="ui.childLinkLabelExternalIcon({ class: [props.ui?.childLinkLabelExternalIcon, item.ui?.childLinkLabelExternalIcon], active: childActive })" />
-                          </span>
-                        </ULinkBase>
-                      </NavigationMenuLink>
-                    </ULink>
-                  </li>
+                  <template v-for="(childItem, childIndex) in item.children" :key="childIndex">
+                    <li v-if="!childItem.children?.length" data-slot="childItem" :class="ui.childItem({ class: [props.ui?.childItem, item.ui?.childItem] })">
+                      <ULink v-slot="{ active: childActive, ...childSlotProps }" v-bind="pickLinkProps(childItem)" custom>
+                        <NavigationMenuLink as-child :active="childActive" @select="childItem.onSelect">
+                          <ULinkBase v-bind="childSlotProps" data-slot="childLink" :class="ui.childLink({ class: [props.ui?.childLink, item.ui?.childLink, childItem.class], active: childActive })">
+                            <UIcon v-if="childItem.icon" :name="childItem.icon" data-slot="childLinkIcon" :class="ui.childLinkIcon({ class: [props.ui?.childLinkIcon, item.ui?.childLinkIcon], active: childActive })" />
+
+                            <span data-slot="childLinkLabel" :class="ui.childLinkLabel({ class: [props.ui?.childLinkLabel, item.ui?.childLinkLabel], active: childActive })">
+                              {{ get(childItem, props.labelKey as string) }}
+
+                              <UIcon v-if="childItem.target === '_blank' && externalIcon !== false" :name="typeof externalIcon === 'string' ? externalIcon : appConfig.ui.icons.external" data-slot="childLinkLabelExternalIcon" :class="ui.childLinkLabelExternalIcon({ class: [props.ui?.childLinkLabelExternalIcon, item.ui?.childLinkLabelExternalIcon], active: childActive })" />
+                            </span>
+                          </ULinkBase>
+                        </NavigationMenuLink>
+                      </ULink>
+                    </li>
+                    <ReuseItemTemplate
+                      v-else
+                      :item="childItem"
+                      :active="active || childItem.active"
+                      :index="childIndex"
+                      :level="level + 1"
+                      with-label
+                    />
+                  </template>
                 </ul>
               </slot>
             </template>

From f466576459867e454131254597452551e845dfa8 Mon Sep 17 00:00:00 2001
From: Michel EDIGHOFFER <edimitchel@gmail.com>
Date: Mon, 24 Nov 2025 01:35:12 +0100
Subject: [PATCH 2/3] docs(NavigationMenu): update example to demonstrate
 nested children structure

---
 docs/content/docs/2.components/navigation-menu.md | 13 +++++++------
 1 file changed, 7 insertions(+), 6 deletions(-)

diff --git a/docs/content/docs/2.components/navigation-menu.md b/docs/content/docs/2.components/navigation-menu.md
index f01d77d1ec..76df9e6080 100644
--- a/docs/content/docs/2.components/navigation-menu.md
+++ b/docs/content/docs/2.components/navigation-menu.md
@@ -373,15 +373,16 @@ props:
           - label: Installation
             description: Learn how to install and configure Nuxt UI in your application.
             icon: i-lucide-cloud-download
-          - label: 'Icons'
-            icon: 'i-lucide-smile'
-            description: 'You have nothing to do, @nuxt/icon will handle it automatically.'
-          - label: 'Colors'
-            icon: 'i-lucide-swatch-book'
-            description: 'Choose a primary and a neutral color from your Tailwind CSS theme.'
           - label: 'Theme'
             icon: 'i-lucide-cog'
             description: 'You can customize components by using the `class` / `ui` props or in your app.config.ts.'
+            children:
+              - label: 'Icons'
+                icon: 'i-lucide-smile'
+                description: 'You have nothing to do, @nuxt/icon will handle it automatically.'
+              - label: 'Colors'
+                icon: 'i-lucide-swatch-book'
+                description: 'Choose a primary and a neutral color from your Tailwind CSS theme.'
       - label: Composables
         icon: i-lucide-database
         children:

From 7bd45372be74050de40fc49059f6f3bac33f29e1 Mon Sep 17 00:00:00 2001
From: Michel EDIGHOFFER <edimitchel@gmail.com>
Date: Mon, 24 Nov 2025 22:48:33 +0100
Subject: [PATCH 3/3] Update src/runtime/components/NavigationMenu.vue

Co-authored-by: vercel[bot] <35613825+vercel[bot]@users.noreply.github.com>
---
 src/runtime/components/NavigationMenu.vue | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/runtime/components/NavigationMenu.vue b/src/runtime/components/NavigationMenu.vue
index 7f83f5d1ae..fdf3a81f23 100644
--- a/src/runtime/components/NavigationMenu.vue
+++ b/src/runtime/components/NavigationMenu.vue
@@ -400,7 +400,6 @@ function getAccordionDefaultValue(list: NavigationMenuItem[], level = 0) {
                     <ReuseItemTemplate
                       v-else
                       :item="childItem"
-                      :active="active || childItem.active"
                       :index="childIndex"
                       :level="level + 1"
                       with-label