feat(NavigationMenu): add item-content slot

docs/app/components/content/examples/navigation-menu/NavigationMenuContentSlotExample.vue

@@ -0,0 +1,88 @@
+<script setup lang="ts">
+const items = [
+  {
+    label: 'Docs',
+    icon: 'i-heroicons-book-open',
+    slot: 'docs',
+    children: [
+      {
+        label: 'Icons',
+        description: 'You have nothing to do, @nuxt/icon will handle it automatically.'
+      },
+      {
+        label: 'Colors',
+        description: 'Choose a primary and a neutral color from your Tailwind CSS theme.'
+      },
+      {
+        label: 'Theme',
+        description: 'You can customize components by using the `class` / `ui` props or in your app.config.ts.'
+      }
+    ]
+  },
+  {
+    label: 'Components',
+    icon: 'i-heroicons-cube-transparent',
+    slot: 'components',
+    children: [
+      {
+        label: 'Link',
+        description: 'Use NuxtLink with superpowers.'
+      },
+      {
+        label: 'Modal',
+        description: 'Display a modal within your application.'
+      },
+      {
+        label: 'NavigationMenu',
+        description: 'Display a list of links.'
+      },
+      {
+        label: 'Pagination',
+        description: 'Display a list of pages.'
+      },
+      {
+        label: 'Popover',
+        description: 'Display a non-modal dialog that floats around a trigger element.'
+      },
+      {
+        label: 'Progress',
+        description: 'Show a horizontal bar to indicate task progression.'
+      }
+    ]
+  },
+  {
+    label: 'GitHub'
+  }
+]
+</script>
+
+<template>
+  <UNavigationMenu
+    :items="items"
+    class="justify-center"
+    :ui="{
+      viewport: 'sm:w-[var(--radix-navigation-menu-viewport-width)]',
+      childList: 'sm:w-96',
+      childLinkDescription: 'text-balance line-clamp-2'
+    }"
+  >
+    <template #docs-content="{ item }">
+      <ul class="grid gap-2 p-4 lg:w-[500px] lg:grid-cols-[minmax(0,.75fr)_minmax(0,1fr)]">
+        <li class="row-span-3">
+          <Placeholder class="size-full min-h-48" />
+        </li>
+
+        <li v-for="child in item.children" :key="child.label">
+          <ULink class="text-sm text-left rounded-md p-3 transition-colors hover:bg-[var(--ui-bg-elevated)]/50">
+            <p class="font-medium text-[var(--ui-text-highlighted)]">
+              {{ child.label }}
+            </p>
+            <p class="text-[var(--ui-text-muted)] line-clamp-2">
+              {{ child.description }}
+            </p>
+          </ULink>
+        </li>
+      </ul>
+    </template>
+  </UNavigationMenu>
+</template>

docs/content/3.components/navigation-menu.md

@@ -560,6 +560,7 @@ You will have access to the following slots:
 - `#{{ item.slot }}-leading`{lang="ts-type"}
 - `#{{ item.slot }}-label`{lang="ts-type"}
 - `#{{ item.slot }}-trailing`{lang="ts-type"}
+- `#{{ item.slot }}-content`{lang="ts-type"}
 
 ::component-example
 ---
@@ -568,7 +569,21 @@ name: 'navigation-menu-custom-slot-example'
 ::
 
 ::tip{to="#slots"}
-You can also use the `#item`, `#item-leading`, `#item-label` and `#item-trailing` slots to customize all items.
+You can also use the `#item`, `#item-leading`, `#item-label`, `#item-trailing` and `#item-content` slots to customize all items.
+::
+
+### With content slot
+
+Use the `#item-content` slot or the `slot` property (`#{{ item.slot }}-content`) to customize the content of a specific item.
+
+::component-example
+---
+name: 'navigation-menu-content-slot-example'
+---
+::
+
+::note
+In this example, we add the `sm:w-[var(--radix-navigation-menu-viewport-width)]` class on the `viewport` to have a dynamic width. This requires to set a width on the content's first child.
 ::
 
 ## API