Nuxt UI - How to use a reactive array as NavigationMenu children?

[grizzled granite]

I have a reactive object. I want to map it as a reactive array to NavigationMenu children array. How to keep reactivity?

[sinful lance]

Hi @grizzled granite. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

---

To use a reactive array as the children of a Nuxt UI NavigationMenu item and keep it reactive, you should define your children as a computed property or a ref, and assign it to the children property of your menu item. The NavigationMenu component supports reactivity because it works with Vue's reactivity system.

Here's an example pattern based on the official documentation:

<script setup lang="ts">
import { ref, computed } from 'vue'
import type { NavigationMenuItem } from '@nuxt/ui'

// Your reactive source data
const docsList = ref([
  { label: 'Introduction', icon: 'i-lucide-house', description: 'Intro to Nuxt UI' },
  { label: 'Installation', icon: 'i-lucide-cloud-download', description: 'How to install' }
])

// Map your reactive array to NavigationMenu children
const children = computed(() =>
  docsList.value.map(doc => ({
    label: doc.label,
    icon: doc.icon,
    description: doc.description
  }))
)

// Use the computed children in your menu items
const items = ref<NavigationMenuItem[]>([
  {
    label: 'Guide',
    icon: 'i-lucide-book-open',
    children: children.value // This will stay reactive
  }
])
</script>

<template>
  <UNavigationMenu :items="items" />
</template>

If you want the children property itself to update reactively when docsList changes, you should use a computed property for the entire items array:

<script setup lang="ts">
const items = computed(() => [
  {
    label: 'Guide',
    icon: 'i-lucide-book-open',
    children: docsList.value.map(doc => ({
      label: doc.label,
      icon: doc.icon,
      description: doc.description
    }))
  }
])
</script>

<template>
  <UNavigationMenu :items="items" />
</template>

This approach ensures that any changes to your reactive source (docsList) are reflected in the NavigationMenu automatically, maintaining full reactivity as supported by Vue and Nuxt UI NavigationMenu Usage.

You can use refs or computed properties for the items and children arrays, and the NavigationMenu will update reactively when the underlying data changes NavigationMenu Usage.

---

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: