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

src/runtime/components/NavigationMenu.vue

@@ -78,6 +78,7 @@ export type NavigationMenuSlots<T extends { slot?: string }> = {
   'item-leading': SlotProps<T>
   'item-label': SlotProps<T>
   'item-trailing': SlotProps<T>
+  'item-content': SlotProps<T>
 } & DynamicSlots<T, SlotProps<T>>
 
 </script>
@@ -153,7 +154,8 @@ const lists = computed(() => props.items?.length ? (Array.isArray(props.items[0]
             v-bind="(typeof item.badge === 'string' || typeof item.badge === 'number') ? { label: item.badge } : item.badge"
             :class="ui.linkTrailingBadge({ class: props.ui?.linkTrailingBadge })"
           />
-          <UIcon v-if="item.children?.length" :name="item.trailingIcon || trailingIcon || appConfig.ui.icons.chevronDown" :class="ui.linkTrailingIcon({ class: props.ui?.linkTrailingIcon, active })" />
+
+          <UIcon v-if="(orientation === 'horizontal' && (item.children?.length || !!slots[item.slot ? `${item.slot}-content` : 'item-content'])) || (orientation === 'vertical' && item.children?.length)" :name="item.trailingIcon || trailingIcon || appConfig.ui.icons.chevronDown" :class="ui.linkTrailingIcon({ class: props.ui?.linkTrailingIcon, active })" />
         </slot>
       </span>
     </slot>
@@ -172,10 +174,10 @@ const lists = computed(() => props.items?.length ? (Array.isArray(props.items[0]
         >
           <ULink v-slot="{ active, ...slotProps }" v-bind="pickLinkProps(item)" custom>
             <component
-              :is="(item.children?.length && orientation === 'horizontal') ? NavigationMenuTrigger : NavigationMenuLink"
-              v-bind="item.children?.length ? { disabled: item.disabled } : { active }"
+              :is="(orientation === 'horizontal' && (item.children?.length || !!slots[item.slot ? `${item.slot}-content` : 'item-content'])) ? NavigationMenuTrigger : NavigationMenuLink"
               as-child
               :active="active"
+              :disabled="item.disabled"
               @select="item.onSelect"
             >
               <ULinkBase v-bind="slotProps" :class="ui.link({ class: [props.ui?.link, item.class], active, disabled: !!item.disabled })">
@@ -183,33 +185,35 @@ const lists = computed(() => props.items?.length ? (Array.isArray(props.items[0]
               </ULinkBase>
             </component>
 
-            <NavigationMenuContent v-if="item.children?.length && orientation === 'horizontal'" v-bind="contentProps" :class="ui.content({ class: props.ui?.content })">
-              <ul :class="ui.childList({ class: props.ui?.childList })">
-                <li v-for="(childItem, childIndex) in item.children" :key="childIndex" :class="ui.childItem({ class: props.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" :class="ui.childLink({ class: [props.ui?.childLink, childItem.class], active: childActive })">
-                        <UIcon v-if="childItem.icon" :name="childItem.icon" :class="ui.childLinkIcon({ class: props.ui?.childLinkIcon, active: childActive })" />
+            <NavigationMenuContent v-if="orientation === 'horizontal' && (item.children?.length || !!slots[item.slot ? `${item.slot}-content` : 'item-content'])" v-bind="contentProps" :class="ui.content({ class: props.ui?.content })">
+              <slot :name="item.slot ? `${item.slot}-content` : 'item-content'" :item="(item as T)" :active="active" :index="index">
+                <ul :class="ui.childList({ class: props.ui?.childList })">
+                  <li v-for="(childItem, childIndex) in item.children" :key="childIndex" :class="ui.childItem({ class: props.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" :class="ui.childLink({ class: [props.ui?.childLink, childItem.class], active: childActive })">
+                          <UIcon v-if="childItem.icon" :name="childItem.icon" :class="ui.childLinkIcon({ class: props.ui?.childLinkIcon, active: childActive })" />
 
-                        <div :class="ui.childLinkWrapper({ class: props.ui?.childLinkWrapper })">
-                          <p :class="ui.childLinkLabel({ class: props.ui?.childLinkLabel, active: childActive })">
-                            {{ get(childItem, props.labelKey as string) }}
+                          <div :class="ui.childLinkWrapper({ class: props.ui?.childLinkWrapper })">
+                            <p :class="ui.childLinkLabel({ class: props.ui?.childLinkLabel, active: childActive })">
+                              {{ get(childItem, props.labelKey as string) }}
 
-                            <UIcon v-if="childItem.target === '_blank'" :name="appConfig.ui.icons.external" :class="ui.childLinkLabelExternalIcon({ class: props.ui?.childLinkLabelExternalIcon, active: childActive })" />
-                          </p>
-                          <p v-if="childItem.description" :class="ui.childLinkDescription({ class: props.ui?.childLinkDescription, active: childActive })">
-                            {{ childItem.description }}
-                          </p>
-                        </div>
-                      </ULinkBase>
-                    </NavigationMenuLink>
-                  </ULink>
-                </li>
-              </ul>
+                              <UIcon v-if="childItem.target === '_blank'" :name="appConfig.ui.icons.external" :class="ui.childLinkLabelExternalIcon({ class: props.ui?.childLinkLabelExternalIcon, active: childActive })" />
+                            </p>
+                            <p v-if="childItem.description" :class="ui.childLinkDescription({ class: props.ui?.childLinkDescription, active: childActive })">
+                              {{ childItem.description }}
+                            </p>
+                          </div>
+                        </ULinkBase>
+                      </NavigationMenuLink>
+                    </ULink>
+                  </li>
+                </ul>
+              </slot>
             </NavigationMenuContent>
           </ULink>
 
-          <template v-if="item.children?.length && orientation === 'vertical'" #content>
+          <template v-if="orientation === 'vertical' && item.children?.length" #content>
             <ul :class="ui.childList({ class: props.ui?.childList })">
               <li v-for="(childItem, childIndex) in item.children" :key="childIndex" :class="ui.childItem({ class: props.ui?.childItem })">
                 <ULink v-slot="{ active: childActive, ...childSlotProps }" v-bind="pickLinkProps(childItem)" custom>

src/theme/navigation-menu.ts

@@ -24,9 +24,8 @@ export default (options: Required<ModuleOptions>) => ({
     childLinkLabelExternalIcon: 'inline-block size-3 align-top text-[var(--ui-text-dimmed)]',
     childLinkDescription: 'text-sm text-[var(--ui-text-muted)]',
     separator: 'px-2 h-px bg-[var(--ui-border)]',
-    viewportWrapper: 'absolute top-full inset-x-0 flex w-full',
-    // FIXME: add `sm:w-[var(--radix-navigation-menu-viewport-width)]` / `transition-[width,height]` / `origin-[top_center]` once position is based on trigger
-    viewport: 'relative overflow-hidden bg-[var(--ui-bg)] shadow-lg rounded-[calc(var(--ui-radius)*1.5)] ring ring-[var(--ui-border)] h-[var(--radix-navigation-menu-viewport-height)] w-full data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in]',
+    viewportWrapper: 'absolute top-full left-0 flex w-full justify-center',
+    viewport: 'relative overflow-hidden bg-[var(--ui-bg)] shadow-lg rounded-[calc(var(--ui-radius)*1.5)] ring ring-[var(--ui-border)] h-[var(--radix-navigation-menu-viewport-height)] w-full transition-[width,height] origin-[top_center] data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in]',
     content: 'absolute top-0 left-0 w-full data-[motion=from-start]:animate-[enter-from-left_200ms_ease] data-[motion=from-end]:animate-[enter-from-right_200ms_ease] data-[motion=to-start]:animate-[exit-to-left_200ms_ease] data-[motion=to-end]:animate-[exit-to-right_200ms_ease]',
     indicator: 'data-[state=visible]:animate-[fade-in_100ms_ease-out] data-[state=hidden]:animate-[fade-out_100ms_ease-in] bottom-0 z-[1] flex h-2.5 items-end justify-center overflow-hidden transition-transform duration-200 ease-out',
     arrow: 'relative top-[50%] size-2.5 rotate-45 border border-[var(--ui-border)] bg-[var(--ui-bg)] z-[1] rounded-[calc(var(--ui-radius)/2)]'

test/components/__snapshots__/NavigationMenu.spec.ts.snap

@@ -35,7 +35,7 @@ exports[`NavigationMenu > renders with arrow correctly 1`] = `
     <!---->
   </div>
   <!--v-if-->
-  <div class="absolute top-full inset-x-0 flex w-full">
+  <div class="absolute top-full left-0 flex w-full justify-center">
     <!--teleport start-->
     <!--teleport end-->
     <!---->
@@ -77,7 +77,7 @@ exports[`NavigationMenu > renders with class correctly 1`] = `
     </ul>
   </div>
   <!--v-if-->
-  <div class="absolute top-full inset-x-0 flex w-full">
+  <div class="absolute top-full left-0 flex w-full justify-center">
     <!--v-if-->
     <!---->
   </div>
@@ -118,7 +118,7 @@ exports[`NavigationMenu > renders with custom slot correctly 1`] = `
     </ul>
   </div>
   <!--v-if-->
-  <div class="absolute top-full inset-x-0 flex w-full">
+  <div class="absolute top-full left-0 flex w-full justify-center">
     <!--v-if-->
     <!---->
   </div>
@@ -155,7 +155,7 @@ exports[`NavigationMenu > renders with item slot correctly 1`] = `
     </ul>
   </div>
   <!--v-if-->
-  <div class="absolute top-full inset-x-0 flex w-full">
+  <div class="absolute top-full left-0 flex w-full justify-center">
     <!--v-if-->
     <!---->
   </div>
@@ -196,7 +196,7 @@ exports[`NavigationMenu > renders with item-label slot correctly 1`] = `
     </ul>
   </div>
   <!--v-if-->
-  <div class="absolute top-full inset-x-0 flex w-full">
+  <div class="absolute top-full left-0 flex w-full justify-center">
     <!--v-if-->
     <!---->
   </div>
@@ -237,7 +237,7 @@ exports[`NavigationMenu > renders with item-leading slot correctly 1`] = `
     </ul>
   </div>
   <!--v-if-->
-  <div class="absolute top-full inset-x-0 flex w-full">
+  <div class="absolute top-full left-0 flex w-full justify-center">
     <!--v-if-->
     <!---->
   </div>
@@ -274,7 +274,7 @@ exports[`NavigationMenu > renders with item-trailing slot correctly 1`] = `
     </ul>
   </div>
   <!--v-if-->
-  <div class="absolute top-full inset-x-0 flex w-full">
+  <div class="absolute top-full left-0 flex w-full justify-center">
     <!--v-if-->
     <!---->
   </div>
@@ -315,7 +315,7 @@ exports[`NavigationMenu > renders with items correctly 1`] = `
     </ul>
   </div>
   <!--v-if-->
-  <div class="absolute top-full inset-x-0 flex w-full">
+  <div class="absolute top-full left-0 flex w-full justify-center">
     <!--v-if-->
     <!---->
   </div>
@@ -356,7 +356,7 @@ exports[`NavigationMenu > renders with labelKey correctly 1`] = `
     </ul>
   </div>
   <!--v-if-->
-  <div class="absolute top-full inset-x-0 flex w-full">
+  <div class="absolute top-full left-0 flex w-full justify-center">
     <!--v-if-->
     <!---->
   </div>
@@ -397,7 +397,7 @@ exports[`NavigationMenu > renders with neutral variant link correctly 1`] = `
     </ul>
   </div>
   <!--v-if-->
-  <div class="absolute top-full inset-x-0 flex w-full">
+  <div class="absolute top-full left-0 flex w-full justify-center">
     <!--v-if-->
     <!---->
   </div>
@@ -438,7 +438,7 @@ exports[`NavigationMenu > renders with neutral variant link highlight correctly
     </ul>
   </div>
   <!--v-if-->
-  <div class="absolute top-full inset-x-0 flex w-full">
+  <div class="absolute top-full left-0 flex w-full justify-center">
     <!--v-if-->
     <!---->
   </div>
@@ -479,7 +479,7 @@ exports[`NavigationMenu > renders with neutral variant link highlight neutral co
     </ul>
   </div>
   <!--v-if-->
-  <div class="absolute top-full inset-x-0 flex w-full">
+  <div class="absolute top-full left-0 flex w-full justify-center">
     <!--v-if-->
     <!---->
   </div>
@@ -520,7 +520,7 @@ exports[`NavigationMenu > renders with neutral variant pill correctly 1`] = `
     </ul>
   </div>
   <!--v-if-->
-  <div class="absolute top-full inset-x-0 flex w-full">
+  <div class="absolute top-full left-0 flex w-full justify-center">
     <!--v-if-->
     <!---->
   </div>
@@ -561,7 +561,7 @@ exports[`NavigationMenu > renders with neutral variant pill highlight correctly
     </ul>
   </div>
   <!--v-if-->
-  <div class="absolute top-full inset-x-0 flex w-full">
+  <div class="absolute top-full left-0 flex w-full justify-center">
     <!--v-if-->
     <!---->
   </div>
@@ -602,7 +602,7 @@ exports[`NavigationMenu > renders with neutral variant pill highlight neutral co
     </ul>
   </div>
   <!--v-if-->
-  <div class="absolute top-full inset-x-0 flex w-full">
+  <div class="absolute top-full left-0 flex w-full justify-center">
     <!--v-if-->
     <!---->
   </div>
@@ -681,7 +681,7 @@ exports[`NavigationMenu > renders with primary variant link correctly 1`] = `
     </ul>
   </div>
   <!--v-if-->
-  <div class="absolute top-full inset-x-0 flex w-full">
+  <div class="absolute top-full left-0 flex w-full justify-center">
     <!--v-if-->
     <!---->
   </div>
@@ -722,7 +722,7 @@ exports[`NavigationMenu > renders with primary variant link highlight correctly
     </ul>
   </div>
   <!--v-if-->
-  <div class="absolute top-full inset-x-0 flex w-full">
+  <div class="absolute top-full left-0 flex w-full justify-center">
     <!--v-if-->
     <!---->
   </div>
@@ -763,7 +763,7 @@ exports[`NavigationMenu > renders with primary variant pill correctly 1`] = `
     </ul>
   </div>
   <!--v-if-->
-  <div class="absolute top-full inset-x-0 flex w-full">
+  <div class="absolute top-full left-0 flex w-full justify-center">
     <!--v-if-->
     <!---->
   </div>
@@ -804,7 +804,7 @@ exports[`NavigationMenu > renders with primary variant pill highlight correctly
     </ul>
   </div>
   <!--v-if-->
-  <div class="absolute top-full inset-x-0 flex w-full">
+  <div class="absolute top-full left-0 flex w-full justify-center">
     <!--v-if-->
     <!---->
   </div>
@@ -845,7 +845,7 @@ exports[`NavigationMenu > renders with trailingIcon correctly 1`] = `
     </ul>
   </div>
   <!--v-if-->
-  <div class="absolute top-full inset-x-0 flex w-full">
+  <div class="absolute top-full left-0 flex w-full justify-center">
     <!--v-if-->
     <!---->
   </div>
@@ -886,7 +886,7 @@ exports[`NavigationMenu > renders with ui correctly 1`] = `
     </ul>
   </div>
   <!--v-if-->
-  <div class="absolute top-full inset-x-0 flex w-full">
+  <div class="absolute top-full left-0 flex w-full justify-center">
     <!--v-if-->
     <!---->
   </div>