From 7aa960ca67f36e7fd710ae2db283703551ce77d8 Mon Sep 17 00:00:00 2001
From: Alexander Friesen <friesen.alex.home@gmail.com>
Date: Mon, 18 Aug 2025 19:55:41 +0200
Subject: [PATCH] fix(NavigationMenu): render children in ssr

---
 src/runtime/components/NavigationMenu.vue     |    2 +-
 .../NavigationMenu-vue.spec.ts.snap           | 2565 ++++++++++++++++-
 .../__snapshots__/NavigationMenu.spec.ts.snap | 2565 ++++++++++++++++-
 3 files changed, 4825 insertions(+), 307 deletions(-)

diff --git a/src/runtime/components/NavigationMenu.vue b/src/runtime/components/NavigationMenu.vue
index db0dd56892..1df5313135 100644
--- a/src/runtime/components/NavigationMenu.vue
+++ b/src/runtime/components/NavigationMenu.vue
@@ -394,7 +394,7 @@ function getAccordionDefaultValue(list: NavigationMenuItem[], level = 0) {
     </component>
   </DefineItemTemplate>
 
-  <NavigationMenuRoot v-bind="{ ...rootProps, ...$attrs }" :data-collapsed="collapsed" :class="ui.root({ class: [props.ui?.root, props.class] })">
+  <NavigationMenuRoot v-bind="{ ...rootProps, ...$attrs }" :data-collapsed="collapsed" :class="ui.root({ class: [props.ui?.root, props.class] })" :unmountOnHide="false">
     <slot name="list-leading" />
 
     <template v-for="(list, listIndex) in lists" :key="`list-${listIndex}`">
diff --git a/test/components/__snapshots__/NavigationMenu-vue.spec.ts.snap b/test/components/__snapshots__/NavigationMenu-vue.spec.ts.snap
index 0d4190e6f8..0eed571280 100644
--- a/test/components/__snapshots__/NavigationMenu-vue.spec.ts.snap
+++ b/test/components/__snapshots__/NavigationMenu-vue.spec.ts.snap
@@ -46,8 +46,94 @@ exports[`NavigationMenu > renders with arrow correctly 1`] = `
     <!--teleport start-->
     <!--teleport end-->
     <div class="relative overflow-hidden bg-default shadow-lg rounded-md ring ring-default h-(--reka-navigation-menu-viewport-height) w-full transition-[width,height,left] duration-200 origin-[top_center] data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] z-[1]" data-state="open" data-orientation="horizontal">
-      <!---->
-      <!---->
+      <div data-dismissable-layer="" style="pointer-events: none;" id="reka-navigation-menu-v-0-content-item-1" aria-labelledby="reka-navigation-menu-v-0-trigger-item-1" data-state="closed" data-orientation="horizontal" class="absolute top-0 left-0 w-full max-h-[70vh] overflow-y-auto 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]" hidden="">
+        <ul class="isolate grid p-2 grid-cols-2 gap-2">
+          <li class=""><button type="button" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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 px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-dimmed group-hover:text-default transition-colors"></svg>
+              <div class="min-w-0">
+                <p class="truncate font-medium">Introduction
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Fully styled and customizable components for Nuxt.</p>
+              </div>
+            </button></li>
+          <li class=""><button type="button" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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 px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-dimmed group-hover:text-default transition-colors"></svg>
+              <div class="min-w-0">
+                <p class="truncate font-medium">Installation
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Learn how to install and configure Nuxt UI in your application.</p>
+              </div>
+            </button></li>
+          <li class=""><button type="button" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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 px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-dimmed group-hover:text-default transition-colors"></svg>
+              <div class="min-w-0">
+                <p class="truncate font-medium">Theming
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Learn how to customize the look and feel of the components.</p>
+              </div>
+            </button></li>
+          <li class=""><button type="button" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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 px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-dimmed group-hover:text-default transition-colors"></svg>
+              <div class="min-w-0">
+                <p class="truncate font-medium">Shortcuts
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Learn how to display and define keyboard shortcuts in your app.</p>
+              </div>
+            </button></li>
+        </ul>
+      </div>
+      <div data-dismissable-layer="" style="pointer-events: none;" id="reka-navigation-menu-v-0-content-item-2" aria-labelledby="reka-navigation-menu-v-0-trigger-item-2" data-state="closed" data-orientation="horizontal" class="absolute top-0 left-0 w-full max-h-[70vh] overflow-y-auto 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]" hidden="">
+        <ul class="isolate grid p-2 grid-cols-2 gap-2">
+          <li class=""><a href="/components/link" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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 px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-dimmed group-hover:text-default transition-colors"></svg>
+              <div class="min-w-0">
+                <p class="truncate font-medium">Link
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Use NuxtLink with superpowers.</p>
+              </div>
+            </a></li>
+          <li class=""><a href="/components/modal" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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 px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-dimmed group-hover:text-default transition-colors"></svg>
+              <div class="min-w-0">
+                <p class="truncate font-medium">Modal
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Display a modal within your application.</p>
+              </div>
+            </a></li>
+          <li class=""><a href="/components/navigation-menu" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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 px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-dimmed group-hover:text-default transition-colors"></svg>
+              <div class="min-w-0">
+                <p class="truncate font-medium">NavigationMenu
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Display a list of links.</p>
+              </div>
+            </a></li>
+          <li class=""><a href="/components/pagination" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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 px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-dimmed group-hover:text-default transition-colors"></svg>
+              <div class="min-w-0">
+                <p class="truncate font-medium">Pagination
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Display a list of pages.</p>
+              </div>
+            </a></li>
+          <li class=""><a href="/components/popover" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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 px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-dimmed group-hover:text-default transition-colors"></svg>
+              <div class="min-w-0">
+                <p class="truncate font-medium">Popover
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Display a non-modal dialog that floats around a trigger element.</p>
+              </div>
+            </a></li>
+          <li class=""><a href="/components/progress" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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 px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-dimmed group-hover:text-default transition-colors"></svg>
+              <div class="min-w-0">
+                <p class="truncate font-medium">Progress
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Show a horizontal bar to indicate task progression.</p>
+              </div>
+            </a></li>
+        </ul>
+      </div>
     </div>
   </div>
 </nav>"
@@ -63,14 +149,12 @@ exports[`NavigationMenu > renders with as correctly 1`] = `
         </button>
         <!--v-if-->
         <!--teleport start-->
-        <!---->
         <!--teleport end-->
         <!--v-if-->
       </li>
       <li data-menu-item="" class="min-w-0 py-2"><button type="button" data-reka-collection-item="" id="reka-navigation-menu-v-0-trigger-item-2" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" aria-controls="reka-navigation-menu-v-0-content-item-2" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-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 px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-primary before:bg-elevated"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5 text-primary group-data-[state=open]:text-primary"></svg><span class="truncate">Components<!--v-if--></span><span as="span" class="group ms-auto inline-flex gap-1.5 items-center"><!--v-if--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200"></svg></span></button>
         <!--v-if-->
         <!--teleport start-->
-        <!---->
         <!--teleport end-->
         <!--v-if-->
       </li>
@@ -96,7 +180,96 @@ exports[`NavigationMenu > renders with as correctly 1`] = `
   <!--v-if-->
   <div class="absolute top-full left-0 flex w-full justify-center">
     <!--v-if-->
-    <!---->
+    <div class="relative overflow-hidden bg-default shadow-lg rounded-md ring ring-default h-(--reka-navigation-menu-viewport-height) w-full transition-[width,height,left] duration-200 origin-[top_center] data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] z-[1]" data-state="closed" data-orientation="horizontal" style="pointer-events: none;" hidden="">
+      <div data-dismissable-layer="" style="pointer-events: none;" id="reka-navigation-menu-v-0-content-item-1" aria-labelledby="reka-navigation-menu-v-0-trigger-item-1" data-state="closed" data-orientation="horizontal" class="absolute top-0 left-0 w-full max-h-[70vh] overflow-y-auto 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]" hidden="">
+        <ul class="isolate grid p-2 grid-cols-2 gap-2">
+          <li class=""><button type="button" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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 px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-dimmed group-hover:text-default transition-colors"></svg>
+              <div class="min-w-0">
+                <p class="truncate font-medium">Introduction
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Fully styled and customizable components for Nuxt.</p>
+              </div>
+            </button></li>
+          <li class=""><button type="button" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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 px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-dimmed group-hover:text-default transition-colors"></svg>
+              <div class="min-w-0">
+                <p class="truncate font-medium">Installation
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Learn how to install and configure Nuxt UI in your application.</p>
+              </div>
+            </button></li>
+          <li class=""><button type="button" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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 px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-dimmed group-hover:text-default transition-colors"></svg>
+              <div class="min-w-0">
+                <p class="truncate font-medium">Theming
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Learn how to customize the look and feel of the components.</p>
+              </div>
+            </button></li>
+          <li class=""><button type="button" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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 px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-dimmed group-hover:text-default transition-colors"></svg>
+              <div class="min-w-0">
+                <p class="truncate font-medium">Shortcuts
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Learn how to display and define keyboard shortcuts in your app.</p>
+              </div>
+            </button></li>
+        </ul>
+      </div>
+      <div data-dismissable-layer="" style="pointer-events: none;" id="reka-navigation-menu-v-0-content-item-2" aria-labelledby="reka-navigation-menu-v-0-trigger-item-2" data-state="closed" data-orientation="horizontal" class="absolute top-0 left-0 w-full max-h-[70vh] overflow-y-auto 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]" hidden="">
+        <ul class="isolate grid p-2 grid-cols-2 gap-2">
+          <li class=""><a href="/components/link" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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 px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-dimmed group-hover:text-default transition-colors"></svg>
+              <div class="min-w-0">
+                <p class="truncate font-medium">Link
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Use NuxtLink with superpowers.</p>
+              </div>
+            </a></li>
+          <li class=""><a href="/components/modal" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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 px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-dimmed group-hover:text-default transition-colors"></svg>
+              <div class="min-w-0">
+                <p class="truncate font-medium">Modal
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Display a modal within your application.</p>
+              </div>
+            </a></li>
+          <li class=""><a href="/components/navigation-menu" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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 px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-dimmed group-hover:text-default transition-colors"></svg>
+              <div class="min-w-0">
+                <p class="truncate font-medium">NavigationMenu
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Display a list of links.</p>
+              </div>
+            </a></li>
+          <li class=""><a href="/components/pagination" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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 px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-dimmed group-hover:text-default transition-colors"></svg>
+              <div class="min-w-0">
+                <p class="truncate font-medium">Pagination
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Display a list of pages.</p>
+              </div>
+            </a></li>
+          <li class=""><a href="/components/popover" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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 px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-dimmed group-hover:text-default transition-colors"></svg>
+              <div class="min-w-0">
+                <p class="truncate font-medium">Popover
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Display a non-modal dialog that floats around a trigger element.</p>
+              </div>
+            </a></li>
+          <li class=""><a href="/components/progress" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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 px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-dimmed group-hover:text-default transition-colors"></svg>
+              <div class="min-w-0">
+                <p class="truncate font-medium">Progress
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Show a horizontal bar to indicate task progression.</p>
+              </div>
+            </a></li>
+        </ul>
+      </div>
+    </div>
   </div>
 </section>"
 `;
@@ -111,14 +284,12 @@ exports[`NavigationMenu > renders with class correctly 1`] = `
         </button>
         <!--v-if-->
         <!--teleport start-->
-        <!---->
         <!--teleport end-->
         <!--v-if-->
       </li>
       <li data-menu-item="" class="min-w-0 py-2"><button type="button" data-reka-collection-item="" id="reka-navigation-menu-v-0-trigger-item-2" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" aria-controls="reka-navigation-menu-v-0-content-item-2" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-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 px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-primary before:bg-elevated"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5 text-primary group-data-[state=open]:text-primary"></svg><span class="truncate">Components<!--v-if--></span><span as="span" class="group ms-auto inline-flex gap-1.5 items-center"><!--v-if--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200"></svg></span></button>
         <!--v-if-->
         <!--teleport start-->
-        <!---->
         <!--teleport end-->
         <!--v-if-->
       </li>
@@ -144,89 +315,262 @@ exports[`NavigationMenu > renders with class correctly 1`] = `
   <!--v-if-->
   <div class="absolute top-full left-0 flex w-full justify-center">
     <!--v-if-->
-    <!---->
-  </div>
-</nav>"
-`;
-
-exports[`NavigationMenu > renders with content orientation vertical correctly 1`] = `
-"<nav data-collapsed="false" class="relative flex gap-1.5 [&amp;>div]:min-w-0 items-center justify-between" aria-label="Main" data-orientation="horizontal" dir="ltr" data-reka-navigation-menu="">
-  <div style="position: relative;">
-    <ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
-      <li data-menu-item="" class="min-w-0 py-2"></li>
-      <li data-menu-item="" class="min-w-0 py-2"><button type="button" data-reka-collection-item="" id="reka-navigation-menu-v-0-trigger-item-1" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" aria-controls="reka-navigation-menu-v-0-content-item-1" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-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 px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-muted hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors data-[state=open]:text-highlighted data-[state=open]:before:bg-elevated/50"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5 text-dimmed group-hover:text-default transition-colors group-data-[state=open]:text-default"></svg><span class="truncate">Documentation<!--v-if--></span><span as="span" class="group ms-auto inline-flex gap-1.5 items-center"><span class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-sm ring ring-inset ring-accented text-default bg-default shrink-0"><!--v-if--><span class="truncate">10</span>
-          <!--v-if--></span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200"></svg></span>
-        </button>
-        <!--v-if-->
-        <!--teleport start-->
-        <!--teleport end-->
-        <!--v-if-->
-      </li>
-      <li data-menu-item="" class="min-w-0 py-2"><button type="button" data-reka-collection-item="" id="reka-navigation-menu-v-0-trigger-item-2" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" aria-controls="reka-navigation-menu-v-0-content-item-2" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-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 px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-primary before:bg-elevated"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5 text-primary group-data-[state=open]:text-primary"></svg><span class="truncate">Components<!--v-if--></span><span as="span" class="group ms-auto inline-flex gap-1.5 items-center"><!--v-if--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200"></svg></span></button>
-        <!--v-if-->
-        <!--teleport start-->
-        <!--teleport end-->
-        <!--v-if-->
-      </li>
-    </ul>
-  </div>
-  <!--v-if-->
-  <div style="position: relative;">
-    <ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
-      <li data-menu-item="" class="min-w-0 py-2"><a href="https://github.com/nuxt/ui" target="_blank" data-reka-collection-item="" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-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 px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-muted hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors data-[state=open]:text-highlighted data-[state=open]:before:bg-elevated/50"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5 text-dimmed group-hover:text-default transition-colors group-data-[state=open]:text-default"></svg><span class="truncate">GitHub<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="inline-block size-3 align-top text-dimmed"></svg></span>
-          <!--v-if-->
-        </a>
-        <!--v-if-->
-        <!--v-if-->
-      </li>
-      <li data-menu-item="" class="min-w-0 py-2"><button type="button" disabled="" data-reka-collection-item="" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-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 px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-muted cursor-not-allowed opacity-75"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5 text-dimmed"></svg><span class="truncate">Help<!--v-if--></span>
-          <!--v-if-->
-        </button>
-        <!--v-if-->
-        <!--v-if-->
-      </li>
-    </ul>
-  </div>
-  <!--v-if-->
-  <div class="absolute top-full left-0 flex w-full">
-    <!--v-if-->
-    <div class="relative overflow-hidden bg-default shadow-lg rounded-md ring ring-default h-(--reka-navigation-menu-viewport-height) w-full transition-[width,height,left] duration-200 origin-[top_center] data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] z-[1] sm:w-(--reka-navigation-menu-viewport-width) left-(--reka-navigation-menu-viewport-left)" data-state="open" data-orientation="horizontal">
-      <!---->
-      <!---->
-    </div>
-  </div>
-</nav>"
-`;
-
-exports[`NavigationMenu > renders with custom slot correctly 1`] = `
-"<nav data-collapsed="false" class="relative flex gap-1.5 [&amp;>div]:min-w-0 items-center justify-between" aria-label="Main" data-orientation="horizontal" dir="ltr" data-reka-navigation-menu="">
-  <div style="position: relative;">
-    <ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
-      <li data-menu-item="" class="min-w-0 py-2"></li>
-      <li data-menu-item="" class="min-w-0 py-2"><button type="button" data-reka-collection-item="" id="reka-navigation-menu-v-0-trigger-item-1" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" aria-controls="reka-navigation-menu-v-0-content-item-1" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-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 px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-muted hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors data-[state=open]:text-highlighted data-[state=open]:before:bg-elevated/50"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5 text-dimmed group-hover:text-default transition-colors group-data-[state=open]:text-default"></svg><span class="truncate">Documentation<!--v-if--></span><span as="span" class="group ms-auto inline-flex gap-1.5 items-center"><span class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-sm ring ring-inset ring-accented text-default bg-default shrink-0"><!--v-if--><span class="truncate">10</span>
-          <!--v-if--></span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200"></svg></span>
-        </button>
-        <!--v-if-->
-        <!--teleport start-->
-        <!---->
-        <!--teleport end-->
-        <!--v-if-->
-      </li>
-      <li data-menu-item="" class="min-w-0 py-2"><button type="button" data-reka-collection-item="" id="reka-navigation-menu-v-0-trigger-item-2" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" aria-controls="reka-navigation-menu-v-0-content-item-2" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-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 px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-primary before:bg-elevated"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5 text-primary group-data-[state=open]:text-primary"></svg><span class="truncate">Components<!--v-if--></span><span as="span" class="group ms-auto inline-flex gap-1.5 items-center"><!--v-if--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200"></svg></span></button>
-        <!--v-if-->
-        <!--teleport start-->
-        <!---->
-        <!--teleport end-->
-        <!--v-if-->
-      </li>
-    </ul>
-  </div>
-  <!--v-if-->
-  <div style="position: relative;">
-    <ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
-      <li data-menu-item="" class="min-w-0 py-2"><a href="https://github.com/nuxt/ui" target="_blank" data-reka-collection-item="" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-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 px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-muted hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors data-[state=open]:text-highlighted data-[state=open]:before:bg-elevated/50"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5 text-dimmed group-hover:text-default transition-colors group-data-[state=open]:text-default"></svg><span class="truncate">GitHub<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="inline-block size-3 align-top text-dimmed"></svg></span>
-          <!--v-if-->
-        </a>
+    <div class="relative overflow-hidden bg-default shadow-lg rounded-md ring ring-default h-(--reka-navigation-menu-viewport-height) w-full transition-[width,height,left] duration-200 origin-[top_center] data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] z-[1]" data-state="closed" data-orientation="horizontal" style="pointer-events: none;" hidden="">
+      <div data-dismissable-layer="" style="pointer-events: none;" id="reka-navigation-menu-v-0-content-item-1" aria-labelledby="reka-navigation-menu-v-0-trigger-item-1" data-state="closed" data-orientation="horizontal" class="absolute top-0 left-0 w-full max-h-[70vh] overflow-y-auto 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]" hidden="">
+        <ul class="isolate grid p-2 grid-cols-2 gap-2">
+          <li class=""><button type="button" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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 px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-dimmed group-hover:text-default transition-colors"></svg>
+              <div class="min-w-0">
+                <p class="truncate font-medium">Introduction
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Fully styled and customizable components for Nuxt.</p>
+              </div>
+            </button></li>
+          <li class=""><button type="button" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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 px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-dimmed group-hover:text-default transition-colors"></svg>
+              <div class="min-w-0">
+                <p class="truncate font-medium">Installation
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Learn how to install and configure Nuxt UI in your application.</p>
+              </div>
+            </button></li>
+          <li class=""><button type="button" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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 px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-dimmed group-hover:text-default transition-colors"></svg>
+              <div class="min-w-0">
+                <p class="truncate font-medium">Theming
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Learn how to customize the look and feel of the components.</p>
+              </div>
+            </button></li>
+          <li class=""><button type="button" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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 px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-dimmed group-hover:text-default transition-colors"></svg>
+              <div class="min-w-0">
+                <p class="truncate font-medium">Shortcuts
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Learn how to display and define keyboard shortcuts in your app.</p>
+              </div>
+            </button></li>
+        </ul>
+      </div>
+      <div data-dismissable-layer="" style="pointer-events: none;" id="reka-navigation-menu-v-0-content-item-2" aria-labelledby="reka-navigation-menu-v-0-trigger-item-2" data-state="closed" data-orientation="horizontal" class="absolute top-0 left-0 w-full max-h-[70vh] overflow-y-auto 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]" hidden="">
+        <ul class="isolate grid p-2 grid-cols-2 gap-2">
+          <li class=""><a href="/components/link" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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 px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-dimmed group-hover:text-default transition-colors"></svg>
+              <div class="min-w-0">
+                <p class="truncate font-medium">Link
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Use NuxtLink with superpowers.</p>
+              </div>
+            </a></li>
+          <li class=""><a href="/components/modal" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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 px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-dimmed group-hover:text-default transition-colors"></svg>
+              <div class="min-w-0">
+                <p class="truncate font-medium">Modal
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Display a modal within your application.</p>
+              </div>
+            </a></li>
+          <li class=""><a href="/components/navigation-menu" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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 px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-dimmed group-hover:text-default transition-colors"></svg>
+              <div class="min-w-0">
+                <p class="truncate font-medium">NavigationMenu
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Display a list of links.</p>
+              </div>
+            </a></li>
+          <li class=""><a href="/components/pagination" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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 px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-dimmed group-hover:text-default transition-colors"></svg>
+              <div class="min-w-0">
+                <p class="truncate font-medium">Pagination
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Display a list of pages.</p>
+              </div>
+            </a></li>
+          <li class=""><a href="/components/popover" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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 px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-dimmed group-hover:text-default transition-colors"></svg>
+              <div class="min-w-0">
+                <p class="truncate font-medium">Popover
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Display a non-modal dialog that floats around a trigger element.</p>
+              </div>
+            </a></li>
+          <li class=""><a href="/components/progress" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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 px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-dimmed group-hover:text-default transition-colors"></svg>
+              <div class="min-w-0">
+                <p class="truncate font-medium">Progress
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Show a horizontal bar to indicate task progression.</p>
+              </div>
+            </a></li>
+        </ul>
+      </div>
+    </div>
+  </div>
+</nav>"
+`;
+
+exports[`NavigationMenu > renders with content orientation vertical correctly 1`] = `
+"<nav data-collapsed="false" class="relative flex gap-1.5 [&amp;>div]:min-w-0 items-center justify-between" aria-label="Main" data-orientation="horizontal" dir="ltr" data-reka-navigation-menu="">
+  <div style="position: relative;">
+    <ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
+      <li data-menu-item="" class="min-w-0 py-2"></li>
+      <li data-menu-item="" class="min-w-0 py-2"><button type="button" data-reka-collection-item="" id="reka-navigation-menu-v-0-trigger-item-1" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" aria-controls="reka-navigation-menu-v-0-content-item-1" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-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 px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-muted hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors data-[state=open]:text-highlighted data-[state=open]:before:bg-elevated/50"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5 text-dimmed group-hover:text-default transition-colors group-data-[state=open]:text-default"></svg><span class="truncate">Documentation<!--v-if--></span><span as="span" class="group ms-auto inline-flex gap-1.5 items-center"><span class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-sm ring ring-inset ring-accented text-default bg-default shrink-0"><!--v-if--><span class="truncate">10</span>
+          <!--v-if--></span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200"></svg></span>
+        </button>
+        <!--v-if-->
+        <!--teleport start-->
+        <!--teleport end-->
+        <!--v-if-->
+      </li>
+      <li data-menu-item="" class="min-w-0 py-2"><button type="button" data-reka-collection-item="" id="reka-navigation-menu-v-0-trigger-item-2" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" aria-controls="reka-navigation-menu-v-0-content-item-2" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-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 px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-primary before:bg-elevated"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5 text-primary group-data-[state=open]:text-primary"></svg><span class="truncate">Components<!--v-if--></span><span as="span" class="group ms-auto inline-flex gap-1.5 items-center"><!--v-if--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200"></svg></span></button>
+        <!--v-if-->
+        <!--teleport start-->
+        <!--teleport end-->
+        <!--v-if-->
+      </li>
+    </ul>
+  </div>
+  <!--v-if-->
+  <div style="position: relative;">
+    <ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
+      <li data-menu-item="" class="min-w-0 py-2"><a href="https://github.com/nuxt/ui" target="_blank" data-reka-collection-item="" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-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 px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-muted hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors data-[state=open]:text-highlighted data-[state=open]:before:bg-elevated/50"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5 text-dimmed group-hover:text-default transition-colors group-data-[state=open]:text-default"></svg><span class="truncate">GitHub<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="inline-block size-3 align-top text-dimmed"></svg></span>
+          <!--v-if-->
+        </a>
+        <!--v-if-->
+        <!--v-if-->
+      </li>
+      <li data-menu-item="" class="min-w-0 py-2"><button type="button" disabled="" data-reka-collection-item="" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-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 px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-muted cursor-not-allowed opacity-75"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5 text-dimmed"></svg><span class="truncate">Help<!--v-if--></span>
+          <!--v-if-->
+        </button>
+        <!--v-if-->
+        <!--v-if-->
+      </li>
+    </ul>
+  </div>
+  <!--v-if-->
+  <div class="absolute top-full left-0 flex w-full">
+    <!--v-if-->
+    <div class="relative overflow-hidden bg-default shadow-lg rounded-md ring ring-default h-(--reka-navigation-menu-viewport-height) w-full transition-[width,height,left] duration-200 origin-[top_center] data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] z-[1] sm:w-(--reka-navigation-menu-viewport-width) left-(--reka-navigation-menu-viewport-left)" data-state="open" data-orientation="horizontal">
+      <div data-dismissable-layer="" style="pointer-events: none;" id="reka-navigation-menu-v-0-content-item-1" aria-labelledby="reka-navigation-menu-v-0-trigger-item-1" data-state="closed" data-orientation="horizontal" class="absolute top-0 left-0 max-h-[70vh] overflow-y-auto w-60" hidden="">
+        <ul class="isolate grid p-2 gap-1">
+          <li class=""><button type="button" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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 px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-dimmed group-hover:text-default transition-colors"></svg>
+              <div class="min-w-0">
+                <p class="truncate font-medium">Introduction
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Fully styled and customizable components for Nuxt.</p>
+              </div>
+            </button></li>
+          <li class=""><button type="button" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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 px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-dimmed group-hover:text-default transition-colors"></svg>
+              <div class="min-w-0">
+                <p class="truncate font-medium">Installation
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Learn how to install and configure Nuxt UI in your application.</p>
+              </div>
+            </button></li>
+          <li class=""><button type="button" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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 px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-dimmed group-hover:text-default transition-colors"></svg>
+              <div class="min-w-0">
+                <p class="truncate font-medium">Theming
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Learn how to customize the look and feel of the components.</p>
+              </div>
+            </button></li>
+          <li class=""><button type="button" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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 px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-dimmed group-hover:text-default transition-colors"></svg>
+              <div class="min-w-0">
+                <p class="truncate font-medium">Shortcuts
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Learn how to display and define keyboard shortcuts in your app.</p>
+              </div>
+            </button></li>
+        </ul>
+      </div>
+      <div data-dismissable-layer="" style="pointer-events: none;" id="reka-navigation-menu-v-0-content-item-2" aria-labelledby="reka-navigation-menu-v-0-trigger-item-2" data-state="closed" data-orientation="horizontal" class="absolute top-0 left-0 max-h-[70vh] overflow-y-auto w-60" hidden="">
+        <ul class="isolate grid p-2 gap-1">
+          <li class=""><a href="/components/link" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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 px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-dimmed group-hover:text-default transition-colors"></svg>
+              <div class="min-w-0">
+                <p class="truncate font-medium">Link
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Use NuxtLink with superpowers.</p>
+              </div>
+            </a></li>
+          <li class=""><a href="/components/modal" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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 px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-dimmed group-hover:text-default transition-colors"></svg>
+              <div class="min-w-0">
+                <p class="truncate font-medium">Modal
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Display a modal within your application.</p>
+              </div>
+            </a></li>
+          <li class=""><a href="/components/navigation-menu" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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 px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-dimmed group-hover:text-default transition-colors"></svg>
+              <div class="min-w-0">
+                <p class="truncate font-medium">NavigationMenu
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Display a list of links.</p>
+              </div>
+            </a></li>
+          <li class=""><a href="/components/pagination" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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 px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-dimmed group-hover:text-default transition-colors"></svg>
+              <div class="min-w-0">
+                <p class="truncate font-medium">Pagination
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Display a list of pages.</p>
+              </div>
+            </a></li>
+          <li class=""><a href="/components/popover" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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 px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-dimmed group-hover:text-default transition-colors"></svg>
+              <div class="min-w-0">
+                <p class="truncate font-medium">Popover
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Display a non-modal dialog that floats around a trigger element.</p>
+              </div>
+            </a></li>
+          <li class=""><a href="/components/progress" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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 px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-dimmed group-hover:text-default transition-colors"></svg>
+              <div class="min-w-0">
+                <p class="truncate font-medium">Progress
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Show a horizontal bar to indicate task progression.</p>
+              </div>
+            </a></li>
+        </ul>
+      </div>
+    </div>
+  </div>
+</nav>"
+`;
+
+exports[`NavigationMenu > renders with custom slot correctly 1`] = `
+"<nav data-collapsed="false" class="relative flex gap-1.5 [&amp;>div]:min-w-0 items-center justify-between" aria-label="Main" data-orientation="horizontal" dir="ltr" data-reka-navigation-menu="">
+  <div style="position: relative;">
+    <ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
+      <li data-menu-item="" class="min-w-0 py-2"></li>
+      <li data-menu-item="" class="min-w-0 py-2"><button type="button" data-reka-collection-item="" id="reka-navigation-menu-v-0-trigger-item-1" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" aria-controls="reka-navigation-menu-v-0-content-item-1" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-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 px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-muted hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors data-[state=open]:text-highlighted data-[state=open]:before:bg-elevated/50"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5 text-dimmed group-hover:text-default transition-colors group-data-[state=open]:text-default"></svg><span class="truncate">Documentation<!--v-if--></span><span as="span" class="group ms-auto inline-flex gap-1.5 items-center"><span class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-sm ring ring-inset ring-accented text-default bg-default shrink-0"><!--v-if--><span class="truncate">10</span>
+          <!--v-if--></span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200"></svg></span>
+        </button>
+        <!--v-if-->
+        <!--teleport start-->
+        <!--teleport end-->
+        <!--v-if-->
+      </li>
+      <li data-menu-item="" class="min-w-0 py-2"><button type="button" data-reka-collection-item="" id="reka-navigation-menu-v-0-trigger-item-2" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" aria-controls="reka-navigation-menu-v-0-content-item-2" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-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 px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-primary before:bg-elevated"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5 text-primary group-data-[state=open]:text-primary"></svg><span class="truncate">Components<!--v-if--></span><span as="span" class="group ms-auto inline-flex gap-1.5 items-center"><!--v-if--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200"></svg></span></button>
+        <!--v-if-->
+        <!--teleport start-->
+        <!--teleport end-->
+        <!--v-if-->
+      </li>
+    </ul>
+  </div>
+  <!--v-if-->
+  <div style="position: relative;">
+    <ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
+      <li data-menu-item="" class="min-w-0 py-2"><a href="https://github.com/nuxt/ui" target="_blank" data-reka-collection-item="" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-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 px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-muted hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors data-[state=open]:text-highlighted data-[state=open]:before:bg-elevated/50"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5 text-dimmed group-hover:text-default transition-colors group-data-[state=open]:text-default"></svg><span class="truncate">GitHub<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="inline-block size-3 align-top text-dimmed"></svg></span>
+          <!--v-if-->
+        </a>
         <!--v-if-->
         <!--v-if-->
       </li>
@@ -241,7 +585,96 @@ exports[`NavigationMenu > renders with custom slot correctly 1`] = `
   <!--v-if-->
   <div class="absolute top-full left-0 flex w-full justify-center">
     <!--v-if-->
-    <!---->
+    <div class="relative overflow-hidden bg-default shadow-lg rounded-md ring ring-default h-(--reka-navigation-menu-viewport-height) w-full transition-[width,height,left] duration-200 origin-[top_center] data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] z-[1]" data-state="closed" data-orientation="horizontal" style="pointer-events: none;" hidden="">
+      <div data-dismissable-layer="" style="pointer-events: none;" id="reka-navigation-menu-v-0-content-item-1" aria-labelledby="reka-navigation-menu-v-0-trigger-item-1" data-state="closed" data-orientation="horizontal" class="absolute top-0 left-0 w-full max-h-[70vh] overflow-y-auto 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]" hidden="">
+        <ul class="isolate grid p-2 grid-cols-2 gap-2">
+          <li class=""><button type="button" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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 px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-dimmed group-hover:text-default transition-colors"></svg>
+              <div class="min-w-0">
+                <p class="truncate font-medium">Introduction
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Fully styled and customizable components for Nuxt.</p>
+              </div>
+            </button></li>
+          <li class=""><button type="button" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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 px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-dimmed group-hover:text-default transition-colors"></svg>
+              <div class="min-w-0">
+                <p class="truncate font-medium">Installation
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Learn how to install and configure Nuxt UI in your application.</p>
+              </div>
+            </button></li>
+          <li class=""><button type="button" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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 px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-dimmed group-hover:text-default transition-colors"></svg>
+              <div class="min-w-0">
+                <p class="truncate font-medium">Theming
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Learn how to customize the look and feel of the components.</p>
+              </div>
+            </button></li>
+          <li class=""><button type="button" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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 px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-dimmed group-hover:text-default transition-colors"></svg>
+              <div class="min-w-0">
+                <p class="truncate font-medium">Shortcuts
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Learn how to display and define keyboard shortcuts in your app.</p>
+              </div>
+            </button></li>
+        </ul>
+      </div>
+      <div data-dismissable-layer="" style="pointer-events: none;" id="reka-navigation-menu-v-0-content-item-2" aria-labelledby="reka-navigation-menu-v-0-trigger-item-2" data-state="closed" data-orientation="horizontal" class="absolute top-0 left-0 w-full max-h-[70vh] overflow-y-auto 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]" hidden="">
+        <ul class="isolate grid p-2 grid-cols-2 gap-2">
+          <li class=""><a href="/components/link" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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 px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-dimmed group-hover:text-default transition-colors"></svg>
+              <div class="min-w-0">
+                <p class="truncate font-medium">Link
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Use NuxtLink with superpowers.</p>
+              </div>
+            </a></li>
+          <li class=""><a href="/components/modal" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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 px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-dimmed group-hover:text-default transition-colors"></svg>
+              <div class="min-w-0">
+                <p class="truncate font-medium">Modal
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Display a modal within your application.</p>
+              </div>
+            </a></li>
+          <li class=""><a href="/components/navigation-menu" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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 px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-dimmed group-hover:text-default transition-colors"></svg>
+              <div class="min-w-0">
+                <p class="truncate font-medium">NavigationMenu
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Display a list of links.</p>
+              </div>
+            </a></li>
+          <li class=""><a href="/components/pagination" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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 px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-dimmed group-hover:text-default transition-colors"></svg>
+              <div class="min-w-0">
+                <p class="truncate font-medium">Pagination
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Display a list of pages.</p>
+              </div>
+            </a></li>
+          <li class=""><a href="/components/popover" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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 px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-dimmed group-hover:text-default transition-colors"></svg>
+              <div class="min-w-0">
+                <p class="truncate font-medium">Popover
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Display a non-modal dialog that floats around a trigger element.</p>
+              </div>
+            </a></li>
+          <li class=""><a href="/components/progress" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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 px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-dimmed group-hover:text-default transition-colors"></svg>
+              <div class="min-w-0">
+                <p class="truncate font-medium">Progress
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Show a horizontal bar to indicate task progression.</p>
+              </div>
+            </a></li>
+        </ul>
+      </div>
+    </div>
   </div>
 </nav>"
 `;
@@ -256,14 +689,12 @@ exports[`NavigationMenu > renders with externalIcon correctly 1`] = `
         </button>
         <!--v-if-->
         <!--teleport start-->
-        <!---->
         <!--teleport end-->
         <!--v-if-->
       </li>
       <li data-menu-item="" class="min-w-0 py-2"><button type="button" data-reka-collection-item="" id="reka-navigation-menu-v-0-trigger-item-2" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" aria-controls="reka-navigation-menu-v-0-content-item-2" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-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 px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-primary before:bg-elevated"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5 text-primary group-data-[state=open]:text-primary"></svg><span class="truncate">Components<!--v-if--></span><span as="span" class="group ms-auto inline-flex gap-1.5 items-center"><!--v-if--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200"></svg></span></button>
         <!--v-if-->
         <!--teleport start-->
-        <!---->
         <!--teleport end-->
         <!--v-if-->
       </li>
@@ -289,7 +720,96 @@ exports[`NavigationMenu > renders with externalIcon correctly 1`] = `
   <!--v-if-->
   <div class="absolute top-full left-0 flex w-full justify-center">
     <!--v-if-->
-    <!---->
+    <div class="relative overflow-hidden bg-default shadow-lg rounded-md ring ring-default h-(--reka-navigation-menu-viewport-height) w-full transition-[width,height,left] duration-200 origin-[top_center] data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] z-[1]" data-state="closed" data-orientation="horizontal" style="pointer-events: none;" hidden="">
+      <div data-dismissable-layer="" style="pointer-events: none;" id="reka-navigation-menu-v-0-content-item-1" aria-labelledby="reka-navigation-menu-v-0-trigger-item-1" data-state="closed" data-orientation="horizontal" class="absolute top-0 left-0 w-full max-h-[70vh] overflow-y-auto 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]" hidden="">
+        <ul class="isolate grid p-2 grid-cols-2 gap-2">
+          <li class=""><button type="button" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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 px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-dimmed group-hover:text-default transition-colors"></svg>
+              <div class="min-w-0">
+                <p class="truncate font-medium">Introduction
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Fully styled and customizable components for Nuxt.</p>
+              </div>
+            </button></li>
+          <li class=""><button type="button" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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 px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-dimmed group-hover:text-default transition-colors"></svg>
+              <div class="min-w-0">
+                <p class="truncate font-medium">Installation
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Learn how to install and configure Nuxt UI in your application.</p>
+              </div>
+            </button></li>
+          <li class=""><button type="button" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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 px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-dimmed group-hover:text-default transition-colors"></svg>
+              <div class="min-w-0">
+                <p class="truncate font-medium">Theming
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Learn how to customize the look and feel of the components.</p>
+              </div>
+            </button></li>
+          <li class=""><button type="button" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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 px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-dimmed group-hover:text-default transition-colors"></svg>
+              <div class="min-w-0">
+                <p class="truncate font-medium">Shortcuts
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Learn how to display and define keyboard shortcuts in your app.</p>
+              </div>
+            </button></li>
+        </ul>
+      </div>
+      <div data-dismissable-layer="" style="pointer-events: none;" id="reka-navigation-menu-v-0-content-item-2" aria-labelledby="reka-navigation-menu-v-0-trigger-item-2" data-state="closed" data-orientation="horizontal" class="absolute top-0 left-0 w-full max-h-[70vh] overflow-y-auto 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]" hidden="">
+        <ul class="isolate grid p-2 grid-cols-2 gap-2">
+          <li class=""><a href="/components/link" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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 px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-dimmed group-hover:text-default transition-colors"></svg>
+              <div class="min-w-0">
+                <p class="truncate font-medium">Link
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Use NuxtLink with superpowers.</p>
+              </div>
+            </a></li>
+          <li class=""><a href="/components/modal" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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 px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-dimmed group-hover:text-default transition-colors"></svg>
+              <div class="min-w-0">
+                <p class="truncate font-medium">Modal
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Display a modal within your application.</p>
+              </div>
+            </a></li>
+          <li class=""><a href="/components/navigation-menu" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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 px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-dimmed group-hover:text-default transition-colors"></svg>
+              <div class="min-w-0">
+                <p class="truncate font-medium">NavigationMenu
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Display a list of links.</p>
+              </div>
+            </a></li>
+          <li class=""><a href="/components/pagination" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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 px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-dimmed group-hover:text-default transition-colors"></svg>
+              <div class="min-w-0">
+                <p class="truncate font-medium">Pagination
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Display a list of pages.</p>
+              </div>
+            </a></li>
+          <li class=""><a href="/components/popover" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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 px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-dimmed group-hover:text-default transition-colors"></svg>
+              <div class="min-w-0">
+                <p class="truncate font-medium">Popover
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Display a non-modal dialog that floats around a trigger element.</p>
+              </div>
+            </a></li>
+          <li class=""><a href="/components/progress" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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 px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-dimmed group-hover:text-default transition-colors"></svg>
+              <div class="min-w-0">
+                <p class="truncate font-medium">Progress
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Show a horizontal bar to indicate task progression.</p>
+              </div>
+            </a></li>
+        </ul>
+      </div>
+    </div>
   </div>
 </nav>"
 `;
@@ -302,14 +822,12 @@ exports[`NavigationMenu > renders with item slot correctly 1`] = `
       <li data-menu-item="" class="min-w-0 py-2"><button type="button" data-reka-collection-item="" id="reka-navigation-menu-v-0-trigger-item-1" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" aria-controls="reka-navigation-menu-v-0-content-item-1" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-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 px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-muted hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors data-[state=open]:text-highlighted data-[state=open]:before:bg-elevated/50">Item slot</button>
         <!--v-if-->
         <!--teleport start-->
-        <!---->
         <!--teleport end-->
         <!--v-if-->
       </li>
       <li data-menu-item="" class="min-w-0 py-2"><button type="button" data-reka-collection-item="" id="reka-navigation-menu-v-0-trigger-item-2" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" aria-controls="reka-navigation-menu-v-0-content-item-2" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-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 px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-primary before:bg-elevated">Item slot</button>
         <!--v-if-->
         <!--teleport start-->
-        <!---->
         <!--teleport end-->
         <!--v-if-->
       </li>
@@ -331,7 +849,96 @@ exports[`NavigationMenu > renders with item slot correctly 1`] = `
   <!--v-if-->
   <div class="absolute top-full left-0 flex w-full justify-center">
     <!--v-if-->
-    <!---->
+    <div class="relative overflow-hidden bg-default shadow-lg rounded-md ring ring-default h-(--reka-navigation-menu-viewport-height) w-full transition-[width,height,left] duration-200 origin-[top_center] data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] z-[1]" data-state="closed" data-orientation="horizontal" style="pointer-events: none;" hidden="">
+      <div data-dismissable-layer="" style="pointer-events: none;" id="reka-navigation-menu-v-0-content-item-1" aria-labelledby="reka-navigation-menu-v-0-trigger-item-1" data-state="closed" data-orientation="horizontal" class="absolute top-0 left-0 w-full max-h-[70vh] overflow-y-auto 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]" hidden="">
+        <ul class="isolate grid p-2 grid-cols-2 gap-2">
+          <li class=""><button type="button" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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 px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-dimmed group-hover:text-default transition-colors"></svg>
+              <div class="min-w-0">
+                <p class="truncate font-medium">Introduction
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Fully styled and customizable components for Nuxt.</p>
+              </div>
+            </button></li>
+          <li class=""><button type="button" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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 px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-dimmed group-hover:text-default transition-colors"></svg>
+              <div class="min-w-0">
+                <p class="truncate font-medium">Installation
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Learn how to install and configure Nuxt UI in your application.</p>
+              </div>
+            </button></li>
+          <li class=""><button type="button" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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 px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-dimmed group-hover:text-default transition-colors"></svg>
+              <div class="min-w-0">
+                <p class="truncate font-medium">Theming
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Learn how to customize the look and feel of the components.</p>
+              </div>
+            </button></li>
+          <li class=""><button type="button" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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 px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-dimmed group-hover:text-default transition-colors"></svg>
+              <div class="min-w-0">
+                <p class="truncate font-medium">Shortcuts
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Learn how to display and define keyboard shortcuts in your app.</p>
+              </div>
+            </button></li>
+        </ul>
+      </div>
+      <div data-dismissable-layer="" style="pointer-events: none;" id="reka-navigation-menu-v-0-content-item-2" aria-labelledby="reka-navigation-menu-v-0-trigger-item-2" data-state="closed" data-orientation="horizontal" class="absolute top-0 left-0 w-full max-h-[70vh] overflow-y-auto 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]" hidden="">
+        <ul class="isolate grid p-2 grid-cols-2 gap-2">
+          <li class=""><a href="/components/link" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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 px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-dimmed group-hover:text-default transition-colors"></svg>
+              <div class="min-w-0">
+                <p class="truncate font-medium">Link
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Use NuxtLink with superpowers.</p>
+              </div>
+            </a></li>
+          <li class=""><a href="/components/modal" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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 px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-dimmed group-hover:text-default transition-colors"></svg>
+              <div class="min-w-0">
+                <p class="truncate font-medium">Modal
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Display a modal within your application.</p>
+              </div>
+            </a></li>
+          <li class=""><a href="/components/navigation-menu" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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 px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-dimmed group-hover:text-default transition-colors"></svg>
+              <div class="min-w-0">
+                <p class="truncate font-medium">NavigationMenu
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Display a list of links.</p>
+              </div>
+            </a></li>
+          <li class=""><a href="/components/pagination" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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 px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-dimmed group-hover:text-default transition-colors"></svg>
+              <div class="min-w-0">
+                <p class="truncate font-medium">Pagination
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Display a list of pages.</p>
+              </div>
+            </a></li>
+          <li class=""><a href="/components/popover" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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 px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-dimmed group-hover:text-default transition-colors"></svg>
+              <div class="min-w-0">
+                <p class="truncate font-medium">Popover
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Display a non-modal dialog that floats around a trigger element.</p>
+              </div>
+            </a></li>
+          <li class=""><a href="/components/progress" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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 px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-dimmed group-hover:text-default transition-colors"></svg>
+              <div class="min-w-0">
+                <p class="truncate font-medium">Progress
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Show a horizontal bar to indicate task progression.</p>
+              </div>
+            </a></li>
+        </ul>
+      </div>
+    </div>
   </div>
 </nav>"
 `;
@@ -346,14 +953,12 @@ exports[`NavigationMenu > renders with item-label slot correctly 1`] = `
         </button>
         <!--v-if-->
         <!--teleport start-->
-        <!---->
         <!--teleport end-->
         <!--v-if-->
       </li>
       <li data-menu-item="" class="min-w-0 py-2"><button type="button" data-reka-collection-item="" id="reka-navigation-menu-v-0-trigger-item-2" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" aria-controls="reka-navigation-menu-v-0-content-item-2" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-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 px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-primary before:bg-elevated"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5 text-primary group-data-[state=open]:text-primary"></svg><span class="truncate">Item label slot<!--v-if--></span><span as="span" class="group ms-auto inline-flex gap-1.5 items-center"><!--v-if--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200"></svg></span></button>
         <!--v-if-->
         <!--teleport start-->
-        <!---->
         <!--teleport end-->
         <!--v-if-->
       </li>
@@ -379,7 +984,96 @@ exports[`NavigationMenu > renders with item-label slot correctly 1`] = `
   <!--v-if-->
   <div class="absolute top-full left-0 flex w-full justify-center">
     <!--v-if-->
-    <!---->
+    <div class="relative overflow-hidden bg-default shadow-lg rounded-md ring ring-default h-(--reka-navigation-menu-viewport-height) w-full transition-[width,height,left] duration-200 origin-[top_center] data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] z-[1]" data-state="closed" data-orientation="horizontal" style="pointer-events: none;" hidden="">
+      <div data-dismissable-layer="" style="pointer-events: none;" id="reka-navigation-menu-v-0-content-item-1" aria-labelledby="reka-navigation-menu-v-0-trigger-item-1" data-state="closed" data-orientation="horizontal" class="absolute top-0 left-0 w-full max-h-[70vh] overflow-y-auto 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]" hidden="">
+        <ul class="isolate grid p-2 grid-cols-2 gap-2">
+          <li class=""><button type="button" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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 px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-dimmed group-hover:text-default transition-colors"></svg>
+              <div class="min-w-0">
+                <p class="truncate font-medium">Introduction
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Fully styled and customizable components for Nuxt.</p>
+              </div>
+            </button></li>
+          <li class=""><button type="button" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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 px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-dimmed group-hover:text-default transition-colors"></svg>
+              <div class="min-w-0">
+                <p class="truncate font-medium">Installation
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Learn how to install and configure Nuxt UI in your application.</p>
+              </div>
+            </button></li>
+          <li class=""><button type="button" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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 px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-dimmed group-hover:text-default transition-colors"></svg>
+              <div class="min-w-0">
+                <p class="truncate font-medium">Theming
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Learn how to customize the look and feel of the components.</p>
+              </div>
+            </button></li>
+          <li class=""><button type="button" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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 px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-dimmed group-hover:text-default transition-colors"></svg>
+              <div class="min-w-0">
+                <p class="truncate font-medium">Shortcuts
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Learn how to display and define keyboard shortcuts in your app.</p>
+              </div>
+            </button></li>
+        </ul>
+      </div>
+      <div data-dismissable-layer="" style="pointer-events: none;" id="reka-navigation-menu-v-0-content-item-2" aria-labelledby="reka-navigation-menu-v-0-trigger-item-2" data-state="closed" data-orientation="horizontal" class="absolute top-0 left-0 w-full max-h-[70vh] overflow-y-auto 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]" hidden="">
+        <ul class="isolate grid p-2 grid-cols-2 gap-2">
+          <li class=""><a href="/components/link" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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 px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-dimmed group-hover:text-default transition-colors"></svg>
+              <div class="min-w-0">
+                <p class="truncate font-medium">Link
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Use NuxtLink with superpowers.</p>
+              </div>
+            </a></li>
+          <li class=""><a href="/components/modal" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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 px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-dimmed group-hover:text-default transition-colors"></svg>
+              <div class="min-w-0">
+                <p class="truncate font-medium">Modal
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Display a modal within your application.</p>
+              </div>
+            </a></li>
+          <li class=""><a href="/components/navigation-menu" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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 px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-dimmed group-hover:text-default transition-colors"></svg>
+              <div class="min-w-0">
+                <p class="truncate font-medium">NavigationMenu
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Display a list of links.</p>
+              </div>
+            </a></li>
+          <li class=""><a href="/components/pagination" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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 px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-dimmed group-hover:text-default transition-colors"></svg>
+              <div class="min-w-0">
+                <p class="truncate font-medium">Pagination
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Display a list of pages.</p>
+              </div>
+            </a></li>
+          <li class=""><a href="/components/popover" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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 px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-dimmed group-hover:text-default transition-colors"></svg>
+              <div class="min-w-0">
+                <p class="truncate font-medium">Popover
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Display a non-modal dialog that floats around a trigger element.</p>
+              </div>
+            </a></li>
+          <li class=""><a href="/components/progress" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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 px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-dimmed group-hover:text-default transition-colors"></svg>
+              <div class="min-w-0">
+                <p class="truncate font-medium">Progress
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Show a horizontal bar to indicate task progression.</p>
+              </div>
+            </a></li>
+        </ul>
+      </div>
+    </div>
   </div>
 </nav>"
 `;
@@ -394,14 +1088,12 @@ exports[`NavigationMenu > renders with item-leading slot correctly 1`] = `
         </button>
         <!--v-if-->
         <!--teleport start-->
-        <!---->
         <!--teleport end-->
         <!--v-if-->
       </li>
       <li data-menu-item="" class="min-w-0 py-2"><button type="button" data-reka-collection-item="" id="reka-navigation-menu-v-0-trigger-item-2" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" aria-controls="reka-navigation-menu-v-0-content-item-2" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-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 px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-primary before:bg-elevated">Item leading slot<span class="truncate">Components<!--v-if--></span><span as="span" class="group ms-auto inline-flex gap-1.5 items-center"><!--v-if--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200"></svg></span></button>
         <!--v-if-->
         <!--teleport start-->
-        <!---->
         <!--teleport end-->
         <!--v-if-->
       </li>
@@ -427,7 +1119,96 @@ exports[`NavigationMenu > renders with item-leading slot correctly 1`] = `
   <!--v-if-->
   <div class="absolute top-full left-0 flex w-full justify-center">
     <!--v-if-->
-    <!---->
+    <div class="relative overflow-hidden bg-default shadow-lg rounded-md ring ring-default h-(--reka-navigation-menu-viewport-height) w-full transition-[width,height,left] duration-200 origin-[top_center] data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] z-[1]" data-state="closed" data-orientation="horizontal" style="pointer-events: none;" hidden="">
+      <div data-dismissable-layer="" style="pointer-events: none;" id="reka-navigation-menu-v-0-content-item-1" aria-labelledby="reka-navigation-menu-v-0-trigger-item-1" data-state="closed" data-orientation="horizontal" class="absolute top-0 left-0 w-full max-h-[70vh] overflow-y-auto 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]" hidden="">
+        <ul class="isolate grid p-2 grid-cols-2 gap-2">
+          <li class=""><button type="button" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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 px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-dimmed group-hover:text-default transition-colors"></svg>
+              <div class="min-w-0">
+                <p class="truncate font-medium">Introduction
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Fully styled and customizable components for Nuxt.</p>
+              </div>
+            </button></li>
+          <li class=""><button type="button" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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 px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-dimmed group-hover:text-default transition-colors"></svg>
+              <div class="min-w-0">
+                <p class="truncate font-medium">Installation
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Learn how to install and configure Nuxt UI in your application.</p>
+              </div>
+            </button></li>
+          <li class=""><button type="button" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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 px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-dimmed group-hover:text-default transition-colors"></svg>
+              <div class="min-w-0">
+                <p class="truncate font-medium">Theming
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Learn how to customize the look and feel of the components.</p>
+              </div>
+            </button></li>
+          <li class=""><button type="button" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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 px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-dimmed group-hover:text-default transition-colors"></svg>
+              <div class="min-w-0">
+                <p class="truncate font-medium">Shortcuts
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Learn how to display and define keyboard shortcuts in your app.</p>
+              </div>
+            </button></li>
+        </ul>
+      </div>
+      <div data-dismissable-layer="" style="pointer-events: none;" id="reka-navigation-menu-v-0-content-item-2" aria-labelledby="reka-navigation-menu-v-0-trigger-item-2" data-state="closed" data-orientation="horizontal" class="absolute top-0 left-0 w-full max-h-[70vh] overflow-y-auto 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]" hidden="">
+        <ul class="isolate grid p-2 grid-cols-2 gap-2">
+          <li class=""><a href="/components/link" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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 px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-dimmed group-hover:text-default transition-colors"></svg>
+              <div class="min-w-0">
+                <p class="truncate font-medium">Link
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Use NuxtLink with superpowers.</p>
+              </div>
+            </a></li>
+          <li class=""><a href="/components/modal" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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 px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-dimmed group-hover:text-default transition-colors"></svg>
+              <div class="min-w-0">
+                <p class="truncate font-medium">Modal
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Display a modal within your application.</p>
+              </div>
+            </a></li>
+          <li class=""><a href="/components/navigation-menu" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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 px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-dimmed group-hover:text-default transition-colors"></svg>
+              <div class="min-w-0">
+                <p class="truncate font-medium">NavigationMenu
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Display a list of links.</p>
+              </div>
+            </a></li>
+          <li class=""><a href="/components/pagination" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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 px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-dimmed group-hover:text-default transition-colors"></svg>
+              <div class="min-w-0">
+                <p class="truncate font-medium">Pagination
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Display a list of pages.</p>
+              </div>
+            </a></li>
+          <li class=""><a href="/components/popover" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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 px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-dimmed group-hover:text-default transition-colors"></svg>
+              <div class="min-w-0">
+                <p class="truncate font-medium">Popover
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Display a non-modal dialog that floats around a trigger element.</p>
+              </div>
+            </a></li>
+          <li class=""><a href="/components/progress" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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 px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-dimmed group-hover:text-default transition-colors"></svg>
+              <div class="min-w-0">
+                <p class="truncate font-medium">Progress
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Show a horizontal bar to indicate task progression.</p>
+              </div>
+            </a></li>
+        </ul>
+      </div>
+    </div>
   </div>
 </nav>"
 `;
@@ -440,14 +1221,12 @@ exports[`NavigationMenu > renders with item-trailing slot correctly 1`] = `
       <li data-menu-item="" class="min-w-0 py-2"><button type="button" data-reka-collection-item="" id="reka-navigation-menu-v-0-trigger-item-1" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" aria-controls="reka-navigation-menu-v-0-content-item-1" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-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 px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-muted hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors data-[state=open]:text-highlighted data-[state=open]:before:bg-elevated/50"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5 text-dimmed group-hover:text-default transition-colors group-data-[state=open]:text-default"></svg><span class="truncate">Documentation<!--v-if--></span><span as="span" class="group ms-auto inline-flex gap-1.5 items-center">Item trailing slot</span></button>
         <!--v-if-->
         <!--teleport start-->
-        <!---->
         <!--teleport end-->
         <!--v-if-->
       </li>
       <li data-menu-item="" class="min-w-0 py-2"><button type="button" data-reka-collection-item="" id="reka-navigation-menu-v-0-trigger-item-2" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" aria-controls="reka-navigation-menu-v-0-content-item-2" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-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 px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-primary before:bg-elevated"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5 text-primary group-data-[state=open]:text-primary"></svg><span class="truncate">Components<!--v-if--></span><span as="span" class="group ms-auto inline-flex gap-1.5 items-center">Item trailing slot</span></button>
         <!--v-if-->
         <!--teleport start-->
-        <!---->
         <!--teleport end-->
         <!--v-if-->
       </li>
@@ -469,7 +1248,96 @@ exports[`NavigationMenu > renders with item-trailing slot correctly 1`] = `
   <!--v-if-->
   <div class="absolute top-full left-0 flex w-full justify-center">
     <!--v-if-->
-    <!---->
+    <div class="relative overflow-hidden bg-default shadow-lg rounded-md ring ring-default h-(--reka-navigation-menu-viewport-height) w-full transition-[width,height,left] duration-200 origin-[top_center] data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] z-[1]" data-state="closed" data-orientation="horizontal" style="pointer-events: none;" hidden="">
+      <div data-dismissable-layer="" style="pointer-events: none;" id="reka-navigation-menu-v-0-content-item-1" aria-labelledby="reka-navigation-menu-v-0-trigger-item-1" data-state="closed" data-orientation="horizontal" class="absolute top-0 left-0 w-full max-h-[70vh] overflow-y-auto 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]" hidden="">
+        <ul class="isolate grid p-2 grid-cols-2 gap-2">
+          <li class=""><button type="button" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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 px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-dimmed group-hover:text-default transition-colors"></svg>
+              <div class="min-w-0">
+                <p class="truncate font-medium">Introduction
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Fully styled and customizable components for Nuxt.</p>
+              </div>
+            </button></li>
+          <li class=""><button type="button" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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 px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-dimmed group-hover:text-default transition-colors"></svg>
+              <div class="min-w-0">
+                <p class="truncate font-medium">Installation
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Learn how to install and configure Nuxt UI in your application.</p>
+              </div>
+            </button></li>
+          <li class=""><button type="button" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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 px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-dimmed group-hover:text-default transition-colors"></svg>
+              <div class="min-w-0">
+                <p class="truncate font-medium">Theming
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Learn how to customize the look and feel of the components.</p>
+              </div>
+            </button></li>
+          <li class=""><button type="button" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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 px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-dimmed group-hover:text-default transition-colors"></svg>
+              <div class="min-w-0">
+                <p class="truncate font-medium">Shortcuts
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Learn how to display and define keyboard shortcuts in your app.</p>
+              </div>
+            </button></li>
+        </ul>
+      </div>
+      <div data-dismissable-layer="" style="pointer-events: none;" id="reka-navigation-menu-v-0-content-item-2" aria-labelledby="reka-navigation-menu-v-0-trigger-item-2" data-state="closed" data-orientation="horizontal" class="absolute top-0 left-0 w-full max-h-[70vh] overflow-y-auto 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]" hidden="">
+        <ul class="isolate grid p-2 grid-cols-2 gap-2">
+          <li class=""><a href="/components/link" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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 px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-dimmed group-hover:text-default transition-colors"></svg>
+              <div class="min-w-0">
+                <p class="truncate font-medium">Link
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Use NuxtLink with superpowers.</p>
+              </div>
+            </a></li>
+          <li class=""><a href="/components/modal" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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 px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-dimmed group-hover:text-default transition-colors"></svg>
+              <div class="min-w-0">
+                <p class="truncate font-medium">Modal
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Display a modal within your application.</p>
+              </div>
+            </a></li>
+          <li class=""><a href="/components/navigation-menu" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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 px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-dimmed group-hover:text-default transition-colors"></svg>
+              <div class="min-w-0">
+                <p class="truncate font-medium">NavigationMenu
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Display a list of links.</p>
+              </div>
+            </a></li>
+          <li class=""><a href="/components/pagination" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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 px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-dimmed group-hover:text-default transition-colors"></svg>
+              <div class="min-w-0">
+                <p class="truncate font-medium">Pagination
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Display a list of pages.</p>
+              </div>
+            </a></li>
+          <li class=""><a href="/components/popover" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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 px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-dimmed group-hover:text-default transition-colors"></svg>
+              <div class="min-w-0">
+                <p class="truncate font-medium">Popover
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Display a non-modal dialog that floats around a trigger element.</p>
+              </div>
+            </a></li>
+          <li class=""><a href="/components/progress" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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 px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-dimmed group-hover:text-default transition-colors"></svg>
+              <div class="min-w-0">
+                <p class="truncate font-medium">Progress
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Show a horizontal bar to indicate task progression.</p>
+              </div>
+            </a></li>
+        </ul>
+      </div>
+    </div>
   </div>
 </nav>"
 `;
@@ -484,14 +1352,12 @@ exports[`NavigationMenu > renders with items correctly 1`] = `
         </button>
         <!--v-if-->
         <!--teleport start-->
-        <!---->
         <!--teleport end-->
         <!--v-if-->
       </li>
       <li data-menu-item="" class="min-w-0 py-2"><button type="button" data-reka-collection-item="" id="reka-navigation-menu-v-0-trigger-item-2" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" aria-controls="reka-navigation-menu-v-0-content-item-2" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-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 px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-primary before:bg-elevated"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5 text-primary group-data-[state=open]:text-primary"></svg><span class="truncate">Components<!--v-if--></span><span as="span" class="group ms-auto inline-flex gap-1.5 items-center"><!--v-if--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200"></svg></span></button>
         <!--v-if-->
         <!--teleport start-->
-        <!---->
         <!--teleport end-->
         <!--v-if-->
       </li>
@@ -517,7 +1383,96 @@ exports[`NavigationMenu > renders with items correctly 1`] = `
   <!--v-if-->
   <div class="absolute top-full left-0 flex w-full justify-center">
     <!--v-if-->
-    <!---->
+    <div class="relative overflow-hidden bg-default shadow-lg rounded-md ring ring-default h-(--reka-navigation-menu-viewport-height) w-full transition-[width,height,left] duration-200 origin-[top_center] data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] z-[1]" data-state="closed" data-orientation="horizontal" style="pointer-events: none;" hidden="">
+      <div data-dismissable-layer="" style="pointer-events: none;" id="reka-navigation-menu-v-0-content-item-1" aria-labelledby="reka-navigation-menu-v-0-trigger-item-1" data-state="closed" data-orientation="horizontal" class="absolute top-0 left-0 w-full max-h-[70vh] overflow-y-auto 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]" hidden="">
+        <ul class="isolate grid p-2 grid-cols-2 gap-2">
+          <li class=""><button type="button" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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 px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-dimmed group-hover:text-default transition-colors"></svg>
+              <div class="min-w-0">
+                <p class="truncate font-medium">Introduction
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Fully styled and customizable components for Nuxt.</p>
+              </div>
+            </button></li>
+          <li class=""><button type="button" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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 px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-dimmed group-hover:text-default transition-colors"></svg>
+              <div class="min-w-0">
+                <p class="truncate font-medium">Installation
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Learn how to install and configure Nuxt UI in your application.</p>
+              </div>
+            </button></li>
+          <li class=""><button type="button" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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 px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-dimmed group-hover:text-default transition-colors"></svg>
+              <div class="min-w-0">
+                <p class="truncate font-medium">Theming
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Learn how to customize the look and feel of the components.</p>
+              </div>
+            </button></li>
+          <li class=""><button type="button" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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 px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-dimmed group-hover:text-default transition-colors"></svg>
+              <div class="min-w-0">
+                <p class="truncate font-medium">Shortcuts
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Learn how to display and define keyboard shortcuts in your app.</p>
+              </div>
+            </button></li>
+        </ul>
+      </div>
+      <div data-dismissable-layer="" style="pointer-events: none;" id="reka-navigation-menu-v-0-content-item-2" aria-labelledby="reka-navigation-menu-v-0-trigger-item-2" data-state="closed" data-orientation="horizontal" class="absolute top-0 left-0 w-full max-h-[70vh] overflow-y-auto 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]" hidden="">
+        <ul class="isolate grid p-2 grid-cols-2 gap-2">
+          <li class=""><a href="/components/link" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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 px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-dimmed group-hover:text-default transition-colors"></svg>
+              <div class="min-w-0">
+                <p class="truncate font-medium">Link
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Use NuxtLink with superpowers.</p>
+              </div>
+            </a></li>
+          <li class=""><a href="/components/modal" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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 px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-dimmed group-hover:text-default transition-colors"></svg>
+              <div class="min-w-0">
+                <p class="truncate font-medium">Modal
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Display a modal within your application.</p>
+              </div>
+            </a></li>
+          <li class=""><a href="/components/navigation-menu" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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 px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-dimmed group-hover:text-default transition-colors"></svg>
+              <div class="min-w-0">
+                <p class="truncate font-medium">NavigationMenu
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Display a list of links.</p>
+              </div>
+            </a></li>
+          <li class=""><a href="/components/pagination" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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 px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-dimmed group-hover:text-default transition-colors"></svg>
+              <div class="min-w-0">
+                <p class="truncate font-medium">Pagination
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Display a list of pages.</p>
+              </div>
+            </a></li>
+          <li class=""><a href="/components/popover" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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 px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-dimmed group-hover:text-default transition-colors"></svg>
+              <div class="min-w-0">
+                <p class="truncate font-medium">Popover
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Display a non-modal dialog that floats around a trigger element.</p>
+              </div>
+            </a></li>
+          <li class=""><a href="/components/progress" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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 px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-dimmed group-hover:text-default transition-colors"></svg>
+              <div class="min-w-0">
+                <p class="truncate font-medium">Progress
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Show a horizontal bar to indicate task progression.</p>
+              </div>
+            </a></li>
+        </ul>
+      </div>
+    </div>
   </div>
 </nav>"
 `;
@@ -532,14 +1487,12 @@ exports[`NavigationMenu > renders with labelKey correctly 1`] = `
         </button>
         <!--v-if-->
         <!--teleport start-->
-        <!---->
         <!--teleport end-->
         <!--v-if-->
       </li>
       <li data-menu-item="" class="min-w-0 py-2"><button type="button" data-reka-collection-item="" id="reka-navigation-menu-v-0-trigger-item-2" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" aria-controls="reka-navigation-menu-v-0-content-item-2" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-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 px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-primary before:bg-elevated"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5 text-primary group-data-[state=open]:text-primary"></svg><span class="truncate">i-lucide-box<!--v-if--></span><span as="span" class="group ms-auto inline-flex gap-1.5 items-center"><!--v-if--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200"></svg></span></button>
         <!--v-if-->
         <!--teleport start-->
-        <!---->
         <!--teleport end-->
         <!--v-if-->
       </li>
@@ -565,7 +1518,96 @@ exports[`NavigationMenu > renders with labelKey correctly 1`] = `
   <!--v-if-->
   <div class="absolute top-full left-0 flex w-full justify-center">
     <!--v-if-->
-    <!---->
+    <div class="relative overflow-hidden bg-default shadow-lg rounded-md ring ring-default h-(--reka-navigation-menu-viewport-height) w-full transition-[width,height,left] duration-200 origin-[top_center] data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] z-[1]" data-state="closed" data-orientation="horizontal" style="pointer-events: none;" hidden="">
+      <div data-dismissable-layer="" style="pointer-events: none;" id="reka-navigation-menu-v-0-content-item-1" aria-labelledby="reka-navigation-menu-v-0-trigger-item-1" data-state="closed" data-orientation="horizontal" class="absolute top-0 left-0 w-full max-h-[70vh] overflow-y-auto 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]" hidden="">
+        <ul class="isolate grid p-2 grid-cols-2 gap-2">
+          <li class=""><button type="button" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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 px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-dimmed group-hover:text-default transition-colors"></svg>
+              <div class="min-w-0">
+                <p class="truncate font-medium">i-lucide-house
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Fully styled and customizable components for Nuxt.</p>
+              </div>
+            </button></li>
+          <li class=""><button type="button" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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 px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-dimmed group-hover:text-default transition-colors"></svg>
+              <div class="min-w-0">
+                <p class="truncate font-medium">i-lucide-cloud-download
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Learn how to install and configure Nuxt UI in your application.</p>
+              </div>
+            </button></li>
+          <li class=""><button type="button" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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 px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-dimmed group-hover:text-default transition-colors"></svg>
+              <div class="min-w-0">
+                <p class="truncate font-medium">i-lucide-swatch-book
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Learn how to customize the look and feel of the components.</p>
+              </div>
+            </button></li>
+          <li class=""><button type="button" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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 px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-dimmed group-hover:text-default transition-colors"></svg>
+              <div class="min-w-0">
+                <p class="truncate font-medium">i-lucide-monitor
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Learn how to display and define keyboard shortcuts in your app.</p>
+              </div>
+            </button></li>
+        </ul>
+      </div>
+      <div data-dismissable-layer="" style="pointer-events: none;" id="reka-navigation-menu-v-0-content-item-2" aria-labelledby="reka-navigation-menu-v-0-trigger-item-2" data-state="closed" data-orientation="horizontal" class="absolute top-0 left-0 w-full max-h-[70vh] overflow-y-auto 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]" hidden="">
+        <ul class="isolate grid p-2 grid-cols-2 gap-2">
+          <li class=""><a href="/components/link" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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 px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-dimmed group-hover:text-default transition-colors"></svg>
+              <div class="min-w-0">
+                <p class="truncate font-medium">i-lucide-file
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Use NuxtLink with superpowers.</p>
+              </div>
+            </a></li>
+          <li class=""><a href="/components/modal" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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 px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-dimmed group-hover:text-default transition-colors"></svg>
+              <div class="min-w-0">
+                <p class="truncate font-medium">i-lucide-file
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Display a modal within your application.</p>
+              </div>
+            </a></li>
+          <li class=""><a href="/components/navigation-menu" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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 px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-dimmed group-hover:text-default transition-colors"></svg>
+              <div class="min-w-0">
+                <p class="truncate font-medium">i-lucide-file
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Display a list of links.</p>
+              </div>
+            </a></li>
+          <li class=""><a href="/components/pagination" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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 px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-dimmed group-hover:text-default transition-colors"></svg>
+              <div class="min-w-0">
+                <p class="truncate font-medium">i-lucide-file
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Display a list of pages.</p>
+              </div>
+            </a></li>
+          <li class=""><a href="/components/popover" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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 px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-dimmed group-hover:text-default transition-colors"></svg>
+              <div class="min-w-0">
+                <p class="truncate font-medium">i-lucide-file
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Display a non-modal dialog that floats around a trigger element.</p>
+              </div>
+            </a></li>
+          <li class=""><a href="/components/progress" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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 px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-dimmed group-hover:text-default transition-colors"></svg>
+              <div class="min-w-0">
+                <p class="truncate font-medium">i-lucide-file
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Show a horizontal bar to indicate task progression.</p>
+              </div>
+            </a></li>
+        </ul>
+      </div>
+    </div>
   </div>
 </nav>"
 `;
@@ -612,8 +1654,94 @@ exports[`NavigationMenu > renders with modelValue correctly 1`] = `
   <div class="absolute top-full left-0 flex w-full justify-center">
     <!--v-if-->
     <div class="relative overflow-hidden bg-default shadow-lg rounded-md ring ring-default h-(--reka-navigation-menu-viewport-height) w-full transition-[width,height,left] duration-200 origin-[top_center] data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] z-[1]" data-state="open" data-orientation="horizontal">
-      <!---->
-      <!---->
+      <div data-dismissable-layer="" style="pointer-events: none;" id="reka-navigation-menu-v-0-content-item-1" aria-labelledby="reka-navigation-menu-v-0-trigger-item-1" data-state="closed" data-orientation="horizontal" class="absolute top-0 left-0 w-full max-h-[70vh] overflow-y-auto 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]" hidden="">
+        <ul class="isolate grid p-2 grid-cols-2 gap-2">
+          <li class=""><button type="button" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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 px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-dimmed group-hover:text-default transition-colors"></svg>
+              <div class="min-w-0">
+                <p class="truncate font-medium">Introduction
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Fully styled and customizable components for Nuxt.</p>
+              </div>
+            </button></li>
+          <li class=""><button type="button" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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 px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-dimmed group-hover:text-default transition-colors"></svg>
+              <div class="min-w-0">
+                <p class="truncate font-medium">Installation
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Learn how to install and configure Nuxt UI in your application.</p>
+              </div>
+            </button></li>
+          <li class=""><button type="button" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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 px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-dimmed group-hover:text-default transition-colors"></svg>
+              <div class="min-w-0">
+                <p class="truncate font-medium">Theming
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Learn how to customize the look and feel of the components.</p>
+              </div>
+            </button></li>
+          <li class=""><button type="button" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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 px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-dimmed group-hover:text-default transition-colors"></svg>
+              <div class="min-w-0">
+                <p class="truncate font-medium">Shortcuts
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Learn how to display and define keyboard shortcuts in your app.</p>
+              </div>
+            </button></li>
+        </ul>
+      </div>
+      <div data-dismissable-layer="" style="pointer-events: none;" id="reka-navigation-menu-v-0-content-item-2" aria-labelledby="reka-navigation-menu-v-0-trigger-item-2" data-state="closed" data-orientation="horizontal" class="absolute top-0 left-0 w-full max-h-[70vh] overflow-y-auto 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]" hidden="">
+        <ul class="isolate grid p-2 grid-cols-2 gap-2">
+          <li class=""><a href="/components/link" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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 px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-dimmed group-hover:text-default transition-colors"></svg>
+              <div class="min-w-0">
+                <p class="truncate font-medium">Link
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Use NuxtLink with superpowers.</p>
+              </div>
+            </a></li>
+          <li class=""><a href="/components/modal" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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 px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-dimmed group-hover:text-default transition-colors"></svg>
+              <div class="min-w-0">
+                <p class="truncate font-medium">Modal
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Display a modal within your application.</p>
+              </div>
+            </a></li>
+          <li class=""><a href="/components/navigation-menu" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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 px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-dimmed group-hover:text-default transition-colors"></svg>
+              <div class="min-w-0">
+                <p class="truncate font-medium">NavigationMenu
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Display a list of links.</p>
+              </div>
+            </a></li>
+          <li class=""><a href="/components/pagination" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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 px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-dimmed group-hover:text-default transition-colors"></svg>
+              <div class="min-w-0">
+                <p class="truncate font-medium">Pagination
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Display a list of pages.</p>
+              </div>
+            </a></li>
+          <li class=""><a href="/components/popover" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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 px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-dimmed group-hover:text-default transition-colors"></svg>
+              <div class="min-w-0">
+                <p class="truncate font-medium">Popover
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Display a non-modal dialog that floats around a trigger element.</p>
+              </div>
+            </a></li>
+          <li class=""><a href="/components/progress" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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 px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-dimmed group-hover:text-default transition-colors"></svg>
+              <div class="min-w-0">
+                <p class="truncate font-medium">Progress
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Show a horizontal bar to indicate task progression.</p>
+              </div>
+            </a></li>
+        </ul>
+      </div>
     </div>
   </div>
 </nav>"
@@ -629,14 +1757,12 @@ exports[`NavigationMenu > renders with neutral variant link correctly 1`] = `
         </button>
         <!--v-if-->
         <!--teleport start-->
-        <!---->
         <!--teleport end-->
         <!--v-if-->
       </li>
       <li data-menu-item="" class="min-w-0 py-2"><button type="button" data-reka-collection-item="" id="reka-navigation-menu-v-0-trigger-item-2" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" aria-controls="reka-navigation-menu-v-0-content-item-2" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-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-inverted px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-highlighted"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5 text-highlighted group-data-[state=open]:text-highlighted"></svg><span class="truncate">Components<!--v-if--></span><span as="span" class="group ms-auto inline-flex gap-1.5 items-center"><!--v-if--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200"></svg></span></button>
         <!--v-if-->
         <!--teleport start-->
-        <!---->
         <!--teleport end-->
         <!--v-if-->
       </li>
@@ -662,7 +1788,96 @@ exports[`NavigationMenu > renders with neutral variant link correctly 1`] = `
   <!--v-if-->
   <div class="absolute top-full left-0 flex w-full justify-center">
     <!--v-if-->
-    <!---->
+    <div class="relative overflow-hidden bg-default shadow-lg rounded-md ring ring-default h-(--reka-navigation-menu-viewport-height) w-full transition-[width,height,left] duration-200 origin-[top_center] data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] z-[1]" data-state="closed" data-orientation="horizontal" style="pointer-events: none;" hidden="">
+      <div data-dismissable-layer="" style="pointer-events: none;" id="reka-navigation-menu-v-0-content-item-1" aria-labelledby="reka-navigation-menu-v-0-trigger-item-1" data-state="closed" data-orientation="horizontal" class="absolute top-0 left-0 w-full max-h-[70vh] overflow-y-auto 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]" hidden="">
+        <ul class="isolate grid p-2 grid-cols-2 gap-2">
+          <li class=""><button type="button" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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-inverted px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-dimmed group-hover:text-default transition-colors"></svg>
+              <div class="min-w-0">
+                <p class="truncate font-medium">Introduction
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Fully styled and customizable components for Nuxt.</p>
+              </div>
+            </button></li>
+          <li class=""><button type="button" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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-inverted px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-dimmed group-hover:text-default transition-colors"></svg>
+              <div class="min-w-0">
+                <p class="truncate font-medium">Installation
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Learn how to install and configure Nuxt UI in your application.</p>
+              </div>
+            </button></li>
+          <li class=""><button type="button" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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-inverted px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-dimmed group-hover:text-default transition-colors"></svg>
+              <div class="min-w-0">
+                <p class="truncate font-medium">Theming
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Learn how to customize the look and feel of the components.</p>
+              </div>
+            </button></li>
+          <li class=""><button type="button" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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-inverted px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-dimmed group-hover:text-default transition-colors"></svg>
+              <div class="min-w-0">
+                <p class="truncate font-medium">Shortcuts
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Learn how to display and define keyboard shortcuts in your app.</p>
+              </div>
+            </button></li>
+        </ul>
+      </div>
+      <div data-dismissable-layer="" style="pointer-events: none;" id="reka-navigation-menu-v-0-content-item-2" aria-labelledby="reka-navigation-menu-v-0-trigger-item-2" data-state="closed" data-orientation="horizontal" class="absolute top-0 left-0 w-full max-h-[70vh] overflow-y-auto 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]" hidden="">
+        <ul class="isolate grid p-2 grid-cols-2 gap-2">
+          <li class=""><a href="/components/link" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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-inverted px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-dimmed group-hover:text-default transition-colors"></svg>
+              <div class="min-w-0">
+                <p class="truncate font-medium">Link
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Use NuxtLink with superpowers.</p>
+              </div>
+            </a></li>
+          <li class=""><a href="/components/modal" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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-inverted px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-dimmed group-hover:text-default transition-colors"></svg>
+              <div class="min-w-0">
+                <p class="truncate font-medium">Modal
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Display a modal within your application.</p>
+              </div>
+            </a></li>
+          <li class=""><a href="/components/navigation-menu" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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-inverted px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-dimmed group-hover:text-default transition-colors"></svg>
+              <div class="min-w-0">
+                <p class="truncate font-medium">NavigationMenu
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Display a list of links.</p>
+              </div>
+            </a></li>
+          <li class=""><a href="/components/pagination" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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-inverted px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-dimmed group-hover:text-default transition-colors"></svg>
+              <div class="min-w-0">
+                <p class="truncate font-medium">Pagination
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Display a list of pages.</p>
+              </div>
+            </a></li>
+          <li class=""><a href="/components/popover" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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-inverted px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-dimmed group-hover:text-default transition-colors"></svg>
+              <div class="min-w-0">
+                <p class="truncate font-medium">Popover
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Display a non-modal dialog that floats around a trigger element.</p>
+              </div>
+            </a></li>
+          <li class=""><a href="/components/progress" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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-inverted px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-dimmed group-hover:text-default transition-colors"></svg>
+              <div class="min-w-0">
+                <p class="truncate font-medium">Progress
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Show a horizontal bar to indicate task progression.</p>
+              </div>
+            </a></li>
+        </ul>
+      </div>
+    </div>
   </div>
 </nav>"
 `;
@@ -677,14 +1892,12 @@ exports[`NavigationMenu > renders with neutral variant link highlight correctly
         </button>
         <!--v-if-->
         <!--teleport start-->
-        <!---->
         <!--teleport end-->
         <!--v-if-->
       </li>
       <li data-menu-item="" class="min-w-0 py-2"><button type="button" data-reka-collection-item="" id="reka-navigation-menu-v-0-trigger-item-2" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" aria-controls="reka-navigation-menu-v-0-content-item-2" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-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-inverted px-2.5 py-1.5 before:inset-x-px before:inset-y-0 after:absolute after:-bottom-2 after:inset-x-2.5 after:block after:h-px after:rounded-full after:transition-colors text-highlighted after:bg-inverted"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5 text-highlighted group-data-[state=open]:text-highlighted"></svg><span class="truncate">Components<!--v-if--></span><span as="span" class="group ms-auto inline-flex gap-1.5 items-center"><!--v-if--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200"></svg></span></button>
         <!--v-if-->
         <!--teleport start-->
-        <!---->
         <!--teleport end-->
         <!--v-if-->
       </li>
@@ -710,7 +1923,96 @@ exports[`NavigationMenu > renders with neutral variant link highlight correctly
   <!--v-if-->
   <div class="absolute top-full left-0 flex w-full justify-center">
     <!--v-if-->
-    <!---->
+    <div class="relative overflow-hidden bg-default shadow-lg rounded-md ring ring-default h-(--reka-navigation-menu-viewport-height) w-full transition-[width,height,left] duration-200 origin-[top_center] data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] z-[1]" data-state="closed" data-orientation="horizontal" style="pointer-events: none;" hidden="">
+      <div data-dismissable-layer="" style="pointer-events: none;" id="reka-navigation-menu-v-0-content-item-1" aria-labelledby="reka-navigation-menu-v-0-trigger-item-1" data-state="closed" data-orientation="horizontal" class="absolute top-0 left-0 w-full max-h-[70vh] overflow-y-auto 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]" hidden="">
+        <ul class="isolate grid p-2 grid-cols-2 gap-2">
+          <li class=""><button type="button" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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-inverted px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-dimmed group-hover:text-default transition-colors"></svg>
+              <div class="min-w-0">
+                <p class="truncate font-medium">Introduction
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Fully styled and customizable components for Nuxt.</p>
+              </div>
+            </button></li>
+          <li class=""><button type="button" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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-inverted px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-dimmed group-hover:text-default transition-colors"></svg>
+              <div class="min-w-0">
+                <p class="truncate font-medium">Installation
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Learn how to install and configure Nuxt UI in your application.</p>
+              </div>
+            </button></li>
+          <li class=""><button type="button" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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-inverted px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-dimmed group-hover:text-default transition-colors"></svg>
+              <div class="min-w-0">
+                <p class="truncate font-medium">Theming
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Learn how to customize the look and feel of the components.</p>
+              </div>
+            </button></li>
+          <li class=""><button type="button" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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-inverted px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-dimmed group-hover:text-default transition-colors"></svg>
+              <div class="min-w-0">
+                <p class="truncate font-medium">Shortcuts
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Learn how to display and define keyboard shortcuts in your app.</p>
+              </div>
+            </button></li>
+        </ul>
+      </div>
+      <div data-dismissable-layer="" style="pointer-events: none;" id="reka-navigation-menu-v-0-content-item-2" aria-labelledby="reka-navigation-menu-v-0-trigger-item-2" data-state="closed" data-orientation="horizontal" class="absolute top-0 left-0 w-full max-h-[70vh] overflow-y-auto 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]" hidden="">
+        <ul class="isolate grid p-2 grid-cols-2 gap-2">
+          <li class=""><a href="/components/link" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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-inverted px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-dimmed group-hover:text-default transition-colors"></svg>
+              <div class="min-w-0">
+                <p class="truncate font-medium">Link
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Use NuxtLink with superpowers.</p>
+              </div>
+            </a></li>
+          <li class=""><a href="/components/modal" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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-inverted px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-dimmed group-hover:text-default transition-colors"></svg>
+              <div class="min-w-0">
+                <p class="truncate font-medium">Modal
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Display a modal within your application.</p>
+              </div>
+            </a></li>
+          <li class=""><a href="/components/navigation-menu" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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-inverted px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-dimmed group-hover:text-default transition-colors"></svg>
+              <div class="min-w-0">
+                <p class="truncate font-medium">NavigationMenu
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Display a list of links.</p>
+              </div>
+            </a></li>
+          <li class=""><a href="/components/pagination" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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-inverted px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-dimmed group-hover:text-default transition-colors"></svg>
+              <div class="min-w-0">
+                <p class="truncate font-medium">Pagination
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Display a list of pages.</p>
+              </div>
+            </a></li>
+          <li class=""><a href="/components/popover" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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-inverted px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-dimmed group-hover:text-default transition-colors"></svg>
+              <div class="min-w-0">
+                <p class="truncate font-medium">Popover
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Display a non-modal dialog that floats around a trigger element.</p>
+              </div>
+            </a></li>
+          <li class=""><a href="/components/progress" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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-inverted px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-dimmed group-hover:text-default transition-colors"></svg>
+              <div class="min-w-0">
+                <p class="truncate font-medium">Progress
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Show a horizontal bar to indicate task progression.</p>
+              </div>
+            </a></li>
+        </ul>
+      </div>
+    </div>
   </div>
 </nav>"
 `;
@@ -725,14 +2027,12 @@ exports[`NavigationMenu > renders with neutral variant link highlight neutral co
         </button>
         <!--v-if-->
         <!--teleport start-->
-        <!---->
         <!--teleport end-->
         <!--v-if-->
       </li>
       <li data-menu-item="" class="min-w-0 py-2"><button type="button" data-reka-collection-item="" id="reka-navigation-menu-v-0-trigger-item-2" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" aria-controls="reka-navigation-menu-v-0-content-item-2" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-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-inverted px-2.5 py-1.5 before:inset-x-px before:inset-y-0 after:absolute after:-bottom-2 after:inset-x-2.5 after:block after:h-px after:rounded-full after:transition-colors text-highlighted after:bg-inverted"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5 text-highlighted group-data-[state=open]:text-highlighted"></svg><span class="truncate">Components<!--v-if--></span><span as="span" class="group ms-auto inline-flex gap-1.5 items-center"><!--v-if--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200"></svg></span></button>
         <!--v-if-->
         <!--teleport start-->
-        <!---->
         <!--teleport end-->
         <!--v-if-->
       </li>
@@ -758,7 +2058,96 @@ exports[`NavigationMenu > renders with neutral variant link highlight neutral co
   <!--v-if-->
   <div class="absolute top-full left-0 flex w-full justify-center">
     <!--v-if-->
-    <!---->
+    <div class="relative overflow-hidden bg-default shadow-lg rounded-md ring ring-default h-(--reka-navigation-menu-viewport-height) w-full transition-[width,height,left] duration-200 origin-[top_center] data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] z-[1]" data-state="closed" data-orientation="horizontal" style="pointer-events: none;" hidden="">
+      <div data-dismissable-layer="" style="pointer-events: none;" id="reka-navigation-menu-v-0-content-item-1" aria-labelledby="reka-navigation-menu-v-0-trigger-item-1" data-state="closed" data-orientation="horizontal" class="absolute top-0 left-0 w-full max-h-[70vh] overflow-y-auto 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]" hidden="">
+        <ul class="isolate grid p-2 grid-cols-2 gap-2">
+          <li class=""><button type="button" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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-inverted px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-dimmed group-hover:text-default transition-colors"></svg>
+              <div class="min-w-0">
+                <p class="truncate font-medium">Introduction
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Fully styled and customizable components for Nuxt.</p>
+              </div>
+            </button></li>
+          <li class=""><button type="button" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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-inverted px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-dimmed group-hover:text-default transition-colors"></svg>
+              <div class="min-w-0">
+                <p class="truncate font-medium">Installation
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Learn how to install and configure Nuxt UI in your application.</p>
+              </div>
+            </button></li>
+          <li class=""><button type="button" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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-inverted px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-dimmed group-hover:text-default transition-colors"></svg>
+              <div class="min-w-0">
+                <p class="truncate font-medium">Theming
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Learn how to customize the look and feel of the components.</p>
+              </div>
+            </button></li>
+          <li class=""><button type="button" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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-inverted px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-dimmed group-hover:text-default transition-colors"></svg>
+              <div class="min-w-0">
+                <p class="truncate font-medium">Shortcuts
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Learn how to display and define keyboard shortcuts in your app.</p>
+              </div>
+            </button></li>
+        </ul>
+      </div>
+      <div data-dismissable-layer="" style="pointer-events: none;" id="reka-navigation-menu-v-0-content-item-2" aria-labelledby="reka-navigation-menu-v-0-trigger-item-2" data-state="closed" data-orientation="horizontal" class="absolute top-0 left-0 w-full max-h-[70vh] overflow-y-auto 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]" hidden="">
+        <ul class="isolate grid p-2 grid-cols-2 gap-2">
+          <li class=""><a href="/components/link" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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-inverted px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-dimmed group-hover:text-default transition-colors"></svg>
+              <div class="min-w-0">
+                <p class="truncate font-medium">Link
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Use NuxtLink with superpowers.</p>
+              </div>
+            </a></li>
+          <li class=""><a href="/components/modal" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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-inverted px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-dimmed group-hover:text-default transition-colors"></svg>
+              <div class="min-w-0">
+                <p class="truncate font-medium">Modal
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Display a modal within your application.</p>
+              </div>
+            </a></li>
+          <li class=""><a href="/components/navigation-menu" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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-inverted px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-dimmed group-hover:text-default transition-colors"></svg>
+              <div class="min-w-0">
+                <p class="truncate font-medium">NavigationMenu
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Display a list of links.</p>
+              </div>
+            </a></li>
+          <li class=""><a href="/components/pagination" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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-inverted px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-dimmed group-hover:text-default transition-colors"></svg>
+              <div class="min-w-0">
+                <p class="truncate font-medium">Pagination
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Display a list of pages.</p>
+              </div>
+            </a></li>
+          <li class=""><a href="/components/popover" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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-inverted px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-dimmed group-hover:text-default transition-colors"></svg>
+              <div class="min-w-0">
+                <p class="truncate font-medium">Popover
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Display a non-modal dialog that floats around a trigger element.</p>
+              </div>
+            </a></li>
+          <li class=""><a href="/components/progress" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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-inverted px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-dimmed group-hover:text-default transition-colors"></svg>
+              <div class="min-w-0">
+                <p class="truncate font-medium">Progress
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Show a horizontal bar to indicate task progression.</p>
+              </div>
+            </a></li>
+        </ul>
+      </div>
+    </div>
   </div>
 </nav>"
 `;
@@ -773,14 +2162,12 @@ exports[`NavigationMenu > renders with neutral variant pill correctly 1`] = `
         </button>
         <!--v-if-->
         <!--teleport start-->
-        <!---->
         <!--teleport end-->
         <!--v-if-->
       </li>
       <li data-menu-item="" class="min-w-0 py-2"><button type="button" data-reka-collection-item="" id="reka-navigation-menu-v-0-trigger-item-2" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" aria-controls="reka-navigation-menu-v-0-content-item-2" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-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-inverted px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-highlighted before:bg-elevated"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5 text-highlighted group-data-[state=open]:text-highlighted"></svg><span class="truncate">Components<!--v-if--></span><span as="span" class="group ms-auto inline-flex gap-1.5 items-center"><!--v-if--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200"></svg></span></button>
         <!--v-if-->
         <!--teleport start-->
-        <!---->
         <!--teleport end-->
         <!--v-if-->
       </li>
@@ -806,7 +2193,96 @@ exports[`NavigationMenu > renders with neutral variant pill correctly 1`] = `
   <!--v-if-->
   <div class="absolute top-full left-0 flex w-full justify-center">
     <!--v-if-->
-    <!---->
+    <div class="relative overflow-hidden bg-default shadow-lg rounded-md ring ring-default h-(--reka-navigation-menu-viewport-height) w-full transition-[width,height,left] duration-200 origin-[top_center] data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] z-[1]" data-state="closed" data-orientation="horizontal" style="pointer-events: none;" hidden="">
+      <div data-dismissable-layer="" style="pointer-events: none;" id="reka-navigation-menu-v-0-content-item-1" aria-labelledby="reka-navigation-menu-v-0-trigger-item-1" data-state="closed" data-orientation="horizontal" class="absolute top-0 left-0 w-full max-h-[70vh] overflow-y-auto 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]" hidden="">
+        <ul class="isolate grid p-2 grid-cols-2 gap-2">
+          <li class=""><button type="button" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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-inverted px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-dimmed group-hover:text-default transition-colors"></svg>
+              <div class="min-w-0">
+                <p class="truncate font-medium">Introduction
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Fully styled and customizable components for Nuxt.</p>
+              </div>
+            </button></li>
+          <li class=""><button type="button" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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-inverted px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-dimmed group-hover:text-default transition-colors"></svg>
+              <div class="min-w-0">
+                <p class="truncate font-medium">Installation
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Learn how to install and configure Nuxt UI in your application.</p>
+              </div>
+            </button></li>
+          <li class=""><button type="button" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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-inverted px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-dimmed group-hover:text-default transition-colors"></svg>
+              <div class="min-w-0">
+                <p class="truncate font-medium">Theming
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Learn how to customize the look and feel of the components.</p>
+              </div>
+            </button></li>
+          <li class=""><button type="button" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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-inverted px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-dimmed group-hover:text-default transition-colors"></svg>
+              <div class="min-w-0">
+                <p class="truncate font-medium">Shortcuts
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Learn how to display and define keyboard shortcuts in your app.</p>
+              </div>
+            </button></li>
+        </ul>
+      </div>
+      <div data-dismissable-layer="" style="pointer-events: none;" id="reka-navigation-menu-v-0-content-item-2" aria-labelledby="reka-navigation-menu-v-0-trigger-item-2" data-state="closed" data-orientation="horizontal" class="absolute top-0 left-0 w-full max-h-[70vh] overflow-y-auto 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]" hidden="">
+        <ul class="isolate grid p-2 grid-cols-2 gap-2">
+          <li class=""><a href="/components/link" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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-inverted px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-dimmed group-hover:text-default transition-colors"></svg>
+              <div class="min-w-0">
+                <p class="truncate font-medium">Link
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Use NuxtLink with superpowers.</p>
+              </div>
+            </a></li>
+          <li class=""><a href="/components/modal" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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-inverted px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-dimmed group-hover:text-default transition-colors"></svg>
+              <div class="min-w-0">
+                <p class="truncate font-medium">Modal
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Display a modal within your application.</p>
+              </div>
+            </a></li>
+          <li class=""><a href="/components/navigation-menu" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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-inverted px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-dimmed group-hover:text-default transition-colors"></svg>
+              <div class="min-w-0">
+                <p class="truncate font-medium">NavigationMenu
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Display a list of links.</p>
+              </div>
+            </a></li>
+          <li class=""><a href="/components/pagination" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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-inverted px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-dimmed group-hover:text-default transition-colors"></svg>
+              <div class="min-w-0">
+                <p class="truncate font-medium">Pagination
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Display a list of pages.</p>
+              </div>
+            </a></li>
+          <li class=""><a href="/components/popover" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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-inverted px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-dimmed group-hover:text-default transition-colors"></svg>
+              <div class="min-w-0">
+                <p class="truncate font-medium">Popover
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Display a non-modal dialog that floats around a trigger element.</p>
+              </div>
+            </a></li>
+          <li class=""><a href="/components/progress" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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-inverted px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-dimmed group-hover:text-default transition-colors"></svg>
+              <div class="min-w-0">
+                <p class="truncate font-medium">Progress
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Show a horizontal bar to indicate task progression.</p>
+              </div>
+            </a></li>
+        </ul>
+      </div>
+    </div>
   </div>
 </nav>"
 `;
@@ -821,14 +2297,12 @@ exports[`NavigationMenu > renders with neutral variant pill highlight correctly
         </button>
         <!--v-if-->
         <!--teleport start-->
-        <!---->
         <!--teleport end-->
         <!--v-if-->
       </li>
       <li data-menu-item="" class="min-w-0 py-2"><button type="button" data-reka-collection-item="" id="reka-navigation-menu-v-0-trigger-item-2" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" aria-controls="reka-navigation-menu-v-0-content-item-2" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-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-inverted px-2.5 py-1.5 before:inset-x-px before:inset-y-0 after:absolute after:-bottom-2 after:inset-x-2.5 after:block after:h-px after:rounded-full after:transition-colors data-[state=open]:before:bg-elevated/50 text-highlighted hover:before:bg-elevated/50 before:transition-colors after:bg-inverted"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5 text-highlighted group-data-[state=open]:text-highlighted"></svg><span class="truncate">Components<!--v-if--></span><span as="span" class="group ms-auto inline-flex gap-1.5 items-center"><!--v-if--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200"></svg></span></button>
         <!--v-if-->
         <!--teleport start-->
-        <!---->
         <!--teleport end-->
         <!--v-if-->
       </li>
@@ -854,7 +2328,96 @@ exports[`NavigationMenu > renders with neutral variant pill highlight correctly
   <!--v-if-->
   <div class="absolute top-full left-0 flex w-full justify-center">
     <!--v-if-->
-    <!---->
+    <div class="relative overflow-hidden bg-default shadow-lg rounded-md ring ring-default h-(--reka-navigation-menu-viewport-height) w-full transition-[width,height,left] duration-200 origin-[top_center] data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] z-[1]" data-state="closed" data-orientation="horizontal" style="pointer-events: none;" hidden="">
+      <div data-dismissable-layer="" style="pointer-events: none;" id="reka-navigation-menu-v-0-content-item-1" aria-labelledby="reka-navigation-menu-v-0-trigger-item-1" data-state="closed" data-orientation="horizontal" class="absolute top-0 left-0 w-full max-h-[70vh] overflow-y-auto 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]" hidden="">
+        <ul class="isolate grid p-2 grid-cols-2 gap-2">
+          <li class=""><button type="button" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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-inverted px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-dimmed group-hover:text-default transition-colors"></svg>
+              <div class="min-w-0">
+                <p class="truncate font-medium">Introduction
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Fully styled and customizable components for Nuxt.</p>
+              </div>
+            </button></li>
+          <li class=""><button type="button" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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-inverted px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-dimmed group-hover:text-default transition-colors"></svg>
+              <div class="min-w-0">
+                <p class="truncate font-medium">Installation
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Learn how to install and configure Nuxt UI in your application.</p>
+              </div>
+            </button></li>
+          <li class=""><button type="button" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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-inverted px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-dimmed group-hover:text-default transition-colors"></svg>
+              <div class="min-w-0">
+                <p class="truncate font-medium">Theming
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Learn how to customize the look and feel of the components.</p>
+              </div>
+            </button></li>
+          <li class=""><button type="button" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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-inverted px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-dimmed group-hover:text-default transition-colors"></svg>
+              <div class="min-w-0">
+                <p class="truncate font-medium">Shortcuts
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Learn how to display and define keyboard shortcuts in your app.</p>
+              </div>
+            </button></li>
+        </ul>
+      </div>
+      <div data-dismissable-layer="" style="pointer-events: none;" id="reka-navigation-menu-v-0-content-item-2" aria-labelledby="reka-navigation-menu-v-0-trigger-item-2" data-state="closed" data-orientation="horizontal" class="absolute top-0 left-0 w-full max-h-[70vh] overflow-y-auto 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]" hidden="">
+        <ul class="isolate grid p-2 grid-cols-2 gap-2">
+          <li class=""><a href="/components/link" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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-inverted px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-dimmed group-hover:text-default transition-colors"></svg>
+              <div class="min-w-0">
+                <p class="truncate font-medium">Link
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Use NuxtLink with superpowers.</p>
+              </div>
+            </a></li>
+          <li class=""><a href="/components/modal" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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-inverted px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-dimmed group-hover:text-default transition-colors"></svg>
+              <div class="min-w-0">
+                <p class="truncate font-medium">Modal
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Display a modal within your application.</p>
+              </div>
+            </a></li>
+          <li class=""><a href="/components/navigation-menu" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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-inverted px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-dimmed group-hover:text-default transition-colors"></svg>
+              <div class="min-w-0">
+                <p class="truncate font-medium">NavigationMenu
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Display a list of links.</p>
+              </div>
+            </a></li>
+          <li class=""><a href="/components/pagination" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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-inverted px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-dimmed group-hover:text-default transition-colors"></svg>
+              <div class="min-w-0">
+                <p class="truncate font-medium">Pagination
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Display a list of pages.</p>
+              </div>
+            </a></li>
+          <li class=""><a href="/components/popover" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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-inverted px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-dimmed group-hover:text-default transition-colors"></svg>
+              <div class="min-w-0">
+                <p class="truncate font-medium">Popover
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Display a non-modal dialog that floats around a trigger element.</p>
+              </div>
+            </a></li>
+          <li class=""><a href="/components/progress" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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-inverted px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-dimmed group-hover:text-default transition-colors"></svg>
+              <div class="min-w-0">
+                <p class="truncate font-medium">Progress
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Show a horizontal bar to indicate task progression.</p>
+              </div>
+            </a></li>
+        </ul>
+      </div>
+    </div>
   </div>
 </nav>"
 `;
@@ -869,14 +2432,12 @@ exports[`NavigationMenu > renders with neutral variant pill highlight neutral co
         </button>
         <!--v-if-->
         <!--teleport start-->
-        <!---->
         <!--teleport end-->
         <!--v-if-->
       </li>
       <li data-menu-item="" class="min-w-0 py-2"><button type="button" data-reka-collection-item="" id="reka-navigation-menu-v-0-trigger-item-2" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" aria-controls="reka-navigation-menu-v-0-content-item-2" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-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-inverted px-2.5 py-1.5 before:inset-x-px before:inset-y-0 after:absolute after:-bottom-2 after:inset-x-2.5 after:block after:h-px after:rounded-full after:transition-colors data-[state=open]:before:bg-elevated/50 text-highlighted hover:before:bg-elevated/50 before:transition-colors after:bg-inverted"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5 text-highlighted group-data-[state=open]:text-highlighted"></svg><span class="truncate">Components<!--v-if--></span><span as="span" class="group ms-auto inline-flex gap-1.5 items-center"><!--v-if--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200"></svg></span></button>
         <!--v-if-->
         <!--teleport start-->
-        <!---->
         <!--teleport end-->
         <!--v-if-->
       </li>
@@ -902,7 +2463,96 @@ exports[`NavigationMenu > renders with neutral variant pill highlight neutral co
   <!--v-if-->
   <div class="absolute top-full left-0 flex w-full justify-center">
     <!--v-if-->
-    <!---->
+    <div class="relative overflow-hidden bg-default shadow-lg rounded-md ring ring-default h-(--reka-navigation-menu-viewport-height) w-full transition-[width,height,left] duration-200 origin-[top_center] data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] z-[1]" data-state="closed" data-orientation="horizontal" style="pointer-events: none;" hidden="">
+      <div data-dismissable-layer="" style="pointer-events: none;" id="reka-navigation-menu-v-0-content-item-1" aria-labelledby="reka-navigation-menu-v-0-trigger-item-1" data-state="closed" data-orientation="horizontal" class="absolute top-0 left-0 w-full max-h-[70vh] overflow-y-auto 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]" hidden="">
+        <ul class="isolate grid p-2 grid-cols-2 gap-2">
+          <li class=""><button type="button" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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-inverted px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-dimmed group-hover:text-default transition-colors"></svg>
+              <div class="min-w-0">
+                <p class="truncate font-medium">Introduction
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Fully styled and customizable components for Nuxt.</p>
+              </div>
+            </button></li>
+          <li class=""><button type="button" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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-inverted px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-dimmed group-hover:text-default transition-colors"></svg>
+              <div class="min-w-0">
+                <p class="truncate font-medium">Installation
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Learn how to install and configure Nuxt UI in your application.</p>
+              </div>
+            </button></li>
+          <li class=""><button type="button" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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-inverted px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-dimmed group-hover:text-default transition-colors"></svg>
+              <div class="min-w-0">
+                <p class="truncate font-medium">Theming
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Learn how to customize the look and feel of the components.</p>
+              </div>
+            </button></li>
+          <li class=""><button type="button" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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-inverted px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-dimmed group-hover:text-default transition-colors"></svg>
+              <div class="min-w-0">
+                <p class="truncate font-medium">Shortcuts
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Learn how to display and define keyboard shortcuts in your app.</p>
+              </div>
+            </button></li>
+        </ul>
+      </div>
+      <div data-dismissable-layer="" style="pointer-events: none;" id="reka-navigation-menu-v-0-content-item-2" aria-labelledby="reka-navigation-menu-v-0-trigger-item-2" data-state="closed" data-orientation="horizontal" class="absolute top-0 left-0 w-full max-h-[70vh] overflow-y-auto 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]" hidden="">
+        <ul class="isolate grid p-2 grid-cols-2 gap-2">
+          <li class=""><a href="/components/link" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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-inverted px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-dimmed group-hover:text-default transition-colors"></svg>
+              <div class="min-w-0">
+                <p class="truncate font-medium">Link
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Use NuxtLink with superpowers.</p>
+              </div>
+            </a></li>
+          <li class=""><a href="/components/modal" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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-inverted px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-dimmed group-hover:text-default transition-colors"></svg>
+              <div class="min-w-0">
+                <p class="truncate font-medium">Modal
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Display a modal within your application.</p>
+              </div>
+            </a></li>
+          <li class=""><a href="/components/navigation-menu" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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-inverted px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-dimmed group-hover:text-default transition-colors"></svg>
+              <div class="min-w-0">
+                <p class="truncate font-medium">NavigationMenu
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Display a list of links.</p>
+              </div>
+            </a></li>
+          <li class=""><a href="/components/pagination" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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-inverted px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-dimmed group-hover:text-default transition-colors"></svg>
+              <div class="min-w-0">
+                <p class="truncate font-medium">Pagination
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Display a list of pages.</p>
+              </div>
+            </a></li>
+          <li class=""><a href="/components/popover" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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-inverted px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-dimmed group-hover:text-default transition-colors"></svg>
+              <div class="min-w-0">
+                <p class="truncate font-medium">Popover
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Display a non-modal dialog that floats around a trigger element.</p>
+              </div>
+            </a></li>
+          <li class=""><a href="/components/progress" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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-inverted px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-dimmed group-hover:text-default transition-colors"></svg>
+              <div class="min-w-0">
+                <p class="truncate font-medium">Progress
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Show a horizontal bar to indicate task progression.</p>
+              </div>
+            </a></li>
+        </ul>
+      </div>
+    </div>
   </div>
 </nav>"
 `;
@@ -1007,14 +2657,12 @@ exports[`NavigationMenu > renders with primary variant link correctly 1`] = `
         </button>
         <!--v-if-->
         <!--teleport start-->
-        <!---->
         <!--teleport end-->
         <!--v-if-->
       </li>
       <li data-menu-item="" class="min-w-0 py-2"><button type="button" data-reka-collection-item="" id="reka-navigation-menu-v-0-trigger-item-2" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" aria-controls="reka-navigation-menu-v-0-content-item-2" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-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 px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5 text-primary group-data-[state=open]:text-primary"></svg><span class="truncate">Components<!--v-if--></span><span as="span" class="group ms-auto inline-flex gap-1.5 items-center"><!--v-if--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200"></svg></span></button>
         <!--v-if-->
         <!--teleport start-->
-        <!---->
         <!--teleport end-->
         <!--v-if-->
       </li>
@@ -1040,7 +2688,96 @@ exports[`NavigationMenu > renders with primary variant link correctly 1`] = `
   <!--v-if-->
   <div class="absolute top-full left-0 flex w-full justify-center">
     <!--v-if-->
-    <!---->
+    <div class="relative overflow-hidden bg-default shadow-lg rounded-md ring ring-default h-(--reka-navigation-menu-viewport-height) w-full transition-[width,height,left] duration-200 origin-[top_center] data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] z-[1]" data-state="closed" data-orientation="horizontal" style="pointer-events: none;" hidden="">
+      <div data-dismissable-layer="" style="pointer-events: none;" id="reka-navigation-menu-v-0-content-item-1" aria-labelledby="reka-navigation-menu-v-0-trigger-item-1" data-state="closed" data-orientation="horizontal" class="absolute top-0 left-0 w-full max-h-[70vh] overflow-y-auto 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]" hidden="">
+        <ul class="isolate grid p-2 grid-cols-2 gap-2">
+          <li class=""><button type="button" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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 px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-dimmed group-hover:text-default transition-colors"></svg>
+              <div class="min-w-0">
+                <p class="truncate font-medium">Introduction
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Fully styled and customizable components for Nuxt.</p>
+              </div>
+            </button></li>
+          <li class=""><button type="button" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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 px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-dimmed group-hover:text-default transition-colors"></svg>
+              <div class="min-w-0">
+                <p class="truncate font-medium">Installation
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Learn how to install and configure Nuxt UI in your application.</p>
+              </div>
+            </button></li>
+          <li class=""><button type="button" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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 px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-dimmed group-hover:text-default transition-colors"></svg>
+              <div class="min-w-0">
+                <p class="truncate font-medium">Theming
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Learn how to customize the look and feel of the components.</p>
+              </div>
+            </button></li>
+          <li class=""><button type="button" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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 px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-dimmed group-hover:text-default transition-colors"></svg>
+              <div class="min-w-0">
+                <p class="truncate font-medium">Shortcuts
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Learn how to display and define keyboard shortcuts in your app.</p>
+              </div>
+            </button></li>
+        </ul>
+      </div>
+      <div data-dismissable-layer="" style="pointer-events: none;" id="reka-navigation-menu-v-0-content-item-2" aria-labelledby="reka-navigation-menu-v-0-trigger-item-2" data-state="closed" data-orientation="horizontal" class="absolute top-0 left-0 w-full max-h-[70vh] overflow-y-auto 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]" hidden="">
+        <ul class="isolate grid p-2 grid-cols-2 gap-2">
+          <li class=""><a href="/components/link" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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 px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-dimmed group-hover:text-default transition-colors"></svg>
+              <div class="min-w-0">
+                <p class="truncate font-medium">Link
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Use NuxtLink with superpowers.</p>
+              </div>
+            </a></li>
+          <li class=""><a href="/components/modal" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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 px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-dimmed group-hover:text-default transition-colors"></svg>
+              <div class="min-w-0">
+                <p class="truncate font-medium">Modal
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Display a modal within your application.</p>
+              </div>
+            </a></li>
+          <li class=""><a href="/components/navigation-menu" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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 px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-dimmed group-hover:text-default transition-colors"></svg>
+              <div class="min-w-0">
+                <p class="truncate font-medium">NavigationMenu
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Display a list of links.</p>
+              </div>
+            </a></li>
+          <li class=""><a href="/components/pagination" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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 px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-dimmed group-hover:text-default transition-colors"></svg>
+              <div class="min-w-0">
+                <p class="truncate font-medium">Pagination
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Display a list of pages.</p>
+              </div>
+            </a></li>
+          <li class=""><a href="/components/popover" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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 px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-dimmed group-hover:text-default transition-colors"></svg>
+              <div class="min-w-0">
+                <p class="truncate font-medium">Popover
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Display a non-modal dialog that floats around a trigger element.</p>
+              </div>
+            </a></li>
+          <li class=""><a href="/components/progress" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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 px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-dimmed group-hover:text-default transition-colors"></svg>
+              <div class="min-w-0">
+                <p class="truncate font-medium">Progress
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Show a horizontal bar to indicate task progression.</p>
+              </div>
+            </a></li>
+        </ul>
+      </div>
+    </div>
   </div>
 </nav>"
 `;
@@ -1055,14 +2792,12 @@ exports[`NavigationMenu > renders with primary variant link highlight correctly
         </button>
         <!--v-if-->
         <!--teleport start-->
-        <!---->
         <!--teleport end-->
         <!--v-if-->
       </li>
       <li data-menu-item="" class="min-w-0 py-2"><button type="button" data-reka-collection-item="" id="reka-navigation-menu-v-0-trigger-item-2" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" aria-controls="reka-navigation-menu-v-0-content-item-2" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-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 px-2.5 py-1.5 before:inset-x-px before:inset-y-0 after:absolute after:-bottom-2 after:inset-x-2.5 after:block after:h-px after:rounded-full after:transition-colors text-primary after:bg-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5 text-primary group-data-[state=open]:text-primary"></svg><span class="truncate">Components<!--v-if--></span><span as="span" class="group ms-auto inline-flex gap-1.5 items-center"><!--v-if--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200"></svg></span></button>
         <!--v-if-->
         <!--teleport start-->
-        <!---->
         <!--teleport end-->
         <!--v-if-->
       </li>
@@ -1088,7 +2823,96 @@ exports[`NavigationMenu > renders with primary variant link highlight correctly
   <!--v-if-->
   <div class="absolute top-full left-0 flex w-full justify-center">
     <!--v-if-->
-    <!---->
+    <div class="relative overflow-hidden bg-default shadow-lg rounded-md ring ring-default h-(--reka-navigation-menu-viewport-height) w-full transition-[width,height,left] duration-200 origin-[top_center] data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] z-[1]" data-state="closed" data-orientation="horizontal" style="pointer-events: none;" hidden="">
+      <div data-dismissable-layer="" style="pointer-events: none;" id="reka-navigation-menu-v-0-content-item-1" aria-labelledby="reka-navigation-menu-v-0-trigger-item-1" data-state="closed" data-orientation="horizontal" class="absolute top-0 left-0 w-full max-h-[70vh] overflow-y-auto 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]" hidden="">
+        <ul class="isolate grid p-2 grid-cols-2 gap-2">
+          <li class=""><button type="button" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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 px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-dimmed group-hover:text-default transition-colors"></svg>
+              <div class="min-w-0">
+                <p class="truncate font-medium">Introduction
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Fully styled and customizable components for Nuxt.</p>
+              </div>
+            </button></li>
+          <li class=""><button type="button" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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 px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-dimmed group-hover:text-default transition-colors"></svg>
+              <div class="min-w-0">
+                <p class="truncate font-medium">Installation
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Learn how to install and configure Nuxt UI in your application.</p>
+              </div>
+            </button></li>
+          <li class=""><button type="button" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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 px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-dimmed group-hover:text-default transition-colors"></svg>
+              <div class="min-w-0">
+                <p class="truncate font-medium">Theming
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Learn how to customize the look and feel of the components.</p>
+              </div>
+            </button></li>
+          <li class=""><button type="button" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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 px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-dimmed group-hover:text-default transition-colors"></svg>
+              <div class="min-w-0">
+                <p class="truncate font-medium">Shortcuts
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Learn how to display and define keyboard shortcuts in your app.</p>
+              </div>
+            </button></li>
+        </ul>
+      </div>
+      <div data-dismissable-layer="" style="pointer-events: none;" id="reka-navigation-menu-v-0-content-item-2" aria-labelledby="reka-navigation-menu-v-0-trigger-item-2" data-state="closed" data-orientation="horizontal" class="absolute top-0 left-0 w-full max-h-[70vh] overflow-y-auto 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]" hidden="">
+        <ul class="isolate grid p-2 grid-cols-2 gap-2">
+          <li class=""><a href="/components/link" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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 px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-dimmed group-hover:text-default transition-colors"></svg>
+              <div class="min-w-0">
+                <p class="truncate font-medium">Link
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Use NuxtLink with superpowers.</p>
+              </div>
+            </a></li>
+          <li class=""><a href="/components/modal" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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 px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-dimmed group-hover:text-default transition-colors"></svg>
+              <div class="min-w-0">
+                <p class="truncate font-medium">Modal
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Display a modal within your application.</p>
+              </div>
+            </a></li>
+          <li class=""><a href="/components/navigation-menu" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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 px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-dimmed group-hover:text-default transition-colors"></svg>
+              <div class="min-w-0">
+                <p class="truncate font-medium">NavigationMenu
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Display a list of links.</p>
+              </div>
+            </a></li>
+          <li class=""><a href="/components/pagination" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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 px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-dimmed group-hover:text-default transition-colors"></svg>
+              <div class="min-w-0">
+                <p class="truncate font-medium">Pagination
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Display a list of pages.</p>
+              </div>
+            </a></li>
+          <li class=""><a href="/components/popover" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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 px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-dimmed group-hover:text-default transition-colors"></svg>
+              <div class="min-w-0">
+                <p class="truncate font-medium">Popover
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Display a non-modal dialog that floats around a trigger element.</p>
+              </div>
+            </a></li>
+          <li class=""><a href="/components/progress" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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 px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-dimmed group-hover:text-default transition-colors"></svg>
+              <div class="min-w-0">
+                <p class="truncate font-medium">Progress
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Show a horizontal bar to indicate task progression.</p>
+              </div>
+            </a></li>
+        </ul>
+      </div>
+    </div>
   </div>
 </nav>"
 `;
@@ -1103,14 +2927,12 @@ exports[`NavigationMenu > renders with primary variant pill correctly 1`] = `
         </button>
         <!--v-if-->
         <!--teleport start-->
-        <!---->
         <!--teleport end-->
         <!--v-if-->
       </li>
       <li data-menu-item="" class="min-w-0 py-2"><button type="button" data-reka-collection-item="" id="reka-navigation-menu-v-0-trigger-item-2" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" aria-controls="reka-navigation-menu-v-0-content-item-2" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-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 px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-primary before:bg-elevated"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5 text-primary group-data-[state=open]:text-primary"></svg><span class="truncate">Components<!--v-if--></span><span as="span" class="group ms-auto inline-flex gap-1.5 items-center"><!--v-if--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200"></svg></span></button>
         <!--v-if-->
         <!--teleport start-->
-        <!---->
         <!--teleport end-->
         <!--v-if-->
       </li>
@@ -1136,7 +2958,96 @@ exports[`NavigationMenu > renders with primary variant pill correctly 1`] = `
   <!--v-if-->
   <div class="absolute top-full left-0 flex w-full justify-center">
     <!--v-if-->
-    <!---->
+    <div class="relative overflow-hidden bg-default shadow-lg rounded-md ring ring-default h-(--reka-navigation-menu-viewport-height) w-full transition-[width,height,left] duration-200 origin-[top_center] data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] z-[1]" data-state="closed" data-orientation="horizontal" style="pointer-events: none;" hidden="">
+      <div data-dismissable-layer="" style="pointer-events: none;" id="reka-navigation-menu-v-0-content-item-1" aria-labelledby="reka-navigation-menu-v-0-trigger-item-1" data-state="closed" data-orientation="horizontal" class="absolute top-0 left-0 w-full max-h-[70vh] overflow-y-auto 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]" hidden="">
+        <ul class="isolate grid p-2 grid-cols-2 gap-2">
+          <li class=""><button type="button" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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 px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-dimmed group-hover:text-default transition-colors"></svg>
+              <div class="min-w-0">
+                <p class="truncate font-medium">Introduction
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Fully styled and customizable components for Nuxt.</p>
+              </div>
+            </button></li>
+          <li class=""><button type="button" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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 px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-dimmed group-hover:text-default transition-colors"></svg>
+              <div class="min-w-0">
+                <p class="truncate font-medium">Installation
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Learn how to install and configure Nuxt UI in your application.</p>
+              </div>
+            </button></li>
+          <li class=""><button type="button" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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 px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-dimmed group-hover:text-default transition-colors"></svg>
+              <div class="min-w-0">
+                <p class="truncate font-medium">Theming
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Learn how to customize the look and feel of the components.</p>
+              </div>
+            </button></li>
+          <li class=""><button type="button" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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 px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-dimmed group-hover:text-default transition-colors"></svg>
+              <div class="min-w-0">
+                <p class="truncate font-medium">Shortcuts
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Learn how to display and define keyboard shortcuts in your app.</p>
+              </div>
+            </button></li>
+        </ul>
+      </div>
+      <div data-dismissable-layer="" style="pointer-events: none;" id="reka-navigation-menu-v-0-content-item-2" aria-labelledby="reka-navigation-menu-v-0-trigger-item-2" data-state="closed" data-orientation="horizontal" class="absolute top-0 left-0 w-full max-h-[70vh] overflow-y-auto 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]" hidden="">
+        <ul class="isolate grid p-2 grid-cols-2 gap-2">
+          <li class=""><a href="/components/link" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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 px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-dimmed group-hover:text-default transition-colors"></svg>
+              <div class="min-w-0">
+                <p class="truncate font-medium">Link
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Use NuxtLink with superpowers.</p>
+              </div>
+            </a></li>
+          <li class=""><a href="/components/modal" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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 px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-dimmed group-hover:text-default transition-colors"></svg>
+              <div class="min-w-0">
+                <p class="truncate font-medium">Modal
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Display a modal within your application.</p>
+              </div>
+            </a></li>
+          <li class=""><a href="/components/navigation-menu" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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 px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-dimmed group-hover:text-default transition-colors"></svg>
+              <div class="min-w-0">
+                <p class="truncate font-medium">NavigationMenu
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Display a list of links.</p>
+              </div>
+            </a></li>
+          <li class=""><a href="/components/pagination" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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 px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-dimmed group-hover:text-default transition-colors"></svg>
+              <div class="min-w-0">
+                <p class="truncate font-medium">Pagination
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Display a list of pages.</p>
+              </div>
+            </a></li>
+          <li class=""><a href="/components/popover" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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 px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-dimmed group-hover:text-default transition-colors"></svg>
+              <div class="min-w-0">
+                <p class="truncate font-medium">Popover
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Display a non-modal dialog that floats around a trigger element.</p>
+              </div>
+            </a></li>
+          <li class=""><a href="/components/progress" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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 px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-dimmed group-hover:text-default transition-colors"></svg>
+              <div class="min-w-0">
+                <p class="truncate font-medium">Progress
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Show a horizontal bar to indicate task progression.</p>
+              </div>
+            </a></li>
+        </ul>
+      </div>
+    </div>
   </div>
 </nav>"
 `;
@@ -1151,14 +3062,12 @@ exports[`NavigationMenu > renders with primary variant pill highlight correctly
         </button>
         <!--v-if-->
         <!--teleport start-->
-        <!---->
         <!--teleport end-->
         <!--v-if-->
       </li>
       <li data-menu-item="" class="min-w-0 py-2"><button type="button" data-reka-collection-item="" id="reka-navigation-menu-v-0-trigger-item-2" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" aria-controls="reka-navigation-menu-v-0-content-item-2" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-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 px-2.5 py-1.5 before:inset-x-px before:inset-y-0 after:absolute after:-bottom-2 after:inset-x-2.5 after:block after:h-px after:rounded-full after:transition-colors data-[state=open]:before:bg-elevated/50 text-primary hover:before:bg-elevated/50 before:transition-colors after:bg-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5 text-primary group-data-[state=open]:text-primary"></svg><span class="truncate">Components<!--v-if--></span><span as="span" class="group ms-auto inline-flex gap-1.5 items-center"><!--v-if--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200"></svg></span></button>
         <!--v-if-->
         <!--teleport start-->
-        <!---->
         <!--teleport end-->
         <!--v-if-->
       </li>
@@ -1184,7 +3093,96 @@ exports[`NavigationMenu > renders with primary variant pill highlight correctly
   <!--v-if-->
   <div class="absolute top-full left-0 flex w-full justify-center">
     <!--v-if-->
-    <!---->
+    <div class="relative overflow-hidden bg-default shadow-lg rounded-md ring ring-default h-(--reka-navigation-menu-viewport-height) w-full transition-[width,height,left] duration-200 origin-[top_center] data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] z-[1]" data-state="closed" data-orientation="horizontal" style="pointer-events: none;" hidden="">
+      <div data-dismissable-layer="" style="pointer-events: none;" id="reka-navigation-menu-v-0-content-item-1" aria-labelledby="reka-navigation-menu-v-0-trigger-item-1" data-state="closed" data-orientation="horizontal" class="absolute top-0 left-0 w-full max-h-[70vh] overflow-y-auto 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]" hidden="">
+        <ul class="isolate grid p-2 grid-cols-2 gap-2">
+          <li class=""><button type="button" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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 px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-dimmed group-hover:text-default transition-colors"></svg>
+              <div class="min-w-0">
+                <p class="truncate font-medium">Introduction
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Fully styled and customizable components for Nuxt.</p>
+              </div>
+            </button></li>
+          <li class=""><button type="button" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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 px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-dimmed group-hover:text-default transition-colors"></svg>
+              <div class="min-w-0">
+                <p class="truncate font-medium">Installation
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Learn how to install and configure Nuxt UI in your application.</p>
+              </div>
+            </button></li>
+          <li class=""><button type="button" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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 px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-dimmed group-hover:text-default transition-colors"></svg>
+              <div class="min-w-0">
+                <p class="truncate font-medium">Theming
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Learn how to customize the look and feel of the components.</p>
+              </div>
+            </button></li>
+          <li class=""><button type="button" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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 px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-dimmed group-hover:text-default transition-colors"></svg>
+              <div class="min-w-0">
+                <p class="truncate font-medium">Shortcuts
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Learn how to display and define keyboard shortcuts in your app.</p>
+              </div>
+            </button></li>
+        </ul>
+      </div>
+      <div data-dismissable-layer="" style="pointer-events: none;" id="reka-navigation-menu-v-0-content-item-2" aria-labelledby="reka-navigation-menu-v-0-trigger-item-2" data-state="closed" data-orientation="horizontal" class="absolute top-0 left-0 w-full max-h-[70vh] overflow-y-auto 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]" hidden="">
+        <ul class="isolate grid p-2 grid-cols-2 gap-2">
+          <li class=""><a href="/components/link" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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 px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-dimmed group-hover:text-default transition-colors"></svg>
+              <div class="min-w-0">
+                <p class="truncate font-medium">Link
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Use NuxtLink with superpowers.</p>
+              </div>
+            </a></li>
+          <li class=""><a href="/components/modal" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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 px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-dimmed group-hover:text-default transition-colors"></svg>
+              <div class="min-w-0">
+                <p class="truncate font-medium">Modal
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Display a modal within your application.</p>
+              </div>
+            </a></li>
+          <li class=""><a href="/components/navigation-menu" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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 px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-dimmed group-hover:text-default transition-colors"></svg>
+              <div class="min-w-0">
+                <p class="truncate font-medium">NavigationMenu
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Display a list of links.</p>
+              </div>
+            </a></li>
+          <li class=""><a href="/components/pagination" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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 px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-dimmed group-hover:text-default transition-colors"></svg>
+              <div class="min-w-0">
+                <p class="truncate font-medium">Pagination
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Display a list of pages.</p>
+              </div>
+            </a></li>
+          <li class=""><a href="/components/popover" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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 px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-dimmed group-hover:text-default transition-colors"></svg>
+              <div class="min-w-0">
+                <p class="truncate font-medium">Popover
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Display a non-modal dialog that floats around a trigger element.</p>
+              </div>
+            </a></li>
+          <li class=""><a href="/components/progress" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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 px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-dimmed group-hover:text-default transition-colors"></svg>
+              <div class="min-w-0">
+                <p class="truncate font-medium">Progress
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Show a horizontal bar to indicate task progression.</p>
+              </div>
+            </a></li>
+        </ul>
+      </div>
+    </div>
   </div>
 </nav>"
 `;
@@ -1199,14 +3197,12 @@ exports[`NavigationMenu > renders with trailingIcon correctly 1`] = `
         </button>
         <!--v-if-->
         <!--teleport start-->
-        <!---->
         <!--teleport end-->
         <!--v-if-->
       </li>
       <li data-menu-item="" class="min-w-0 py-2"><button type="button" data-reka-collection-item="" id="reka-navigation-menu-v-0-trigger-item-2" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" aria-controls="reka-navigation-menu-v-0-content-item-2" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-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 px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-primary before:bg-elevated"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5 text-primary group-data-[state=open]:text-primary"></svg><span class="truncate">Components<!--v-if--></span><span as="span" class="group ms-auto inline-flex gap-1.5 items-center"><!--v-if--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200"></svg></span></button>
         <!--v-if-->
         <!--teleport start-->
-        <!---->
         <!--teleport end-->
         <!--v-if-->
       </li>
@@ -1232,7 +3228,96 @@ exports[`NavigationMenu > renders with trailingIcon correctly 1`] = `
   <!--v-if-->
   <div class="absolute top-full left-0 flex w-full justify-center">
     <!--v-if-->
-    <!---->
+    <div class="relative overflow-hidden bg-default shadow-lg rounded-md ring ring-default h-(--reka-navigation-menu-viewport-height) w-full transition-[width,height,left] duration-200 origin-[top_center] data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] z-[1]" data-state="closed" data-orientation="horizontal" style="pointer-events: none;" hidden="">
+      <div data-dismissable-layer="" style="pointer-events: none;" id="reka-navigation-menu-v-0-content-item-1" aria-labelledby="reka-navigation-menu-v-0-trigger-item-1" data-state="closed" data-orientation="horizontal" class="absolute top-0 left-0 w-full max-h-[70vh] overflow-y-auto 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]" hidden="">
+        <ul class="isolate grid p-2 grid-cols-2 gap-2">
+          <li class=""><button type="button" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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 px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-dimmed group-hover:text-default transition-colors"></svg>
+              <div class="min-w-0">
+                <p class="truncate font-medium">Introduction
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Fully styled and customizable components for Nuxt.</p>
+              </div>
+            </button></li>
+          <li class=""><button type="button" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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 px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-dimmed group-hover:text-default transition-colors"></svg>
+              <div class="min-w-0">
+                <p class="truncate font-medium">Installation
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Learn how to install and configure Nuxt UI in your application.</p>
+              </div>
+            </button></li>
+          <li class=""><button type="button" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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 px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-dimmed group-hover:text-default transition-colors"></svg>
+              <div class="min-w-0">
+                <p class="truncate font-medium">Theming
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Learn how to customize the look and feel of the components.</p>
+              </div>
+            </button></li>
+          <li class=""><button type="button" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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 px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-dimmed group-hover:text-default transition-colors"></svg>
+              <div class="min-w-0">
+                <p class="truncate font-medium">Shortcuts
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Learn how to display and define keyboard shortcuts in your app.</p>
+              </div>
+            </button></li>
+        </ul>
+      </div>
+      <div data-dismissable-layer="" style="pointer-events: none;" id="reka-navigation-menu-v-0-content-item-2" aria-labelledby="reka-navigation-menu-v-0-trigger-item-2" data-state="closed" data-orientation="horizontal" class="absolute top-0 left-0 w-full max-h-[70vh] overflow-y-auto 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]" hidden="">
+        <ul class="isolate grid p-2 grid-cols-2 gap-2">
+          <li class=""><a href="/components/link" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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 px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-dimmed group-hover:text-default transition-colors"></svg>
+              <div class="min-w-0">
+                <p class="truncate font-medium">Link
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Use NuxtLink with superpowers.</p>
+              </div>
+            </a></li>
+          <li class=""><a href="/components/modal" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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 px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-dimmed group-hover:text-default transition-colors"></svg>
+              <div class="min-w-0">
+                <p class="truncate font-medium">Modal
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Display a modal within your application.</p>
+              </div>
+            </a></li>
+          <li class=""><a href="/components/navigation-menu" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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 px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-dimmed group-hover:text-default transition-colors"></svg>
+              <div class="min-w-0">
+                <p class="truncate font-medium">NavigationMenu
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Display a list of links.</p>
+              </div>
+            </a></li>
+          <li class=""><a href="/components/pagination" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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 px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-dimmed group-hover:text-default transition-colors"></svg>
+              <div class="min-w-0">
+                <p class="truncate font-medium">Pagination
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Display a list of pages.</p>
+              </div>
+            </a></li>
+          <li class=""><a href="/components/popover" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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 px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-dimmed group-hover:text-default transition-colors"></svg>
+              <div class="min-w-0">
+                <p class="truncate font-medium">Popover
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Display a non-modal dialog that floats around a trigger element.</p>
+              </div>
+            </a></li>
+          <li class=""><a href="/components/progress" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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 px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-dimmed group-hover:text-default transition-colors"></svg>
+              <div class="min-w-0">
+                <p class="truncate font-medium">Progress
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Show a horizontal bar to indicate task progression.</p>
+              </div>
+            </a></li>
+        </ul>
+      </div>
+    </div>
   </div>
 </nav>"
 `;
@@ -1247,14 +3332,12 @@ exports[`NavigationMenu > renders with ui correctly 1`] = `
         </button>
         <!--v-if-->
         <!--teleport start-->
-        <!---->
         <!--teleport end-->
         <!--v-if-->
       </li>
       <li data-menu-item="" class="min-w-0 py-2"><button type="button" data-reka-collection-item="" id="reka-navigation-menu-v-0-trigger-item-2" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" aria-controls="reka-navigation-menu-v-0-content-item-2" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-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 px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-primary before:bg-elevated"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5 text-primary group-data-[state=open]:text-primary"></svg><span class="truncate">Components<!--v-if--></span><span as="span" class="group ms-auto inline-flex gap-1.5 items-center"><!--v-if--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200"></svg></span></button>
         <!--v-if-->
         <!--teleport start-->
-        <!---->
         <!--teleport end-->
         <!--v-if-->
       </li>
@@ -1280,7 +3363,96 @@ exports[`NavigationMenu > renders with ui correctly 1`] = `
   <!--v-if-->
   <div class="absolute top-full left-0 flex w-full justify-center">
     <!--v-if-->
-    <!---->
+    <div class="relative overflow-hidden bg-default shadow-lg rounded-md ring ring-default h-(--reka-navigation-menu-viewport-height) w-full transition-[width,height,left] duration-200 origin-[top_center] data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] z-[1]" data-state="closed" data-orientation="horizontal" style="pointer-events: none;" hidden="">
+      <div data-dismissable-layer="" style="pointer-events: none;" id="reka-navigation-menu-v-0-content-item-1" aria-labelledby="reka-navigation-menu-v-0-trigger-item-1" data-state="closed" data-orientation="horizontal" class="absolute top-0 left-0 w-full max-h-[70vh] overflow-y-auto 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]" hidden="">
+        <ul class="isolate grid p-2 grid-cols-2 gap-2">
+          <li class=""><button type="button" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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 px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-dimmed group-hover:text-default transition-colors"></svg>
+              <div class="min-w-0">
+                <p class="truncate font-medium">Introduction
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Fully styled and customizable components for Nuxt.</p>
+              </div>
+            </button></li>
+          <li class=""><button type="button" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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 px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-dimmed group-hover:text-default transition-colors"></svg>
+              <div class="min-w-0">
+                <p class="truncate font-medium">Installation
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Learn how to install and configure Nuxt UI in your application.</p>
+              </div>
+            </button></li>
+          <li class=""><button type="button" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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 px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-dimmed group-hover:text-default transition-colors"></svg>
+              <div class="min-w-0">
+                <p class="truncate font-medium">Theming
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Learn how to customize the look and feel of the components.</p>
+              </div>
+            </button></li>
+          <li class=""><button type="button" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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 px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-dimmed group-hover:text-default transition-colors"></svg>
+              <div class="min-w-0">
+                <p class="truncate font-medium">Shortcuts
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Learn how to display and define keyboard shortcuts in your app.</p>
+              </div>
+            </button></li>
+        </ul>
+      </div>
+      <div data-dismissable-layer="" style="pointer-events: none;" id="reka-navigation-menu-v-0-content-item-2" aria-labelledby="reka-navigation-menu-v-0-trigger-item-2" data-state="closed" data-orientation="horizontal" class="absolute top-0 left-0 w-full max-h-[70vh] overflow-y-auto 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]" hidden="">
+        <ul class="isolate grid p-2 grid-cols-2 gap-2">
+          <li class=""><a href="/components/link" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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 px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-dimmed group-hover:text-default transition-colors"></svg>
+              <div class="min-w-0">
+                <p class="truncate font-medium">Link
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Use NuxtLink with superpowers.</p>
+              </div>
+            </a></li>
+          <li class=""><a href="/components/modal" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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 px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-dimmed group-hover:text-default transition-colors"></svg>
+              <div class="min-w-0">
+                <p class="truncate font-medium">Modal
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Display a modal within your application.</p>
+              </div>
+            </a></li>
+          <li class=""><a href="/components/navigation-menu" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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 px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-dimmed group-hover:text-default transition-colors"></svg>
+              <div class="min-w-0">
+                <p class="truncate font-medium">NavigationMenu
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Display a list of links.</p>
+              </div>
+            </a></li>
+          <li class=""><a href="/components/pagination" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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 px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-dimmed group-hover:text-default transition-colors"></svg>
+              <div class="min-w-0">
+                <p class="truncate font-medium">Pagination
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Display a list of pages.</p>
+              </div>
+            </a></li>
+          <li class=""><a href="/components/popover" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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 px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-dimmed group-hover:text-default transition-colors"></svg>
+              <div class="min-w-0">
+                <p class="truncate font-medium">Popover
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Display a non-modal dialog that floats around a trigger element.</p>
+              </div>
+            </a></li>
+          <li class=""><a href="/components/progress" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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 px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-dimmed group-hover:text-default transition-colors"></svg>
+              <div class="min-w-0">
+                <p class="truncate font-medium">Progress
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Show a horizontal bar to indicate task progression.</p>
+              </div>
+            </a></li>
+        </ul>
+      </div>
+    </div>
   </div>
 </nav>"
 `;
@@ -1430,14 +3602,12 @@ exports[`NavigationMenu > renders without externalIcon correctly 1`] = `
         </button>
         <!--v-if-->
         <!--teleport start-->
-        <!---->
         <!--teleport end-->
         <!--v-if-->
       </li>
       <li data-menu-item="" class="min-w-0 py-2"><button type="button" data-reka-collection-item="" id="reka-navigation-menu-v-0-trigger-item-2" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" aria-controls="reka-navigation-menu-v-0-content-item-2" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-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 px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-primary before:bg-elevated"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5 text-primary group-data-[state=open]:text-primary"></svg><span class="truncate">Components<!--v-if--></span><span as="span" class="group ms-auto inline-flex gap-1.5 items-center"><!--v-if--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200"></svg></span></button>
         <!--v-if-->
         <!--teleport start-->
-        <!---->
         <!--teleport end-->
         <!--v-if-->
       </li>
@@ -1463,7 +3633,96 @@ exports[`NavigationMenu > renders without externalIcon correctly 1`] = `
   <!--v-if-->
   <div class="absolute top-full left-0 flex w-full justify-center">
     <!--v-if-->
-    <!---->
+    <div class="relative overflow-hidden bg-default shadow-lg rounded-md ring ring-default h-(--reka-navigation-menu-viewport-height) w-full transition-[width,height,left] duration-200 origin-[top_center] data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] z-[1]" data-state="closed" data-orientation="horizontal" style="pointer-events: none;" hidden="">
+      <div data-dismissable-layer="" style="pointer-events: none;" id="reka-navigation-menu-v-0-content-item-1" aria-labelledby="reka-navigation-menu-v-0-trigger-item-1" data-state="closed" data-orientation="horizontal" class="absolute top-0 left-0 w-full max-h-[70vh] overflow-y-auto 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]" hidden="">
+        <ul class="isolate grid p-2 grid-cols-2 gap-2">
+          <li class=""><button type="button" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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 px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-dimmed group-hover:text-default transition-colors"></svg>
+              <div class="min-w-0">
+                <p class="truncate font-medium">Introduction
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Fully styled and customizable components for Nuxt.</p>
+              </div>
+            </button></li>
+          <li class=""><button type="button" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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 px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-dimmed group-hover:text-default transition-colors"></svg>
+              <div class="min-w-0">
+                <p class="truncate font-medium">Installation
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Learn how to install and configure Nuxt UI in your application.</p>
+              </div>
+            </button></li>
+          <li class=""><button type="button" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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 px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-dimmed group-hover:text-default transition-colors"></svg>
+              <div class="min-w-0">
+                <p class="truncate font-medium">Theming
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Learn how to customize the look and feel of the components.</p>
+              </div>
+            </button></li>
+          <li class=""><button type="button" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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 px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-dimmed group-hover:text-default transition-colors"></svg>
+              <div class="min-w-0">
+                <p class="truncate font-medium">Shortcuts
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Learn how to display and define keyboard shortcuts in your app.</p>
+              </div>
+            </button></li>
+        </ul>
+      </div>
+      <div data-dismissable-layer="" style="pointer-events: none;" id="reka-navigation-menu-v-0-content-item-2" aria-labelledby="reka-navigation-menu-v-0-trigger-item-2" data-state="closed" data-orientation="horizontal" class="absolute top-0 left-0 w-full max-h-[70vh] overflow-y-auto 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]" hidden="">
+        <ul class="isolate grid p-2 grid-cols-2 gap-2">
+          <li class=""><a href="/components/link" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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 px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-dimmed group-hover:text-default transition-colors"></svg>
+              <div class="min-w-0">
+                <p class="truncate font-medium">Link
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Use NuxtLink with superpowers.</p>
+              </div>
+            </a></li>
+          <li class=""><a href="/components/modal" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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 px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-dimmed group-hover:text-default transition-colors"></svg>
+              <div class="min-w-0">
+                <p class="truncate font-medium">Modal
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Display a modal within your application.</p>
+              </div>
+            </a></li>
+          <li class=""><a href="/components/navigation-menu" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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 px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-dimmed group-hover:text-default transition-colors"></svg>
+              <div class="min-w-0">
+                <p class="truncate font-medium">NavigationMenu
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Display a list of links.</p>
+              </div>
+            </a></li>
+          <li class=""><a href="/components/pagination" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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 px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-dimmed group-hover:text-default transition-colors"></svg>
+              <div class="min-w-0">
+                <p class="truncate font-medium">Pagination
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Display a list of pages.</p>
+              </div>
+            </a></li>
+          <li class=""><a href="/components/popover" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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 px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-dimmed group-hover:text-default transition-colors"></svg>
+              <div class="min-w-0">
+                <p class="truncate font-medium">Popover
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Display a non-modal dialog that floats around a trigger element.</p>
+              </div>
+            </a></li>
+          <li class=""><a href="/components/progress" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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 px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-5 shrink-0 text-dimmed group-hover:text-default transition-colors"></svg>
+              <div class="min-w-0">
+                <p class="truncate font-medium">Progress
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Show a horizontal bar to indicate task progression.</p>
+              </div>
+            </a></li>
+        </ul>
+      </div>
+    </div>
   </div>
 </nav>"
 `;
diff --git a/test/components/__snapshots__/NavigationMenu.spec.ts.snap b/test/components/__snapshots__/NavigationMenu.spec.ts.snap
index 1208e78bcc..7b83b16d6c 100644
--- a/test/components/__snapshots__/NavigationMenu.spec.ts.snap
+++ b/test/components/__snapshots__/NavigationMenu.spec.ts.snap
@@ -46,8 +46,94 @@ exports[`NavigationMenu > renders with arrow correctly 1`] = `
     <!--teleport start-->
     <!--teleport end-->
     <div class="relative overflow-hidden bg-default shadow-lg rounded-md ring ring-default h-(--reka-navigation-menu-viewport-height) w-full transition-[width,height,left] duration-200 origin-[top_center] data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] z-[1]" data-state="open" data-orientation="horizontal">
-      <!---->
-      <!---->
+      <div data-dismissable-layer="" style="pointer-events: none;" id="reka-navigation-menu-v-0-0-0-content-item-1" aria-labelledby="reka-navigation-menu-v-0-0-0-trigger-item-1" data-state="closed" data-orientation="horizontal" class="absolute top-0 left-0 w-full max-h-[70vh] overflow-y-auto 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]" hidden="">
+        <ul class="isolate grid p-2 grid-cols-2 gap-2">
+          <li class=""><button type="button" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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 px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><span class="iconify i-lucide:house size-5 shrink-0 text-dimmed group-hover:text-default transition-colors" aria-hidden="true"></span>
+              <div class="min-w-0">
+                <p class="truncate font-medium">Introduction
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Fully styled and customizable components for Nuxt.</p>
+              </div>
+            </button></li>
+          <li class=""><button type="button" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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 px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><span class="iconify i-lucide:cloud-download size-5 shrink-0 text-dimmed group-hover:text-default transition-colors" aria-hidden="true"></span>
+              <div class="min-w-0">
+                <p class="truncate font-medium">Installation
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Learn how to install and configure Nuxt UI in your application.</p>
+              </div>
+            </button></li>
+          <li class=""><button type="button" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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 px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><span class="iconify i-lucide:swatch-book size-5 shrink-0 text-dimmed group-hover:text-default transition-colors" aria-hidden="true"></span>
+              <div class="min-w-0">
+                <p class="truncate font-medium">Theming
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Learn how to customize the look and feel of the components.</p>
+              </div>
+            </button></li>
+          <li class=""><button type="button" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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 px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><span class="iconify i-lucide:monitor size-5 shrink-0 text-dimmed group-hover:text-default transition-colors" aria-hidden="true"></span>
+              <div class="min-w-0">
+                <p class="truncate font-medium">Shortcuts
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Learn how to display and define keyboard shortcuts in your app.</p>
+              </div>
+            </button></li>
+        </ul>
+      </div>
+      <div data-dismissable-layer="" style="pointer-events: none;" id="reka-navigation-menu-v-0-0-0-content-item-2" aria-labelledby="reka-navigation-menu-v-0-0-0-trigger-item-2" data-state="closed" data-orientation="horizontal" class="absolute top-0 left-0 w-full max-h-[70vh] overflow-y-auto 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]" hidden="">
+        <ul class="isolate grid p-2 grid-cols-2 gap-2">
+          <li class=""><a href="/components/link" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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 px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><span class="iconify i-lucide:file size-5 shrink-0 text-dimmed group-hover:text-default transition-colors" aria-hidden="true"></span>
+              <div class="min-w-0">
+                <p class="truncate font-medium">Link
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Use NuxtLink with superpowers.</p>
+              </div>
+            </a></li>
+          <li class=""><a href="/components/modal" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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 px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><span class="iconify i-lucide:file size-5 shrink-0 text-dimmed group-hover:text-default transition-colors" aria-hidden="true"></span>
+              <div class="min-w-0">
+                <p class="truncate font-medium">Modal
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Display a modal within your application.</p>
+              </div>
+            </a></li>
+          <li class=""><a href="/components/navigation-menu" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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 px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><span class="iconify i-lucide:file size-5 shrink-0 text-dimmed group-hover:text-default transition-colors" aria-hidden="true"></span>
+              <div class="min-w-0">
+                <p class="truncate font-medium">NavigationMenu
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Display a list of links.</p>
+              </div>
+            </a></li>
+          <li class=""><a href="/components/pagination" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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 px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><span class="iconify i-lucide:file size-5 shrink-0 text-dimmed group-hover:text-default transition-colors" aria-hidden="true"></span>
+              <div class="min-w-0">
+                <p class="truncate font-medium">Pagination
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Display a list of pages.</p>
+              </div>
+            </a></li>
+          <li class=""><a href="/components/popover" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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 px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><span class="iconify i-lucide:file size-5 shrink-0 text-dimmed group-hover:text-default transition-colors" aria-hidden="true"></span>
+              <div class="min-w-0">
+                <p class="truncate font-medium">Popover
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Display a non-modal dialog that floats around a trigger element.</p>
+              </div>
+            </a></li>
+          <li class=""><a href="/components/progress" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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 px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><span class="iconify i-lucide:file size-5 shrink-0 text-dimmed group-hover:text-default transition-colors" aria-hidden="true"></span>
+              <div class="min-w-0">
+                <p class="truncate font-medium">Progress
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Show a horizontal bar to indicate task progression.</p>
+              </div>
+            </a></li>
+        </ul>
+      </div>
     </div>
   </div>
 </nav>"
@@ -63,14 +149,12 @@ exports[`NavigationMenu > renders with as correctly 1`] = `
         </button>
         <!--v-if-->
         <!--teleport start-->
-        <!---->
         <!--teleport end-->
         <!--v-if-->
       </li>
       <li data-menu-item="" class="min-w-0 py-2"><button type="button" data-reka-collection-item="" id="reka-navigation-menu-v-0-0-0-trigger-item-2" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" aria-controls="reka-navigation-menu-v-0-0-0-content-item-2" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-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 px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-primary before:bg-elevated"><span class="iconify i-lucide:box shrink-0 size-5 text-primary group-data-[state=open]:text-primary" aria-hidden="true"></span><span class="truncate">Components<!--v-if--></span><span as="span" class="group ms-auto inline-flex gap-1.5 items-center"><!--v-if--><span class="iconify i-lucide:chevron-down size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></span></button>
         <!--v-if-->
         <!--teleport start-->
-        <!---->
         <!--teleport end-->
         <!--v-if-->
       </li>
@@ -96,7 +180,96 @@ exports[`NavigationMenu > renders with as correctly 1`] = `
   <!--v-if-->
   <div class="absolute top-full left-0 flex w-full justify-center">
     <!--v-if-->
-    <!---->
+    <div class="relative overflow-hidden bg-default shadow-lg rounded-md ring ring-default h-(--reka-navigation-menu-viewport-height) w-full transition-[width,height,left] duration-200 origin-[top_center] data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] z-[1]" data-state="closed" data-orientation="horizontal" style="pointer-events: none;" hidden="">
+      <div data-dismissable-layer="" style="pointer-events: none;" id="reka-navigation-menu-v-0-0-0-content-item-1" aria-labelledby="reka-navigation-menu-v-0-0-0-trigger-item-1" data-state="closed" data-orientation="horizontal" class="absolute top-0 left-0 w-full max-h-[70vh] overflow-y-auto 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]" hidden="">
+        <ul class="isolate grid p-2 grid-cols-2 gap-2">
+          <li class=""><button type="button" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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 px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><span class="iconify i-lucide:house size-5 shrink-0 text-dimmed group-hover:text-default transition-colors" aria-hidden="true"></span>
+              <div class="min-w-0">
+                <p class="truncate font-medium">Introduction
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Fully styled and customizable components for Nuxt.</p>
+              </div>
+            </button></li>
+          <li class=""><button type="button" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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 px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><span class="iconify i-lucide:cloud-download size-5 shrink-0 text-dimmed group-hover:text-default transition-colors" aria-hidden="true"></span>
+              <div class="min-w-0">
+                <p class="truncate font-medium">Installation
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Learn how to install and configure Nuxt UI in your application.</p>
+              </div>
+            </button></li>
+          <li class=""><button type="button" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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 px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><span class="iconify i-lucide:swatch-book size-5 shrink-0 text-dimmed group-hover:text-default transition-colors" aria-hidden="true"></span>
+              <div class="min-w-0">
+                <p class="truncate font-medium">Theming
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Learn how to customize the look and feel of the components.</p>
+              </div>
+            </button></li>
+          <li class=""><button type="button" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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 px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><span class="iconify i-lucide:monitor size-5 shrink-0 text-dimmed group-hover:text-default transition-colors" aria-hidden="true"></span>
+              <div class="min-w-0">
+                <p class="truncate font-medium">Shortcuts
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Learn how to display and define keyboard shortcuts in your app.</p>
+              </div>
+            </button></li>
+        </ul>
+      </div>
+      <div data-dismissable-layer="" style="pointer-events: none;" id="reka-navigation-menu-v-0-0-0-content-item-2" aria-labelledby="reka-navigation-menu-v-0-0-0-trigger-item-2" data-state="closed" data-orientation="horizontal" class="absolute top-0 left-0 w-full max-h-[70vh] overflow-y-auto 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]" hidden="">
+        <ul class="isolate grid p-2 grid-cols-2 gap-2">
+          <li class=""><a href="/components/link" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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 px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><span class="iconify i-lucide:file size-5 shrink-0 text-dimmed group-hover:text-default transition-colors" aria-hidden="true"></span>
+              <div class="min-w-0">
+                <p class="truncate font-medium">Link
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Use NuxtLink with superpowers.</p>
+              </div>
+            </a></li>
+          <li class=""><a href="/components/modal" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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 px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><span class="iconify i-lucide:file size-5 shrink-0 text-dimmed group-hover:text-default transition-colors" aria-hidden="true"></span>
+              <div class="min-w-0">
+                <p class="truncate font-medium">Modal
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Display a modal within your application.</p>
+              </div>
+            </a></li>
+          <li class=""><a href="/components/navigation-menu" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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 px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><span class="iconify i-lucide:file size-5 shrink-0 text-dimmed group-hover:text-default transition-colors" aria-hidden="true"></span>
+              <div class="min-w-0">
+                <p class="truncate font-medium">NavigationMenu
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Display a list of links.</p>
+              </div>
+            </a></li>
+          <li class=""><a href="/components/pagination" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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 px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><span class="iconify i-lucide:file size-5 shrink-0 text-dimmed group-hover:text-default transition-colors" aria-hidden="true"></span>
+              <div class="min-w-0">
+                <p class="truncate font-medium">Pagination
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Display a list of pages.</p>
+              </div>
+            </a></li>
+          <li class=""><a href="/components/popover" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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 px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><span class="iconify i-lucide:file size-5 shrink-0 text-dimmed group-hover:text-default transition-colors" aria-hidden="true"></span>
+              <div class="min-w-0">
+                <p class="truncate font-medium">Popover
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Display a non-modal dialog that floats around a trigger element.</p>
+              </div>
+            </a></li>
+          <li class=""><a href="/components/progress" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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 px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><span class="iconify i-lucide:file size-5 shrink-0 text-dimmed group-hover:text-default transition-colors" aria-hidden="true"></span>
+              <div class="min-w-0">
+                <p class="truncate font-medium">Progress
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Show a horizontal bar to indicate task progression.</p>
+              </div>
+            </a></li>
+        </ul>
+      </div>
+    </div>
   </div>
 </section>"
 `;
@@ -111,14 +284,12 @@ exports[`NavigationMenu > renders with class correctly 1`] = `
         </button>
         <!--v-if-->
         <!--teleport start-->
-        <!---->
         <!--teleport end-->
         <!--v-if-->
       </li>
       <li data-menu-item="" class="min-w-0 py-2"><button type="button" data-reka-collection-item="" id="reka-navigation-menu-v-0-0-0-trigger-item-2" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" aria-controls="reka-navigation-menu-v-0-0-0-content-item-2" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-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 px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-primary before:bg-elevated"><span class="iconify i-lucide:box shrink-0 size-5 text-primary group-data-[state=open]:text-primary" aria-hidden="true"></span><span class="truncate">Components<!--v-if--></span><span as="span" class="group ms-auto inline-flex gap-1.5 items-center"><!--v-if--><span class="iconify i-lucide:chevron-down size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></span></button>
         <!--v-if-->
         <!--teleport start-->
-        <!---->
         <!--teleport end-->
         <!--v-if-->
       </li>
@@ -144,89 +315,262 @@ exports[`NavigationMenu > renders with class correctly 1`] = `
   <!--v-if-->
   <div class="absolute top-full left-0 flex w-full justify-center">
     <!--v-if-->
-    <!---->
-  </div>
-</nav>"
-`;
-
-exports[`NavigationMenu > renders with content orientation vertical correctly 1`] = `
-"<nav data-collapsed="false" class="relative flex gap-1.5 [&amp;>div]:min-w-0 items-center justify-between" aria-label="Main" data-orientation="horizontal" dir="ltr" data-reka-navigation-menu="">
-  <div style="position: relative;">
-    <ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
-      <li data-menu-item="" class="min-w-0 py-2"></li>
-      <li data-menu-item="" class="min-w-0 py-2"><button type="button" data-reka-collection-item="" id="reka-navigation-menu-v-0-0-0-trigger-item-1" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" aria-controls="reka-navigation-menu-v-0-0-0-content-item-1" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-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 px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-muted hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors data-[state=open]:text-highlighted data-[state=open]:before:bg-elevated/50"><span class="iconify i-lucide:book-open shrink-0 size-5 text-dimmed group-hover:text-default transition-colors group-data-[state=open]:text-default" aria-hidden="true"></span><span class="truncate">Documentation<!--v-if--></span><span as="span" class="group ms-auto inline-flex gap-1.5 items-center"><span class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-sm ring ring-inset ring-accented text-default bg-default shrink-0"><!--v-if--><span class="truncate">10</span>
-          <!--v-if--></span><span class="iconify i-lucide:chevron-down size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></span>
-        </button>
-        <!--v-if-->
-        <!--teleport start-->
-        <!--teleport end-->
-        <!--v-if-->
-      </li>
-      <li data-menu-item="" class="min-w-0 py-2"><button type="button" data-reka-collection-item="" id="reka-navigation-menu-v-0-0-0-trigger-item-2" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" aria-controls="reka-navigation-menu-v-0-0-0-content-item-2" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-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 px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-primary before:bg-elevated"><span class="iconify i-lucide:box shrink-0 size-5 text-primary group-data-[state=open]:text-primary" aria-hidden="true"></span><span class="truncate">Components<!--v-if--></span><span as="span" class="group ms-auto inline-flex gap-1.5 items-center"><!--v-if--><span class="iconify i-lucide:chevron-down size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></span></button>
-        <!--v-if-->
-        <!--teleport start-->
-        <!--teleport end-->
-        <!--v-if-->
-      </li>
-    </ul>
-  </div>
-  <!--v-if-->
-  <div style="position: relative;">
-    <ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
-      <li data-menu-item="" class="min-w-0 py-2"><a href="https://github.com/nuxt/ui" rel="noopener noreferrer" target="_blank" data-reka-collection-item="" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-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 px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-muted hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors data-[state=open]:text-highlighted data-[state=open]:before:bg-elevated/50"><span class="iconify i-simple-icons:github shrink-0 size-5 text-dimmed group-hover:text-default transition-colors group-data-[state=open]:text-default" aria-hidden="true"></span><span class="truncate">GitHub<span class="iconify i-lucide:arrow-up-right inline-block size-3 align-top text-dimmed" aria-hidden="true"></span></span>
-          <!--v-if-->
-        </a>
-        <!--v-if-->
-        <!--v-if-->
-      </li>
-      <li data-menu-item="" class="min-w-0 py-2"><button type="button" disabled="" data-reka-collection-item="" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-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 px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-muted cursor-not-allowed opacity-75"><span class="iconify i-lucide:circle-help shrink-0 size-5 text-dimmed" aria-hidden="true"></span><span class="truncate">Help<!--v-if--></span>
-          <!--v-if-->
-        </button>
-        <!--v-if-->
-        <!--v-if-->
-      </li>
-    </ul>
-  </div>
-  <!--v-if-->
-  <div class="absolute top-full left-0 flex w-full">
-    <!--v-if-->
-    <div class="relative overflow-hidden bg-default shadow-lg rounded-md ring ring-default h-(--reka-navigation-menu-viewport-height) w-full transition-[width,height,left] duration-200 origin-[top_center] data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] z-[1] sm:w-(--reka-navigation-menu-viewport-width) left-(--reka-navigation-menu-viewport-left)" data-state="open" data-orientation="horizontal">
-      <!---->
-      <!---->
-    </div>
-  </div>
-</nav>"
-`;
-
-exports[`NavigationMenu > renders with custom slot correctly 1`] = `
-"<nav data-collapsed="false" class="relative flex gap-1.5 [&amp;>div]:min-w-0 items-center justify-between" aria-label="Main" data-orientation="horizontal" dir="ltr" data-reka-navigation-menu="">
-  <div style="position: relative;">
-    <ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
-      <li data-menu-item="" class="min-w-0 py-2"></li>
-      <li data-menu-item="" class="min-w-0 py-2"><button type="button" data-reka-collection-item="" id="reka-navigation-menu-v-0-0-0-trigger-item-1" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" aria-controls="reka-navigation-menu-v-0-0-0-content-item-1" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-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 px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-muted hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors data-[state=open]:text-highlighted data-[state=open]:before:bg-elevated/50"><span class="iconify i-lucide:book-open shrink-0 size-5 text-dimmed group-hover:text-default transition-colors group-data-[state=open]:text-default" aria-hidden="true"></span><span class="truncate">Documentation<!--v-if--></span><span as="span" class="group ms-auto inline-flex gap-1.5 items-center"><span class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-sm ring ring-inset ring-accented text-default bg-default shrink-0"><!--v-if--><span class="truncate">10</span>
-          <!--v-if--></span><span class="iconify i-lucide:chevron-down size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></span>
-        </button>
-        <!--v-if-->
-        <!--teleport start-->
-        <!---->
-        <!--teleport end-->
-        <!--v-if-->
-      </li>
-      <li data-menu-item="" class="min-w-0 py-2"><button type="button" data-reka-collection-item="" id="reka-navigation-menu-v-0-0-0-trigger-item-2" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" aria-controls="reka-navigation-menu-v-0-0-0-content-item-2" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-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 px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-primary before:bg-elevated"><span class="iconify i-lucide:box shrink-0 size-5 text-primary group-data-[state=open]:text-primary" aria-hidden="true"></span><span class="truncate">Components<!--v-if--></span><span as="span" class="group ms-auto inline-flex gap-1.5 items-center"><!--v-if--><span class="iconify i-lucide:chevron-down size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></span></button>
-        <!--v-if-->
-        <!--teleport start-->
-        <!---->
-        <!--teleport end-->
-        <!--v-if-->
-      </li>
-    </ul>
-  </div>
-  <!--v-if-->
-  <div style="position: relative;">
-    <ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
-      <li data-menu-item="" class="min-w-0 py-2"><a href="https://github.com/nuxt/ui" rel="noopener noreferrer" target="_blank" data-reka-collection-item="" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-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 px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-muted hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors data-[state=open]:text-highlighted data-[state=open]:before:bg-elevated/50"><span class="iconify i-simple-icons:github shrink-0 size-5 text-dimmed group-hover:text-default transition-colors group-data-[state=open]:text-default" aria-hidden="true"></span><span class="truncate">GitHub<span class="iconify i-lucide:arrow-up-right inline-block size-3 align-top text-dimmed" aria-hidden="true"></span></span>
-          <!--v-if-->
-        </a>
+    <div class="relative overflow-hidden bg-default shadow-lg rounded-md ring ring-default h-(--reka-navigation-menu-viewport-height) w-full transition-[width,height,left] duration-200 origin-[top_center] data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] z-[1]" data-state="closed" data-orientation="horizontal" style="pointer-events: none;" hidden="">
+      <div data-dismissable-layer="" style="pointer-events: none;" id="reka-navigation-menu-v-0-0-0-content-item-1" aria-labelledby="reka-navigation-menu-v-0-0-0-trigger-item-1" data-state="closed" data-orientation="horizontal" class="absolute top-0 left-0 w-full max-h-[70vh] overflow-y-auto 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]" hidden="">
+        <ul class="isolate grid p-2 grid-cols-2 gap-2">
+          <li class=""><button type="button" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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 px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><span class="iconify i-lucide:house size-5 shrink-0 text-dimmed group-hover:text-default transition-colors" aria-hidden="true"></span>
+              <div class="min-w-0">
+                <p class="truncate font-medium">Introduction
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Fully styled and customizable components for Nuxt.</p>
+              </div>
+            </button></li>
+          <li class=""><button type="button" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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 px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><span class="iconify i-lucide:cloud-download size-5 shrink-0 text-dimmed group-hover:text-default transition-colors" aria-hidden="true"></span>
+              <div class="min-w-0">
+                <p class="truncate font-medium">Installation
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Learn how to install and configure Nuxt UI in your application.</p>
+              </div>
+            </button></li>
+          <li class=""><button type="button" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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 px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><span class="iconify i-lucide:swatch-book size-5 shrink-0 text-dimmed group-hover:text-default transition-colors" aria-hidden="true"></span>
+              <div class="min-w-0">
+                <p class="truncate font-medium">Theming
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Learn how to customize the look and feel of the components.</p>
+              </div>
+            </button></li>
+          <li class=""><button type="button" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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 px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><span class="iconify i-lucide:monitor size-5 shrink-0 text-dimmed group-hover:text-default transition-colors" aria-hidden="true"></span>
+              <div class="min-w-0">
+                <p class="truncate font-medium">Shortcuts
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Learn how to display and define keyboard shortcuts in your app.</p>
+              </div>
+            </button></li>
+        </ul>
+      </div>
+      <div data-dismissable-layer="" style="pointer-events: none;" id="reka-navigation-menu-v-0-0-0-content-item-2" aria-labelledby="reka-navigation-menu-v-0-0-0-trigger-item-2" data-state="closed" data-orientation="horizontal" class="absolute top-0 left-0 w-full max-h-[70vh] overflow-y-auto 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]" hidden="">
+        <ul class="isolate grid p-2 grid-cols-2 gap-2">
+          <li class=""><a href="/components/link" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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 px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><span class="iconify i-lucide:file size-5 shrink-0 text-dimmed group-hover:text-default transition-colors" aria-hidden="true"></span>
+              <div class="min-w-0">
+                <p class="truncate font-medium">Link
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Use NuxtLink with superpowers.</p>
+              </div>
+            </a></li>
+          <li class=""><a href="/components/modal" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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 px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><span class="iconify i-lucide:file size-5 shrink-0 text-dimmed group-hover:text-default transition-colors" aria-hidden="true"></span>
+              <div class="min-w-0">
+                <p class="truncate font-medium">Modal
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Display a modal within your application.</p>
+              </div>
+            </a></li>
+          <li class=""><a href="/components/navigation-menu" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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 px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><span class="iconify i-lucide:file size-5 shrink-0 text-dimmed group-hover:text-default transition-colors" aria-hidden="true"></span>
+              <div class="min-w-0">
+                <p class="truncate font-medium">NavigationMenu
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Display a list of links.</p>
+              </div>
+            </a></li>
+          <li class=""><a href="/components/pagination" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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 px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><span class="iconify i-lucide:file size-5 shrink-0 text-dimmed group-hover:text-default transition-colors" aria-hidden="true"></span>
+              <div class="min-w-0">
+                <p class="truncate font-medium">Pagination
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Display a list of pages.</p>
+              </div>
+            </a></li>
+          <li class=""><a href="/components/popover" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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 px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><span class="iconify i-lucide:file size-5 shrink-0 text-dimmed group-hover:text-default transition-colors" aria-hidden="true"></span>
+              <div class="min-w-0">
+                <p class="truncate font-medium">Popover
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Display a non-modal dialog that floats around a trigger element.</p>
+              </div>
+            </a></li>
+          <li class=""><a href="/components/progress" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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 px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><span class="iconify i-lucide:file size-5 shrink-0 text-dimmed group-hover:text-default transition-colors" aria-hidden="true"></span>
+              <div class="min-w-0">
+                <p class="truncate font-medium">Progress
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Show a horizontal bar to indicate task progression.</p>
+              </div>
+            </a></li>
+        </ul>
+      </div>
+    </div>
+  </div>
+</nav>"
+`;
+
+exports[`NavigationMenu > renders with content orientation vertical correctly 1`] = `
+"<nav data-collapsed="false" class="relative flex gap-1.5 [&amp;>div]:min-w-0 items-center justify-between" aria-label="Main" data-orientation="horizontal" dir="ltr" data-reka-navigation-menu="">
+  <div style="position: relative;">
+    <ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
+      <li data-menu-item="" class="min-w-0 py-2"></li>
+      <li data-menu-item="" class="min-w-0 py-2"><button type="button" data-reka-collection-item="" id="reka-navigation-menu-v-0-0-0-trigger-item-1" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" aria-controls="reka-navigation-menu-v-0-0-0-content-item-1" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-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 px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-muted hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors data-[state=open]:text-highlighted data-[state=open]:before:bg-elevated/50"><span class="iconify i-lucide:book-open shrink-0 size-5 text-dimmed group-hover:text-default transition-colors group-data-[state=open]:text-default" aria-hidden="true"></span><span class="truncate">Documentation<!--v-if--></span><span as="span" class="group ms-auto inline-flex gap-1.5 items-center"><span class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-sm ring ring-inset ring-accented text-default bg-default shrink-0"><!--v-if--><span class="truncate">10</span>
+          <!--v-if--></span><span class="iconify i-lucide:chevron-down size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></span>
+        </button>
+        <!--v-if-->
+        <!--teleport start-->
+        <!--teleport end-->
+        <!--v-if-->
+      </li>
+      <li data-menu-item="" class="min-w-0 py-2"><button type="button" data-reka-collection-item="" id="reka-navigation-menu-v-0-0-0-trigger-item-2" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" aria-controls="reka-navigation-menu-v-0-0-0-content-item-2" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-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 px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-primary before:bg-elevated"><span class="iconify i-lucide:box shrink-0 size-5 text-primary group-data-[state=open]:text-primary" aria-hidden="true"></span><span class="truncate">Components<!--v-if--></span><span as="span" class="group ms-auto inline-flex gap-1.5 items-center"><!--v-if--><span class="iconify i-lucide:chevron-down size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></span></button>
+        <!--v-if-->
+        <!--teleport start-->
+        <!--teleport end-->
+        <!--v-if-->
+      </li>
+    </ul>
+  </div>
+  <!--v-if-->
+  <div style="position: relative;">
+    <ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
+      <li data-menu-item="" class="min-w-0 py-2"><a href="https://github.com/nuxt/ui" rel="noopener noreferrer" target="_blank" data-reka-collection-item="" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-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 px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-muted hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors data-[state=open]:text-highlighted data-[state=open]:before:bg-elevated/50"><span class="iconify i-simple-icons:github shrink-0 size-5 text-dimmed group-hover:text-default transition-colors group-data-[state=open]:text-default" aria-hidden="true"></span><span class="truncate">GitHub<span class="iconify i-lucide:arrow-up-right inline-block size-3 align-top text-dimmed" aria-hidden="true"></span></span>
+          <!--v-if-->
+        </a>
+        <!--v-if-->
+        <!--v-if-->
+      </li>
+      <li data-menu-item="" class="min-w-0 py-2"><button type="button" disabled="" data-reka-collection-item="" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-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 px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-muted cursor-not-allowed opacity-75"><span class="iconify i-lucide:circle-help shrink-0 size-5 text-dimmed" aria-hidden="true"></span><span class="truncate">Help<!--v-if--></span>
+          <!--v-if-->
+        </button>
+        <!--v-if-->
+        <!--v-if-->
+      </li>
+    </ul>
+  </div>
+  <!--v-if-->
+  <div class="absolute top-full left-0 flex w-full">
+    <!--v-if-->
+    <div class="relative overflow-hidden bg-default shadow-lg rounded-md ring ring-default h-(--reka-navigation-menu-viewport-height) w-full transition-[width,height,left] duration-200 origin-[top_center] data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] z-[1] sm:w-(--reka-navigation-menu-viewport-width) left-(--reka-navigation-menu-viewport-left)" data-state="open" data-orientation="horizontal">
+      <div data-dismissable-layer="" style="pointer-events: none;" id="reka-navigation-menu-v-0-0-0-content-item-1" aria-labelledby="reka-navigation-menu-v-0-0-0-trigger-item-1" data-state="closed" data-orientation="horizontal" class="absolute top-0 left-0 max-h-[70vh] overflow-y-auto w-60" hidden="">
+        <ul class="isolate grid p-2 gap-1">
+          <li class=""><button type="button" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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 px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><span class="iconify i-lucide:house size-5 shrink-0 text-dimmed group-hover:text-default transition-colors" aria-hidden="true"></span>
+              <div class="min-w-0">
+                <p class="truncate font-medium">Introduction
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Fully styled and customizable components for Nuxt.</p>
+              </div>
+            </button></li>
+          <li class=""><button type="button" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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 px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><span class="iconify i-lucide:cloud-download size-5 shrink-0 text-dimmed group-hover:text-default transition-colors" aria-hidden="true"></span>
+              <div class="min-w-0">
+                <p class="truncate font-medium">Installation
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Learn how to install and configure Nuxt UI in your application.</p>
+              </div>
+            </button></li>
+          <li class=""><button type="button" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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 px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><span class="iconify i-lucide:swatch-book size-5 shrink-0 text-dimmed group-hover:text-default transition-colors" aria-hidden="true"></span>
+              <div class="min-w-0">
+                <p class="truncate font-medium">Theming
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Learn how to customize the look and feel of the components.</p>
+              </div>
+            </button></li>
+          <li class=""><button type="button" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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 px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><span class="iconify i-lucide:monitor size-5 shrink-0 text-dimmed group-hover:text-default transition-colors" aria-hidden="true"></span>
+              <div class="min-w-0">
+                <p class="truncate font-medium">Shortcuts
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Learn how to display and define keyboard shortcuts in your app.</p>
+              </div>
+            </button></li>
+        </ul>
+      </div>
+      <div data-dismissable-layer="" style="pointer-events: none;" id="reka-navigation-menu-v-0-0-0-content-item-2" aria-labelledby="reka-navigation-menu-v-0-0-0-trigger-item-2" data-state="closed" data-orientation="horizontal" class="absolute top-0 left-0 max-h-[70vh] overflow-y-auto w-60" hidden="">
+        <ul class="isolate grid p-2 gap-1">
+          <li class=""><a href="/components/link" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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 px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><span class="iconify i-lucide:file size-5 shrink-0 text-dimmed group-hover:text-default transition-colors" aria-hidden="true"></span>
+              <div class="min-w-0">
+                <p class="truncate font-medium">Link
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Use NuxtLink with superpowers.</p>
+              </div>
+            </a></li>
+          <li class=""><a href="/components/modal" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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 px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><span class="iconify i-lucide:file size-5 shrink-0 text-dimmed group-hover:text-default transition-colors" aria-hidden="true"></span>
+              <div class="min-w-0">
+                <p class="truncate font-medium">Modal
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Display a modal within your application.</p>
+              </div>
+            </a></li>
+          <li class=""><a href="/components/navigation-menu" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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 px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><span class="iconify i-lucide:file size-5 shrink-0 text-dimmed group-hover:text-default transition-colors" aria-hidden="true"></span>
+              <div class="min-w-0">
+                <p class="truncate font-medium">NavigationMenu
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Display a list of links.</p>
+              </div>
+            </a></li>
+          <li class=""><a href="/components/pagination" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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 px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><span class="iconify i-lucide:file size-5 shrink-0 text-dimmed group-hover:text-default transition-colors" aria-hidden="true"></span>
+              <div class="min-w-0">
+                <p class="truncate font-medium">Pagination
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Display a list of pages.</p>
+              </div>
+            </a></li>
+          <li class=""><a href="/components/popover" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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 px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><span class="iconify i-lucide:file size-5 shrink-0 text-dimmed group-hover:text-default transition-colors" aria-hidden="true"></span>
+              <div class="min-w-0">
+                <p class="truncate font-medium">Popover
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Display a non-modal dialog that floats around a trigger element.</p>
+              </div>
+            </a></li>
+          <li class=""><a href="/components/progress" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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 px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><span class="iconify i-lucide:file size-5 shrink-0 text-dimmed group-hover:text-default transition-colors" aria-hidden="true"></span>
+              <div class="min-w-0">
+                <p class="truncate font-medium">Progress
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Show a horizontal bar to indicate task progression.</p>
+              </div>
+            </a></li>
+        </ul>
+      </div>
+    </div>
+  </div>
+</nav>"
+`;
+
+exports[`NavigationMenu > renders with custom slot correctly 1`] = `
+"<nav data-collapsed="false" class="relative flex gap-1.5 [&amp;>div]:min-w-0 items-center justify-between" aria-label="Main" data-orientation="horizontal" dir="ltr" data-reka-navigation-menu="">
+  <div style="position: relative;">
+    <ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
+      <li data-menu-item="" class="min-w-0 py-2"></li>
+      <li data-menu-item="" class="min-w-0 py-2"><button type="button" data-reka-collection-item="" id="reka-navigation-menu-v-0-0-0-trigger-item-1" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" aria-controls="reka-navigation-menu-v-0-0-0-content-item-1" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-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 px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-muted hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors data-[state=open]:text-highlighted data-[state=open]:before:bg-elevated/50"><span class="iconify i-lucide:book-open shrink-0 size-5 text-dimmed group-hover:text-default transition-colors group-data-[state=open]:text-default" aria-hidden="true"></span><span class="truncate">Documentation<!--v-if--></span><span as="span" class="group ms-auto inline-flex gap-1.5 items-center"><span class="font-medium inline-flex items-center text-[10px]/3 px-1.5 py-1 gap-1 rounded-sm ring ring-inset ring-accented text-default bg-default shrink-0"><!--v-if--><span class="truncate">10</span>
+          <!--v-if--></span><span class="iconify i-lucide:chevron-down size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></span>
+        </button>
+        <!--v-if-->
+        <!--teleport start-->
+        <!--teleport end-->
+        <!--v-if-->
+      </li>
+      <li data-menu-item="" class="min-w-0 py-2"><button type="button" data-reka-collection-item="" id="reka-navigation-menu-v-0-0-0-trigger-item-2" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" aria-controls="reka-navigation-menu-v-0-0-0-content-item-2" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-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 px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-primary before:bg-elevated"><span class="iconify i-lucide:box shrink-0 size-5 text-primary group-data-[state=open]:text-primary" aria-hidden="true"></span><span class="truncate">Components<!--v-if--></span><span as="span" class="group ms-auto inline-flex gap-1.5 items-center"><!--v-if--><span class="iconify i-lucide:chevron-down size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></span></button>
+        <!--v-if-->
+        <!--teleport start-->
+        <!--teleport end-->
+        <!--v-if-->
+      </li>
+    </ul>
+  </div>
+  <!--v-if-->
+  <div style="position: relative;">
+    <ul class="isolate min-w-0 flex items-center" data-orientation="horizontal">
+      <li data-menu-item="" class="min-w-0 py-2"><a href="https://github.com/nuxt/ui" rel="noopener noreferrer" target="_blank" data-reka-collection-item="" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-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 px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-muted hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors data-[state=open]:text-highlighted data-[state=open]:before:bg-elevated/50"><span class="iconify i-simple-icons:github shrink-0 size-5 text-dimmed group-hover:text-default transition-colors group-data-[state=open]:text-default" aria-hidden="true"></span><span class="truncate">GitHub<span class="iconify i-lucide:arrow-up-right inline-block size-3 align-top text-dimmed" aria-hidden="true"></span></span>
+          <!--v-if-->
+        </a>
         <!--v-if-->
         <!--v-if-->
       </li>
@@ -241,7 +585,96 @@ exports[`NavigationMenu > renders with custom slot correctly 1`] = `
   <!--v-if-->
   <div class="absolute top-full left-0 flex w-full justify-center">
     <!--v-if-->
-    <!---->
+    <div class="relative overflow-hidden bg-default shadow-lg rounded-md ring ring-default h-(--reka-navigation-menu-viewport-height) w-full transition-[width,height,left] duration-200 origin-[top_center] data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] z-[1]" data-state="closed" data-orientation="horizontal" style="pointer-events: none;" hidden="">
+      <div data-dismissable-layer="" style="pointer-events: none;" id="reka-navigation-menu-v-0-0-0-content-item-1" aria-labelledby="reka-navigation-menu-v-0-0-0-trigger-item-1" data-state="closed" data-orientation="horizontal" class="absolute top-0 left-0 w-full max-h-[70vh] overflow-y-auto 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]" hidden="">
+        <ul class="isolate grid p-2 grid-cols-2 gap-2">
+          <li class=""><button type="button" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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 px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><span class="iconify i-lucide:house size-5 shrink-0 text-dimmed group-hover:text-default transition-colors" aria-hidden="true"></span>
+              <div class="min-w-0">
+                <p class="truncate font-medium">Introduction
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Fully styled and customizable components for Nuxt.</p>
+              </div>
+            </button></li>
+          <li class=""><button type="button" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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 px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><span class="iconify i-lucide:cloud-download size-5 shrink-0 text-dimmed group-hover:text-default transition-colors" aria-hidden="true"></span>
+              <div class="min-w-0">
+                <p class="truncate font-medium">Installation
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Learn how to install and configure Nuxt UI in your application.</p>
+              </div>
+            </button></li>
+          <li class=""><button type="button" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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 px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><span class="iconify i-lucide:swatch-book size-5 shrink-0 text-dimmed group-hover:text-default transition-colors" aria-hidden="true"></span>
+              <div class="min-w-0">
+                <p class="truncate font-medium">Theming
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Learn how to customize the look and feel of the components.</p>
+              </div>
+            </button></li>
+          <li class=""><button type="button" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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 px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><span class="iconify i-lucide:monitor size-5 shrink-0 text-dimmed group-hover:text-default transition-colors" aria-hidden="true"></span>
+              <div class="min-w-0">
+                <p class="truncate font-medium">Shortcuts
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Learn how to display and define keyboard shortcuts in your app.</p>
+              </div>
+            </button></li>
+        </ul>
+      </div>
+      <div data-dismissable-layer="" style="pointer-events: none;" id="reka-navigation-menu-v-0-0-0-content-item-2" aria-labelledby="reka-navigation-menu-v-0-0-0-trigger-item-2" data-state="closed" data-orientation="horizontal" class="absolute top-0 left-0 w-full max-h-[70vh] overflow-y-auto 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]" hidden="">
+        <ul class="isolate grid p-2 grid-cols-2 gap-2">
+          <li class=""><a href="/components/link" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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 px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><span class="iconify i-lucide:file size-5 shrink-0 text-dimmed group-hover:text-default transition-colors" aria-hidden="true"></span>
+              <div class="min-w-0">
+                <p class="truncate font-medium">Link
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Use NuxtLink with superpowers.</p>
+              </div>
+            </a></li>
+          <li class=""><a href="/components/modal" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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 px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><span class="iconify i-lucide:file size-5 shrink-0 text-dimmed group-hover:text-default transition-colors" aria-hidden="true"></span>
+              <div class="min-w-0">
+                <p class="truncate font-medium">Modal
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Display a modal within your application.</p>
+              </div>
+            </a></li>
+          <li class=""><a href="/components/navigation-menu" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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 px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><span class="iconify i-lucide:file size-5 shrink-0 text-dimmed group-hover:text-default transition-colors" aria-hidden="true"></span>
+              <div class="min-w-0">
+                <p class="truncate font-medium">NavigationMenu
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Display a list of links.</p>
+              </div>
+            </a></li>
+          <li class=""><a href="/components/pagination" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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 px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><span class="iconify i-lucide:file size-5 shrink-0 text-dimmed group-hover:text-default transition-colors" aria-hidden="true"></span>
+              <div class="min-w-0">
+                <p class="truncate font-medium">Pagination
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Display a list of pages.</p>
+              </div>
+            </a></li>
+          <li class=""><a href="/components/popover" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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 px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><span class="iconify i-lucide:file size-5 shrink-0 text-dimmed group-hover:text-default transition-colors" aria-hidden="true"></span>
+              <div class="min-w-0">
+                <p class="truncate font-medium">Popover
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Display a non-modal dialog that floats around a trigger element.</p>
+              </div>
+            </a></li>
+          <li class=""><a href="/components/progress" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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 px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><span class="iconify i-lucide:file size-5 shrink-0 text-dimmed group-hover:text-default transition-colors" aria-hidden="true"></span>
+              <div class="min-w-0">
+                <p class="truncate font-medium">Progress
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Show a horizontal bar to indicate task progression.</p>
+              </div>
+            </a></li>
+        </ul>
+      </div>
+    </div>
   </div>
 </nav>"
 `;
@@ -256,14 +689,12 @@ exports[`NavigationMenu > renders with externalIcon correctly 1`] = `
         </button>
         <!--v-if-->
         <!--teleport start-->
-        <!---->
         <!--teleport end-->
         <!--v-if-->
       </li>
       <li data-menu-item="" class="min-w-0 py-2"><button type="button" data-reka-collection-item="" id="reka-navigation-menu-v-0-0-0-trigger-item-2" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" aria-controls="reka-navigation-menu-v-0-0-0-content-item-2" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-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 px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-primary before:bg-elevated"><span class="iconify i-lucide:box shrink-0 size-5 text-primary group-data-[state=open]:text-primary" aria-hidden="true"></span><span class="truncate">Components<!--v-if--></span><span as="span" class="group ms-auto inline-flex gap-1.5 items-center"><!--v-if--><span class="iconify i-lucide:chevron-down size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></span></button>
         <!--v-if-->
         <!--teleport start-->
-        <!---->
         <!--teleport end-->
         <!--v-if-->
       </li>
@@ -289,7 +720,96 @@ exports[`NavigationMenu > renders with externalIcon correctly 1`] = `
   <!--v-if-->
   <div class="absolute top-full left-0 flex w-full justify-center">
     <!--v-if-->
-    <!---->
+    <div class="relative overflow-hidden bg-default shadow-lg rounded-md ring ring-default h-(--reka-navigation-menu-viewport-height) w-full transition-[width,height,left] duration-200 origin-[top_center] data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] z-[1]" data-state="closed" data-orientation="horizontal" style="pointer-events: none;" hidden="">
+      <div data-dismissable-layer="" style="pointer-events: none;" id="reka-navigation-menu-v-0-0-0-content-item-1" aria-labelledby="reka-navigation-menu-v-0-0-0-trigger-item-1" data-state="closed" data-orientation="horizontal" class="absolute top-0 left-0 w-full max-h-[70vh] overflow-y-auto 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]" hidden="">
+        <ul class="isolate grid p-2 grid-cols-2 gap-2">
+          <li class=""><button type="button" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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 px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><span class="iconify i-lucide:house size-5 shrink-0 text-dimmed group-hover:text-default transition-colors" aria-hidden="true"></span>
+              <div class="min-w-0">
+                <p class="truncate font-medium">Introduction
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Fully styled and customizable components for Nuxt.</p>
+              </div>
+            </button></li>
+          <li class=""><button type="button" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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 px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><span class="iconify i-lucide:cloud-download size-5 shrink-0 text-dimmed group-hover:text-default transition-colors" aria-hidden="true"></span>
+              <div class="min-w-0">
+                <p class="truncate font-medium">Installation
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Learn how to install and configure Nuxt UI in your application.</p>
+              </div>
+            </button></li>
+          <li class=""><button type="button" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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 px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><span class="iconify i-lucide:swatch-book size-5 shrink-0 text-dimmed group-hover:text-default transition-colors" aria-hidden="true"></span>
+              <div class="min-w-0">
+                <p class="truncate font-medium">Theming
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Learn how to customize the look and feel of the components.</p>
+              </div>
+            </button></li>
+          <li class=""><button type="button" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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 px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><span class="iconify i-lucide:monitor size-5 shrink-0 text-dimmed group-hover:text-default transition-colors" aria-hidden="true"></span>
+              <div class="min-w-0">
+                <p class="truncate font-medium">Shortcuts
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Learn how to display and define keyboard shortcuts in your app.</p>
+              </div>
+            </button></li>
+        </ul>
+      </div>
+      <div data-dismissable-layer="" style="pointer-events: none;" id="reka-navigation-menu-v-0-0-0-content-item-2" aria-labelledby="reka-navigation-menu-v-0-0-0-trigger-item-2" data-state="closed" data-orientation="horizontal" class="absolute top-0 left-0 w-full max-h-[70vh] overflow-y-auto 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]" hidden="">
+        <ul class="isolate grid p-2 grid-cols-2 gap-2">
+          <li class=""><a href="/components/link" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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 px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><span class="iconify i-lucide:file size-5 shrink-0 text-dimmed group-hover:text-default transition-colors" aria-hidden="true"></span>
+              <div class="min-w-0">
+                <p class="truncate font-medium">Link
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Use NuxtLink with superpowers.</p>
+              </div>
+            </a></li>
+          <li class=""><a href="/components/modal" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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 px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><span class="iconify i-lucide:file size-5 shrink-0 text-dimmed group-hover:text-default transition-colors" aria-hidden="true"></span>
+              <div class="min-w-0">
+                <p class="truncate font-medium">Modal
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Display a modal within your application.</p>
+              </div>
+            </a></li>
+          <li class=""><a href="/components/navigation-menu" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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 px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><span class="iconify i-lucide:file size-5 shrink-0 text-dimmed group-hover:text-default transition-colors" aria-hidden="true"></span>
+              <div class="min-w-0">
+                <p class="truncate font-medium">NavigationMenu
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Display a list of links.</p>
+              </div>
+            </a></li>
+          <li class=""><a href="/components/pagination" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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 px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><span class="iconify i-lucide:file size-5 shrink-0 text-dimmed group-hover:text-default transition-colors" aria-hidden="true"></span>
+              <div class="min-w-0">
+                <p class="truncate font-medium">Pagination
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Display a list of pages.</p>
+              </div>
+            </a></li>
+          <li class=""><a href="/components/popover" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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 px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><span class="iconify i-lucide:file size-5 shrink-0 text-dimmed group-hover:text-default transition-colors" aria-hidden="true"></span>
+              <div class="min-w-0">
+                <p class="truncate font-medium">Popover
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Display a non-modal dialog that floats around a trigger element.</p>
+              </div>
+            </a></li>
+          <li class=""><a href="/components/progress" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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 px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><span class="iconify i-lucide:file size-5 shrink-0 text-dimmed group-hover:text-default transition-colors" aria-hidden="true"></span>
+              <div class="min-w-0">
+                <p class="truncate font-medium">Progress
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Show a horizontal bar to indicate task progression.</p>
+              </div>
+            </a></li>
+        </ul>
+      </div>
+    </div>
   </div>
 </nav>"
 `;
@@ -302,14 +822,12 @@ exports[`NavigationMenu > renders with item slot correctly 1`] = `
       <li data-menu-item="" class="min-w-0 py-2"><button type="button" data-reka-collection-item="" id="reka-navigation-menu-v-0-0-0-trigger-item-1" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" aria-controls="reka-navigation-menu-v-0-0-0-content-item-1" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-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 px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-muted hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors data-[state=open]:text-highlighted data-[state=open]:before:bg-elevated/50">Item slot</button>
         <!--v-if-->
         <!--teleport start-->
-        <!---->
         <!--teleport end-->
         <!--v-if-->
       </li>
       <li data-menu-item="" class="min-w-0 py-2"><button type="button" data-reka-collection-item="" id="reka-navigation-menu-v-0-0-0-trigger-item-2" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" aria-controls="reka-navigation-menu-v-0-0-0-content-item-2" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-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 px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-primary before:bg-elevated">Item slot</button>
         <!--v-if-->
         <!--teleport start-->
-        <!---->
         <!--teleport end-->
         <!--v-if-->
       </li>
@@ -331,7 +849,96 @@ exports[`NavigationMenu > renders with item slot correctly 1`] = `
   <!--v-if-->
   <div class="absolute top-full left-0 flex w-full justify-center">
     <!--v-if-->
-    <!---->
+    <div class="relative overflow-hidden bg-default shadow-lg rounded-md ring ring-default h-(--reka-navigation-menu-viewport-height) w-full transition-[width,height,left] duration-200 origin-[top_center] data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] z-[1]" data-state="closed" data-orientation="horizontal" style="pointer-events: none;" hidden="">
+      <div data-dismissable-layer="" style="pointer-events: none;" id="reka-navigation-menu-v-0-0-0-content-item-1" aria-labelledby="reka-navigation-menu-v-0-0-0-trigger-item-1" data-state="closed" data-orientation="horizontal" class="absolute top-0 left-0 w-full max-h-[70vh] overflow-y-auto 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]" hidden="">
+        <ul class="isolate grid p-2 grid-cols-2 gap-2">
+          <li class=""><button type="button" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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 px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><span class="iconify i-lucide:house size-5 shrink-0 text-dimmed group-hover:text-default transition-colors" aria-hidden="true"></span>
+              <div class="min-w-0">
+                <p class="truncate font-medium">Introduction
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Fully styled and customizable components for Nuxt.</p>
+              </div>
+            </button></li>
+          <li class=""><button type="button" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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 px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><span class="iconify i-lucide:cloud-download size-5 shrink-0 text-dimmed group-hover:text-default transition-colors" aria-hidden="true"></span>
+              <div class="min-w-0">
+                <p class="truncate font-medium">Installation
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Learn how to install and configure Nuxt UI in your application.</p>
+              </div>
+            </button></li>
+          <li class=""><button type="button" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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 px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><span class="iconify i-lucide:swatch-book size-5 shrink-0 text-dimmed group-hover:text-default transition-colors" aria-hidden="true"></span>
+              <div class="min-w-0">
+                <p class="truncate font-medium">Theming
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Learn how to customize the look and feel of the components.</p>
+              </div>
+            </button></li>
+          <li class=""><button type="button" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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 px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><span class="iconify i-lucide:monitor size-5 shrink-0 text-dimmed group-hover:text-default transition-colors" aria-hidden="true"></span>
+              <div class="min-w-0">
+                <p class="truncate font-medium">Shortcuts
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Learn how to display and define keyboard shortcuts in your app.</p>
+              </div>
+            </button></li>
+        </ul>
+      </div>
+      <div data-dismissable-layer="" style="pointer-events: none;" id="reka-navigation-menu-v-0-0-0-content-item-2" aria-labelledby="reka-navigation-menu-v-0-0-0-trigger-item-2" data-state="closed" data-orientation="horizontal" class="absolute top-0 left-0 w-full max-h-[70vh] overflow-y-auto 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]" hidden="">
+        <ul class="isolate grid p-2 grid-cols-2 gap-2">
+          <li class=""><a href="/components/link" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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 px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><span class="iconify i-lucide:file size-5 shrink-0 text-dimmed group-hover:text-default transition-colors" aria-hidden="true"></span>
+              <div class="min-w-0">
+                <p class="truncate font-medium">Link
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Use NuxtLink with superpowers.</p>
+              </div>
+            </a></li>
+          <li class=""><a href="/components/modal" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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 px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><span class="iconify i-lucide:file size-5 shrink-0 text-dimmed group-hover:text-default transition-colors" aria-hidden="true"></span>
+              <div class="min-w-0">
+                <p class="truncate font-medium">Modal
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Display a modal within your application.</p>
+              </div>
+            </a></li>
+          <li class=""><a href="/components/navigation-menu" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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 px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><span class="iconify i-lucide:file size-5 shrink-0 text-dimmed group-hover:text-default transition-colors" aria-hidden="true"></span>
+              <div class="min-w-0">
+                <p class="truncate font-medium">NavigationMenu
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Display a list of links.</p>
+              </div>
+            </a></li>
+          <li class=""><a href="/components/pagination" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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 px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><span class="iconify i-lucide:file size-5 shrink-0 text-dimmed group-hover:text-default transition-colors" aria-hidden="true"></span>
+              <div class="min-w-0">
+                <p class="truncate font-medium">Pagination
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Display a list of pages.</p>
+              </div>
+            </a></li>
+          <li class=""><a href="/components/popover" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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 px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><span class="iconify i-lucide:file size-5 shrink-0 text-dimmed group-hover:text-default transition-colors" aria-hidden="true"></span>
+              <div class="min-w-0">
+                <p class="truncate font-medium">Popover
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Display a non-modal dialog that floats around a trigger element.</p>
+              </div>
+            </a></li>
+          <li class=""><a href="/components/progress" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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 px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><span class="iconify i-lucide:file size-5 shrink-0 text-dimmed group-hover:text-default transition-colors" aria-hidden="true"></span>
+              <div class="min-w-0">
+                <p class="truncate font-medium">Progress
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Show a horizontal bar to indicate task progression.</p>
+              </div>
+            </a></li>
+        </ul>
+      </div>
+    </div>
   </div>
 </nav>"
 `;
@@ -346,14 +953,12 @@ exports[`NavigationMenu > renders with item-label slot correctly 1`] = `
         </button>
         <!--v-if-->
         <!--teleport start-->
-        <!---->
         <!--teleport end-->
         <!--v-if-->
       </li>
       <li data-menu-item="" class="min-w-0 py-2"><button type="button" data-reka-collection-item="" id="reka-navigation-menu-v-0-0-0-trigger-item-2" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" aria-controls="reka-navigation-menu-v-0-0-0-content-item-2" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-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 px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-primary before:bg-elevated"><span class="iconify i-lucide:box shrink-0 size-5 text-primary group-data-[state=open]:text-primary" aria-hidden="true"></span><span class="truncate">Item label slot<!--v-if--></span><span as="span" class="group ms-auto inline-flex gap-1.5 items-center"><!--v-if--><span class="iconify i-lucide:chevron-down size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></span></button>
         <!--v-if-->
         <!--teleport start-->
-        <!---->
         <!--teleport end-->
         <!--v-if-->
       </li>
@@ -379,7 +984,96 @@ exports[`NavigationMenu > renders with item-label slot correctly 1`] = `
   <!--v-if-->
   <div class="absolute top-full left-0 flex w-full justify-center">
     <!--v-if-->
-    <!---->
+    <div class="relative overflow-hidden bg-default shadow-lg rounded-md ring ring-default h-(--reka-navigation-menu-viewport-height) w-full transition-[width,height,left] duration-200 origin-[top_center] data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] z-[1]" data-state="closed" data-orientation="horizontal" style="pointer-events: none;" hidden="">
+      <div data-dismissable-layer="" style="pointer-events: none;" id="reka-navigation-menu-v-0-0-0-content-item-1" aria-labelledby="reka-navigation-menu-v-0-0-0-trigger-item-1" data-state="closed" data-orientation="horizontal" class="absolute top-0 left-0 w-full max-h-[70vh] overflow-y-auto 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]" hidden="">
+        <ul class="isolate grid p-2 grid-cols-2 gap-2">
+          <li class=""><button type="button" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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 px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><span class="iconify i-lucide:house size-5 shrink-0 text-dimmed group-hover:text-default transition-colors" aria-hidden="true"></span>
+              <div class="min-w-0">
+                <p class="truncate font-medium">Introduction
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Fully styled and customizable components for Nuxt.</p>
+              </div>
+            </button></li>
+          <li class=""><button type="button" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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 px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><span class="iconify i-lucide:cloud-download size-5 shrink-0 text-dimmed group-hover:text-default transition-colors" aria-hidden="true"></span>
+              <div class="min-w-0">
+                <p class="truncate font-medium">Installation
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Learn how to install and configure Nuxt UI in your application.</p>
+              </div>
+            </button></li>
+          <li class=""><button type="button" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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 px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><span class="iconify i-lucide:swatch-book size-5 shrink-0 text-dimmed group-hover:text-default transition-colors" aria-hidden="true"></span>
+              <div class="min-w-0">
+                <p class="truncate font-medium">Theming
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Learn how to customize the look and feel of the components.</p>
+              </div>
+            </button></li>
+          <li class=""><button type="button" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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 px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><span class="iconify i-lucide:monitor size-5 shrink-0 text-dimmed group-hover:text-default transition-colors" aria-hidden="true"></span>
+              <div class="min-w-0">
+                <p class="truncate font-medium">Shortcuts
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Learn how to display and define keyboard shortcuts in your app.</p>
+              </div>
+            </button></li>
+        </ul>
+      </div>
+      <div data-dismissable-layer="" style="pointer-events: none;" id="reka-navigation-menu-v-0-0-0-content-item-2" aria-labelledby="reka-navigation-menu-v-0-0-0-trigger-item-2" data-state="closed" data-orientation="horizontal" class="absolute top-0 left-0 w-full max-h-[70vh] overflow-y-auto 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]" hidden="">
+        <ul class="isolate grid p-2 grid-cols-2 gap-2">
+          <li class=""><a href="/components/link" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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 px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><span class="iconify i-lucide:file size-5 shrink-0 text-dimmed group-hover:text-default transition-colors" aria-hidden="true"></span>
+              <div class="min-w-0">
+                <p class="truncate font-medium">Link
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Use NuxtLink with superpowers.</p>
+              </div>
+            </a></li>
+          <li class=""><a href="/components/modal" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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 px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><span class="iconify i-lucide:file size-5 shrink-0 text-dimmed group-hover:text-default transition-colors" aria-hidden="true"></span>
+              <div class="min-w-0">
+                <p class="truncate font-medium">Modal
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Display a modal within your application.</p>
+              </div>
+            </a></li>
+          <li class=""><a href="/components/navigation-menu" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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 px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><span class="iconify i-lucide:file size-5 shrink-0 text-dimmed group-hover:text-default transition-colors" aria-hidden="true"></span>
+              <div class="min-w-0">
+                <p class="truncate font-medium">NavigationMenu
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Display a list of links.</p>
+              </div>
+            </a></li>
+          <li class=""><a href="/components/pagination" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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 px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><span class="iconify i-lucide:file size-5 shrink-0 text-dimmed group-hover:text-default transition-colors" aria-hidden="true"></span>
+              <div class="min-w-0">
+                <p class="truncate font-medium">Pagination
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Display a list of pages.</p>
+              </div>
+            </a></li>
+          <li class=""><a href="/components/popover" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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 px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><span class="iconify i-lucide:file size-5 shrink-0 text-dimmed group-hover:text-default transition-colors" aria-hidden="true"></span>
+              <div class="min-w-0">
+                <p class="truncate font-medium">Popover
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Display a non-modal dialog that floats around a trigger element.</p>
+              </div>
+            </a></li>
+          <li class=""><a href="/components/progress" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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 px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><span class="iconify i-lucide:file size-5 shrink-0 text-dimmed group-hover:text-default transition-colors" aria-hidden="true"></span>
+              <div class="min-w-0">
+                <p class="truncate font-medium">Progress
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Show a horizontal bar to indicate task progression.</p>
+              </div>
+            </a></li>
+        </ul>
+      </div>
+    </div>
   </div>
 </nav>"
 `;
@@ -394,14 +1088,12 @@ exports[`NavigationMenu > renders with item-leading slot correctly 1`] = `
         </button>
         <!--v-if-->
         <!--teleport start-->
-        <!---->
         <!--teleport end-->
         <!--v-if-->
       </li>
       <li data-menu-item="" class="min-w-0 py-2"><button type="button" data-reka-collection-item="" id="reka-navigation-menu-v-0-0-0-trigger-item-2" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" aria-controls="reka-navigation-menu-v-0-0-0-content-item-2" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-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 px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-primary before:bg-elevated">Item leading slot<span class="truncate">Components<!--v-if--></span><span as="span" class="group ms-auto inline-flex gap-1.5 items-center"><!--v-if--><span class="iconify i-lucide:chevron-down size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></span></button>
         <!--v-if-->
         <!--teleport start-->
-        <!---->
         <!--teleport end-->
         <!--v-if-->
       </li>
@@ -427,7 +1119,96 @@ exports[`NavigationMenu > renders with item-leading slot correctly 1`] = `
   <!--v-if-->
   <div class="absolute top-full left-0 flex w-full justify-center">
     <!--v-if-->
-    <!---->
+    <div class="relative overflow-hidden bg-default shadow-lg rounded-md ring ring-default h-(--reka-navigation-menu-viewport-height) w-full transition-[width,height,left] duration-200 origin-[top_center] data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] z-[1]" data-state="closed" data-orientation="horizontal" style="pointer-events: none;" hidden="">
+      <div data-dismissable-layer="" style="pointer-events: none;" id="reka-navigation-menu-v-0-0-0-content-item-1" aria-labelledby="reka-navigation-menu-v-0-0-0-trigger-item-1" data-state="closed" data-orientation="horizontal" class="absolute top-0 left-0 w-full max-h-[70vh] overflow-y-auto 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]" hidden="">
+        <ul class="isolate grid p-2 grid-cols-2 gap-2">
+          <li class=""><button type="button" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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 px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><span class="iconify i-lucide:house size-5 shrink-0 text-dimmed group-hover:text-default transition-colors" aria-hidden="true"></span>
+              <div class="min-w-0">
+                <p class="truncate font-medium">Introduction
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Fully styled and customizable components for Nuxt.</p>
+              </div>
+            </button></li>
+          <li class=""><button type="button" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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 px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><span class="iconify i-lucide:cloud-download size-5 shrink-0 text-dimmed group-hover:text-default transition-colors" aria-hidden="true"></span>
+              <div class="min-w-0">
+                <p class="truncate font-medium">Installation
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Learn how to install and configure Nuxt UI in your application.</p>
+              </div>
+            </button></li>
+          <li class=""><button type="button" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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 px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><span class="iconify i-lucide:swatch-book size-5 shrink-0 text-dimmed group-hover:text-default transition-colors" aria-hidden="true"></span>
+              <div class="min-w-0">
+                <p class="truncate font-medium">Theming
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Learn how to customize the look and feel of the components.</p>
+              </div>
+            </button></li>
+          <li class=""><button type="button" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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 px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><span class="iconify i-lucide:monitor size-5 shrink-0 text-dimmed group-hover:text-default transition-colors" aria-hidden="true"></span>
+              <div class="min-w-0">
+                <p class="truncate font-medium">Shortcuts
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Learn how to display and define keyboard shortcuts in your app.</p>
+              </div>
+            </button></li>
+        </ul>
+      </div>
+      <div data-dismissable-layer="" style="pointer-events: none;" id="reka-navigation-menu-v-0-0-0-content-item-2" aria-labelledby="reka-navigation-menu-v-0-0-0-trigger-item-2" data-state="closed" data-orientation="horizontal" class="absolute top-0 left-0 w-full max-h-[70vh] overflow-y-auto 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]" hidden="">
+        <ul class="isolate grid p-2 grid-cols-2 gap-2">
+          <li class=""><a href="/components/link" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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 px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><span class="iconify i-lucide:file size-5 shrink-0 text-dimmed group-hover:text-default transition-colors" aria-hidden="true"></span>
+              <div class="min-w-0">
+                <p class="truncate font-medium">Link
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Use NuxtLink with superpowers.</p>
+              </div>
+            </a></li>
+          <li class=""><a href="/components/modal" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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 px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><span class="iconify i-lucide:file size-5 shrink-0 text-dimmed group-hover:text-default transition-colors" aria-hidden="true"></span>
+              <div class="min-w-0">
+                <p class="truncate font-medium">Modal
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Display a modal within your application.</p>
+              </div>
+            </a></li>
+          <li class=""><a href="/components/navigation-menu" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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 px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><span class="iconify i-lucide:file size-5 shrink-0 text-dimmed group-hover:text-default transition-colors" aria-hidden="true"></span>
+              <div class="min-w-0">
+                <p class="truncate font-medium">NavigationMenu
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Display a list of links.</p>
+              </div>
+            </a></li>
+          <li class=""><a href="/components/pagination" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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 px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><span class="iconify i-lucide:file size-5 shrink-0 text-dimmed group-hover:text-default transition-colors" aria-hidden="true"></span>
+              <div class="min-w-0">
+                <p class="truncate font-medium">Pagination
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Display a list of pages.</p>
+              </div>
+            </a></li>
+          <li class=""><a href="/components/popover" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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 px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><span class="iconify i-lucide:file size-5 shrink-0 text-dimmed group-hover:text-default transition-colors" aria-hidden="true"></span>
+              <div class="min-w-0">
+                <p class="truncate font-medium">Popover
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Display a non-modal dialog that floats around a trigger element.</p>
+              </div>
+            </a></li>
+          <li class=""><a href="/components/progress" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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 px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><span class="iconify i-lucide:file size-5 shrink-0 text-dimmed group-hover:text-default transition-colors" aria-hidden="true"></span>
+              <div class="min-w-0">
+                <p class="truncate font-medium">Progress
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Show a horizontal bar to indicate task progression.</p>
+              </div>
+            </a></li>
+        </ul>
+      </div>
+    </div>
   </div>
 </nav>"
 `;
@@ -440,14 +1221,12 @@ exports[`NavigationMenu > renders with item-trailing slot correctly 1`] = `
       <li data-menu-item="" class="min-w-0 py-2"><button type="button" data-reka-collection-item="" id="reka-navigation-menu-v-0-0-0-trigger-item-1" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" aria-controls="reka-navigation-menu-v-0-0-0-content-item-1" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-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 px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-muted hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors data-[state=open]:text-highlighted data-[state=open]:before:bg-elevated/50"><span class="iconify i-lucide:book-open shrink-0 size-5 text-dimmed group-hover:text-default transition-colors group-data-[state=open]:text-default" aria-hidden="true"></span><span class="truncate">Documentation<!--v-if--></span><span as="span" class="group ms-auto inline-flex gap-1.5 items-center">Item trailing slot</span></button>
         <!--v-if-->
         <!--teleport start-->
-        <!---->
         <!--teleport end-->
         <!--v-if-->
       </li>
       <li data-menu-item="" class="min-w-0 py-2"><button type="button" data-reka-collection-item="" id="reka-navigation-menu-v-0-0-0-trigger-item-2" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" aria-controls="reka-navigation-menu-v-0-0-0-content-item-2" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-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 px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-primary before:bg-elevated"><span class="iconify i-lucide:box shrink-0 size-5 text-primary group-data-[state=open]:text-primary" aria-hidden="true"></span><span class="truncate">Components<!--v-if--></span><span as="span" class="group ms-auto inline-flex gap-1.5 items-center">Item trailing slot</span></button>
         <!--v-if-->
         <!--teleport start-->
-        <!---->
         <!--teleport end-->
         <!--v-if-->
       </li>
@@ -469,7 +1248,96 @@ exports[`NavigationMenu > renders with item-trailing slot correctly 1`] = `
   <!--v-if-->
   <div class="absolute top-full left-0 flex w-full justify-center">
     <!--v-if-->
-    <!---->
+    <div class="relative overflow-hidden bg-default shadow-lg rounded-md ring ring-default h-(--reka-navigation-menu-viewport-height) w-full transition-[width,height,left] duration-200 origin-[top_center] data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] z-[1]" data-state="closed" data-orientation="horizontal" style="pointer-events: none;" hidden="">
+      <div data-dismissable-layer="" style="pointer-events: none;" id="reka-navigation-menu-v-0-0-0-content-item-1" aria-labelledby="reka-navigation-menu-v-0-0-0-trigger-item-1" data-state="closed" data-orientation="horizontal" class="absolute top-0 left-0 w-full max-h-[70vh] overflow-y-auto 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]" hidden="">
+        <ul class="isolate grid p-2 grid-cols-2 gap-2">
+          <li class=""><button type="button" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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 px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><span class="iconify i-lucide:house size-5 shrink-0 text-dimmed group-hover:text-default transition-colors" aria-hidden="true"></span>
+              <div class="min-w-0">
+                <p class="truncate font-medium">Introduction
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Fully styled and customizable components for Nuxt.</p>
+              </div>
+            </button></li>
+          <li class=""><button type="button" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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 px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><span class="iconify i-lucide:cloud-download size-5 shrink-0 text-dimmed group-hover:text-default transition-colors" aria-hidden="true"></span>
+              <div class="min-w-0">
+                <p class="truncate font-medium">Installation
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Learn how to install and configure Nuxt UI in your application.</p>
+              </div>
+            </button></li>
+          <li class=""><button type="button" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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 px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><span class="iconify i-lucide:swatch-book size-5 shrink-0 text-dimmed group-hover:text-default transition-colors" aria-hidden="true"></span>
+              <div class="min-w-0">
+                <p class="truncate font-medium">Theming
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Learn how to customize the look and feel of the components.</p>
+              </div>
+            </button></li>
+          <li class=""><button type="button" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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 px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><span class="iconify i-lucide:monitor size-5 shrink-0 text-dimmed group-hover:text-default transition-colors" aria-hidden="true"></span>
+              <div class="min-w-0">
+                <p class="truncate font-medium">Shortcuts
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Learn how to display and define keyboard shortcuts in your app.</p>
+              </div>
+            </button></li>
+        </ul>
+      </div>
+      <div data-dismissable-layer="" style="pointer-events: none;" id="reka-navigation-menu-v-0-0-0-content-item-2" aria-labelledby="reka-navigation-menu-v-0-0-0-trigger-item-2" data-state="closed" data-orientation="horizontal" class="absolute top-0 left-0 w-full max-h-[70vh] overflow-y-auto 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]" hidden="">
+        <ul class="isolate grid p-2 grid-cols-2 gap-2">
+          <li class=""><a href="/components/link" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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 px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><span class="iconify i-lucide:file size-5 shrink-0 text-dimmed group-hover:text-default transition-colors" aria-hidden="true"></span>
+              <div class="min-w-0">
+                <p class="truncate font-medium">Link
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Use NuxtLink with superpowers.</p>
+              </div>
+            </a></li>
+          <li class=""><a href="/components/modal" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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 px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><span class="iconify i-lucide:file size-5 shrink-0 text-dimmed group-hover:text-default transition-colors" aria-hidden="true"></span>
+              <div class="min-w-0">
+                <p class="truncate font-medium">Modal
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Display a modal within your application.</p>
+              </div>
+            </a></li>
+          <li class=""><a href="/components/navigation-menu" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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 px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><span class="iconify i-lucide:file size-5 shrink-0 text-dimmed group-hover:text-default transition-colors" aria-hidden="true"></span>
+              <div class="min-w-0">
+                <p class="truncate font-medium">NavigationMenu
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Display a list of links.</p>
+              </div>
+            </a></li>
+          <li class=""><a href="/components/pagination" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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 px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><span class="iconify i-lucide:file size-5 shrink-0 text-dimmed group-hover:text-default transition-colors" aria-hidden="true"></span>
+              <div class="min-w-0">
+                <p class="truncate font-medium">Pagination
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Display a list of pages.</p>
+              </div>
+            </a></li>
+          <li class=""><a href="/components/popover" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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 px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><span class="iconify i-lucide:file size-5 shrink-0 text-dimmed group-hover:text-default transition-colors" aria-hidden="true"></span>
+              <div class="min-w-0">
+                <p class="truncate font-medium">Popover
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Display a non-modal dialog that floats around a trigger element.</p>
+              </div>
+            </a></li>
+          <li class=""><a href="/components/progress" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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 px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><span class="iconify i-lucide:file size-5 shrink-0 text-dimmed group-hover:text-default transition-colors" aria-hidden="true"></span>
+              <div class="min-w-0">
+                <p class="truncate font-medium">Progress
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Show a horizontal bar to indicate task progression.</p>
+              </div>
+            </a></li>
+        </ul>
+      </div>
+    </div>
   </div>
 </nav>"
 `;
@@ -484,14 +1352,12 @@ exports[`NavigationMenu > renders with items correctly 1`] = `
         </button>
         <!--v-if-->
         <!--teleport start-->
-        <!---->
         <!--teleport end-->
         <!--v-if-->
       </li>
       <li data-menu-item="" class="min-w-0 py-2"><button type="button" data-reka-collection-item="" id="reka-navigation-menu-v-0-0-0-trigger-item-2" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" aria-controls="reka-navigation-menu-v-0-0-0-content-item-2" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-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 px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-primary before:bg-elevated"><span class="iconify i-lucide:box shrink-0 size-5 text-primary group-data-[state=open]:text-primary" aria-hidden="true"></span><span class="truncate">Components<!--v-if--></span><span as="span" class="group ms-auto inline-flex gap-1.5 items-center"><!--v-if--><span class="iconify i-lucide:chevron-down size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></span></button>
         <!--v-if-->
         <!--teleport start-->
-        <!---->
         <!--teleport end-->
         <!--v-if-->
       </li>
@@ -517,7 +1383,96 @@ exports[`NavigationMenu > renders with items correctly 1`] = `
   <!--v-if-->
   <div class="absolute top-full left-0 flex w-full justify-center">
     <!--v-if-->
-    <!---->
+    <div class="relative overflow-hidden bg-default shadow-lg rounded-md ring ring-default h-(--reka-navigation-menu-viewport-height) w-full transition-[width,height,left] duration-200 origin-[top_center] data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] z-[1]" data-state="closed" data-orientation="horizontal" style="pointer-events: none;" hidden="">
+      <div data-dismissable-layer="" style="pointer-events: none;" id="reka-navigation-menu-v-0-0-0-content-item-1" aria-labelledby="reka-navigation-menu-v-0-0-0-trigger-item-1" data-state="closed" data-orientation="horizontal" class="absolute top-0 left-0 w-full max-h-[70vh] overflow-y-auto 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]" hidden="">
+        <ul class="isolate grid p-2 grid-cols-2 gap-2">
+          <li class=""><button type="button" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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 px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><span class="iconify i-lucide:house size-5 shrink-0 text-dimmed group-hover:text-default transition-colors" aria-hidden="true"></span>
+              <div class="min-w-0">
+                <p class="truncate font-medium">Introduction
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Fully styled and customizable components for Nuxt.</p>
+              </div>
+            </button></li>
+          <li class=""><button type="button" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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 px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><span class="iconify i-lucide:cloud-download size-5 shrink-0 text-dimmed group-hover:text-default transition-colors" aria-hidden="true"></span>
+              <div class="min-w-0">
+                <p class="truncate font-medium">Installation
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Learn how to install and configure Nuxt UI in your application.</p>
+              </div>
+            </button></li>
+          <li class=""><button type="button" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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 px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><span class="iconify i-lucide:swatch-book size-5 shrink-0 text-dimmed group-hover:text-default transition-colors" aria-hidden="true"></span>
+              <div class="min-w-0">
+                <p class="truncate font-medium">Theming
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Learn how to customize the look and feel of the components.</p>
+              </div>
+            </button></li>
+          <li class=""><button type="button" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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 px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><span class="iconify i-lucide:monitor size-5 shrink-0 text-dimmed group-hover:text-default transition-colors" aria-hidden="true"></span>
+              <div class="min-w-0">
+                <p class="truncate font-medium">Shortcuts
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Learn how to display and define keyboard shortcuts in your app.</p>
+              </div>
+            </button></li>
+        </ul>
+      </div>
+      <div data-dismissable-layer="" style="pointer-events: none;" id="reka-navigation-menu-v-0-0-0-content-item-2" aria-labelledby="reka-navigation-menu-v-0-0-0-trigger-item-2" data-state="closed" data-orientation="horizontal" class="absolute top-0 left-0 w-full max-h-[70vh] overflow-y-auto 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]" hidden="">
+        <ul class="isolate grid p-2 grid-cols-2 gap-2">
+          <li class=""><a href="/components/link" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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 px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><span class="iconify i-lucide:file size-5 shrink-0 text-dimmed group-hover:text-default transition-colors" aria-hidden="true"></span>
+              <div class="min-w-0">
+                <p class="truncate font-medium">Link
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Use NuxtLink with superpowers.</p>
+              </div>
+            </a></li>
+          <li class=""><a href="/components/modal" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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 px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><span class="iconify i-lucide:file size-5 shrink-0 text-dimmed group-hover:text-default transition-colors" aria-hidden="true"></span>
+              <div class="min-w-0">
+                <p class="truncate font-medium">Modal
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Display a modal within your application.</p>
+              </div>
+            </a></li>
+          <li class=""><a href="/components/navigation-menu" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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 px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><span class="iconify i-lucide:file size-5 shrink-0 text-dimmed group-hover:text-default transition-colors" aria-hidden="true"></span>
+              <div class="min-w-0">
+                <p class="truncate font-medium">NavigationMenu
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Display a list of links.</p>
+              </div>
+            </a></li>
+          <li class=""><a href="/components/pagination" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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 px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><span class="iconify i-lucide:file size-5 shrink-0 text-dimmed group-hover:text-default transition-colors" aria-hidden="true"></span>
+              <div class="min-w-0">
+                <p class="truncate font-medium">Pagination
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Display a list of pages.</p>
+              </div>
+            </a></li>
+          <li class=""><a href="/components/popover" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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 px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><span class="iconify i-lucide:file size-5 shrink-0 text-dimmed group-hover:text-default transition-colors" aria-hidden="true"></span>
+              <div class="min-w-0">
+                <p class="truncate font-medium">Popover
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Display a non-modal dialog that floats around a trigger element.</p>
+              </div>
+            </a></li>
+          <li class=""><a href="/components/progress" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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 px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><span class="iconify i-lucide:file size-5 shrink-0 text-dimmed group-hover:text-default transition-colors" aria-hidden="true"></span>
+              <div class="min-w-0">
+                <p class="truncate font-medium">Progress
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Show a horizontal bar to indicate task progression.</p>
+              </div>
+            </a></li>
+        </ul>
+      </div>
+    </div>
   </div>
 </nav>"
 `;
@@ -532,14 +1487,12 @@ exports[`NavigationMenu > renders with labelKey correctly 1`] = `
         </button>
         <!--v-if-->
         <!--teleport start-->
-        <!---->
         <!--teleport end-->
         <!--v-if-->
       </li>
       <li data-menu-item="" class="min-w-0 py-2"><button type="button" data-reka-collection-item="" id="reka-navigation-menu-v-0-0-0-trigger-item-2" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" aria-controls="reka-navigation-menu-v-0-0-0-content-item-2" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-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 px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-primary before:bg-elevated"><span class="iconify i-lucide:box shrink-0 size-5 text-primary group-data-[state=open]:text-primary" aria-hidden="true"></span><span class="truncate">i-lucide-box<!--v-if--></span><span as="span" class="group ms-auto inline-flex gap-1.5 items-center"><!--v-if--><span class="iconify i-lucide:chevron-down size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></span></button>
         <!--v-if-->
         <!--teleport start-->
-        <!---->
         <!--teleport end-->
         <!--v-if-->
       </li>
@@ -565,7 +1518,96 @@ exports[`NavigationMenu > renders with labelKey correctly 1`] = `
   <!--v-if-->
   <div class="absolute top-full left-0 flex w-full justify-center">
     <!--v-if-->
-    <!---->
+    <div class="relative overflow-hidden bg-default shadow-lg rounded-md ring ring-default h-(--reka-navigation-menu-viewport-height) w-full transition-[width,height,left] duration-200 origin-[top_center] data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] z-[1]" data-state="closed" data-orientation="horizontal" style="pointer-events: none;" hidden="">
+      <div data-dismissable-layer="" style="pointer-events: none;" id="reka-navigation-menu-v-0-0-0-content-item-1" aria-labelledby="reka-navigation-menu-v-0-0-0-trigger-item-1" data-state="closed" data-orientation="horizontal" class="absolute top-0 left-0 w-full max-h-[70vh] overflow-y-auto 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]" hidden="">
+        <ul class="isolate grid p-2 grid-cols-2 gap-2">
+          <li class=""><button type="button" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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 px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><span class="iconify i-lucide:house size-5 shrink-0 text-dimmed group-hover:text-default transition-colors" aria-hidden="true"></span>
+              <div class="min-w-0">
+                <p class="truncate font-medium">i-lucide-house
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Fully styled and customizable components for Nuxt.</p>
+              </div>
+            </button></li>
+          <li class=""><button type="button" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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 px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><span class="iconify i-lucide:cloud-download size-5 shrink-0 text-dimmed group-hover:text-default transition-colors" aria-hidden="true"></span>
+              <div class="min-w-0">
+                <p class="truncate font-medium">i-lucide-cloud-download
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Learn how to install and configure Nuxt UI in your application.</p>
+              </div>
+            </button></li>
+          <li class=""><button type="button" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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 px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><span class="iconify i-lucide:swatch-book size-5 shrink-0 text-dimmed group-hover:text-default transition-colors" aria-hidden="true"></span>
+              <div class="min-w-0">
+                <p class="truncate font-medium">i-lucide-swatch-book
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Learn how to customize the look and feel of the components.</p>
+              </div>
+            </button></li>
+          <li class=""><button type="button" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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 px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><span class="iconify i-lucide:monitor size-5 shrink-0 text-dimmed group-hover:text-default transition-colors" aria-hidden="true"></span>
+              <div class="min-w-0">
+                <p class="truncate font-medium">i-lucide-monitor
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Learn how to display and define keyboard shortcuts in your app.</p>
+              </div>
+            </button></li>
+        </ul>
+      </div>
+      <div data-dismissable-layer="" style="pointer-events: none;" id="reka-navigation-menu-v-0-0-0-content-item-2" aria-labelledby="reka-navigation-menu-v-0-0-0-trigger-item-2" data-state="closed" data-orientation="horizontal" class="absolute top-0 left-0 w-full max-h-[70vh] overflow-y-auto 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]" hidden="">
+        <ul class="isolate grid p-2 grid-cols-2 gap-2">
+          <li class=""><a href="/components/link" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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 px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><span class="iconify i-lucide:file size-5 shrink-0 text-dimmed group-hover:text-default transition-colors" aria-hidden="true"></span>
+              <div class="min-w-0">
+                <p class="truncate font-medium">i-lucide-file
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Use NuxtLink with superpowers.</p>
+              </div>
+            </a></li>
+          <li class=""><a href="/components/modal" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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 px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><span class="iconify i-lucide:file size-5 shrink-0 text-dimmed group-hover:text-default transition-colors" aria-hidden="true"></span>
+              <div class="min-w-0">
+                <p class="truncate font-medium">i-lucide-file
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Display a modal within your application.</p>
+              </div>
+            </a></li>
+          <li class=""><a href="/components/navigation-menu" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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 px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><span class="iconify i-lucide:file size-5 shrink-0 text-dimmed group-hover:text-default transition-colors" aria-hidden="true"></span>
+              <div class="min-w-0">
+                <p class="truncate font-medium">i-lucide-file
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Display a list of links.</p>
+              </div>
+            </a></li>
+          <li class=""><a href="/components/pagination" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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 px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><span class="iconify i-lucide:file size-5 shrink-0 text-dimmed group-hover:text-default transition-colors" aria-hidden="true"></span>
+              <div class="min-w-0">
+                <p class="truncate font-medium">i-lucide-file
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Display a list of pages.</p>
+              </div>
+            </a></li>
+          <li class=""><a href="/components/popover" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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 px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><span class="iconify i-lucide:file size-5 shrink-0 text-dimmed group-hover:text-default transition-colors" aria-hidden="true"></span>
+              <div class="min-w-0">
+                <p class="truncate font-medium">i-lucide-file
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Display a non-modal dialog that floats around a trigger element.</p>
+              </div>
+            </a></li>
+          <li class=""><a href="/components/progress" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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 px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><span class="iconify i-lucide:file size-5 shrink-0 text-dimmed group-hover:text-default transition-colors" aria-hidden="true"></span>
+              <div class="min-w-0">
+                <p class="truncate font-medium">i-lucide-file
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Show a horizontal bar to indicate task progression.</p>
+              </div>
+            </a></li>
+        </ul>
+      </div>
+    </div>
   </div>
 </nav>"
 `;
@@ -612,8 +1654,94 @@ exports[`NavigationMenu > renders with modelValue correctly 1`] = `
   <div class="absolute top-full left-0 flex w-full justify-center">
     <!--v-if-->
     <div class="relative overflow-hidden bg-default shadow-lg rounded-md ring ring-default h-(--reka-navigation-menu-viewport-height) w-full transition-[width,height,left] duration-200 origin-[top_center] data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] z-[1]" data-state="open" data-orientation="horizontal">
-      <!---->
-      <!---->
+      <div data-dismissable-layer="" style="pointer-events: none;" id="reka-navigation-menu-v-0-0-0-content-item-1" aria-labelledby="reka-navigation-menu-v-0-0-0-trigger-item-1" data-state="closed" data-orientation="horizontal" class="absolute top-0 left-0 w-full max-h-[70vh] overflow-y-auto 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]" hidden="">
+        <ul class="isolate grid p-2 grid-cols-2 gap-2">
+          <li class=""><button type="button" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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 px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><span class="iconify i-lucide:house size-5 shrink-0 text-dimmed group-hover:text-default transition-colors" aria-hidden="true"></span>
+              <div class="min-w-0">
+                <p class="truncate font-medium">Introduction
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Fully styled and customizable components for Nuxt.</p>
+              </div>
+            </button></li>
+          <li class=""><button type="button" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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 px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><span class="iconify i-lucide:cloud-download size-5 shrink-0 text-dimmed group-hover:text-default transition-colors" aria-hidden="true"></span>
+              <div class="min-w-0">
+                <p class="truncate font-medium">Installation
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Learn how to install and configure Nuxt UI in your application.</p>
+              </div>
+            </button></li>
+          <li class=""><button type="button" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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 px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><span class="iconify i-lucide:swatch-book size-5 shrink-0 text-dimmed group-hover:text-default transition-colors" aria-hidden="true"></span>
+              <div class="min-w-0">
+                <p class="truncate font-medium">Theming
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Learn how to customize the look and feel of the components.</p>
+              </div>
+            </button></li>
+          <li class=""><button type="button" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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 px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><span class="iconify i-lucide:monitor size-5 shrink-0 text-dimmed group-hover:text-default transition-colors" aria-hidden="true"></span>
+              <div class="min-w-0">
+                <p class="truncate font-medium">Shortcuts
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Learn how to display and define keyboard shortcuts in your app.</p>
+              </div>
+            </button></li>
+        </ul>
+      </div>
+      <div data-dismissable-layer="" style="pointer-events: none;" id="reka-navigation-menu-v-0-0-0-content-item-2" aria-labelledby="reka-navigation-menu-v-0-0-0-trigger-item-2" data-state="closed" data-orientation="horizontal" class="absolute top-0 left-0 w-full max-h-[70vh] overflow-y-auto 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]" hidden="">
+        <ul class="isolate grid p-2 grid-cols-2 gap-2">
+          <li class=""><a href="/components/link" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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 px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><span class="iconify i-lucide:file size-5 shrink-0 text-dimmed group-hover:text-default transition-colors" aria-hidden="true"></span>
+              <div class="min-w-0">
+                <p class="truncate font-medium">Link
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Use NuxtLink with superpowers.</p>
+              </div>
+            </a></li>
+          <li class=""><a href="/components/modal" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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 px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><span class="iconify i-lucide:file size-5 shrink-0 text-dimmed group-hover:text-default transition-colors" aria-hidden="true"></span>
+              <div class="min-w-0">
+                <p class="truncate font-medium">Modal
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Display a modal within your application.</p>
+              </div>
+            </a></li>
+          <li class=""><a href="/components/navigation-menu" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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 px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><span class="iconify i-lucide:file size-5 shrink-0 text-dimmed group-hover:text-default transition-colors" aria-hidden="true"></span>
+              <div class="min-w-0">
+                <p class="truncate font-medium">NavigationMenu
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Display a list of links.</p>
+              </div>
+            </a></li>
+          <li class=""><a href="/components/pagination" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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 px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><span class="iconify i-lucide:file size-5 shrink-0 text-dimmed group-hover:text-default transition-colors" aria-hidden="true"></span>
+              <div class="min-w-0">
+                <p class="truncate font-medium">Pagination
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Display a list of pages.</p>
+              </div>
+            </a></li>
+          <li class=""><a href="/components/popover" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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 px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><span class="iconify i-lucide:file size-5 shrink-0 text-dimmed group-hover:text-default transition-colors" aria-hidden="true"></span>
+              <div class="min-w-0">
+                <p class="truncate font-medium">Popover
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Display a non-modal dialog that floats around a trigger element.</p>
+              </div>
+            </a></li>
+          <li class=""><a href="/components/progress" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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 px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><span class="iconify i-lucide:file size-5 shrink-0 text-dimmed group-hover:text-default transition-colors" aria-hidden="true"></span>
+              <div class="min-w-0">
+                <p class="truncate font-medium">Progress
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Show a horizontal bar to indicate task progression.</p>
+              </div>
+            </a></li>
+        </ul>
+      </div>
     </div>
   </div>
 </nav>"
@@ -629,14 +1757,12 @@ exports[`NavigationMenu > renders with neutral variant link correctly 1`] = `
         </button>
         <!--v-if-->
         <!--teleport start-->
-        <!---->
         <!--teleport end-->
         <!--v-if-->
       </li>
       <li data-menu-item="" class="min-w-0 py-2"><button type="button" data-reka-collection-item="" id="reka-navigation-menu-v-0-0-0-trigger-item-2" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" aria-controls="reka-navigation-menu-v-0-0-0-content-item-2" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-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-inverted px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-highlighted"><span class="iconify i-lucide:box shrink-0 size-5 text-highlighted group-data-[state=open]:text-highlighted" aria-hidden="true"></span><span class="truncate">Components<!--v-if--></span><span as="span" class="group ms-auto inline-flex gap-1.5 items-center"><!--v-if--><span class="iconify i-lucide:chevron-down size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></span></button>
         <!--v-if-->
         <!--teleport start-->
-        <!---->
         <!--teleport end-->
         <!--v-if-->
       </li>
@@ -662,7 +1788,96 @@ exports[`NavigationMenu > renders with neutral variant link correctly 1`] = `
   <!--v-if-->
   <div class="absolute top-full left-0 flex w-full justify-center">
     <!--v-if-->
-    <!---->
+    <div class="relative overflow-hidden bg-default shadow-lg rounded-md ring ring-default h-(--reka-navigation-menu-viewport-height) w-full transition-[width,height,left] duration-200 origin-[top_center] data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] z-[1]" data-state="closed" data-orientation="horizontal" style="pointer-events: none;" hidden="">
+      <div data-dismissable-layer="" style="pointer-events: none;" id="reka-navigation-menu-v-0-0-0-content-item-1" aria-labelledby="reka-navigation-menu-v-0-0-0-trigger-item-1" data-state="closed" data-orientation="horizontal" class="absolute top-0 left-0 w-full max-h-[70vh] overflow-y-auto 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]" hidden="">
+        <ul class="isolate grid p-2 grid-cols-2 gap-2">
+          <li class=""><button type="button" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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-inverted px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><span class="iconify i-lucide:house size-5 shrink-0 text-dimmed group-hover:text-default transition-colors" aria-hidden="true"></span>
+              <div class="min-w-0">
+                <p class="truncate font-medium">Introduction
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Fully styled and customizable components for Nuxt.</p>
+              </div>
+            </button></li>
+          <li class=""><button type="button" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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-inverted px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><span class="iconify i-lucide:cloud-download size-5 shrink-0 text-dimmed group-hover:text-default transition-colors" aria-hidden="true"></span>
+              <div class="min-w-0">
+                <p class="truncate font-medium">Installation
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Learn how to install and configure Nuxt UI in your application.</p>
+              </div>
+            </button></li>
+          <li class=""><button type="button" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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-inverted px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><span class="iconify i-lucide:swatch-book size-5 shrink-0 text-dimmed group-hover:text-default transition-colors" aria-hidden="true"></span>
+              <div class="min-w-0">
+                <p class="truncate font-medium">Theming
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Learn how to customize the look and feel of the components.</p>
+              </div>
+            </button></li>
+          <li class=""><button type="button" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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-inverted px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><span class="iconify i-lucide:monitor size-5 shrink-0 text-dimmed group-hover:text-default transition-colors" aria-hidden="true"></span>
+              <div class="min-w-0">
+                <p class="truncate font-medium">Shortcuts
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Learn how to display and define keyboard shortcuts in your app.</p>
+              </div>
+            </button></li>
+        </ul>
+      </div>
+      <div data-dismissable-layer="" style="pointer-events: none;" id="reka-navigation-menu-v-0-0-0-content-item-2" aria-labelledby="reka-navigation-menu-v-0-0-0-trigger-item-2" data-state="closed" data-orientation="horizontal" class="absolute top-0 left-0 w-full max-h-[70vh] overflow-y-auto 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]" hidden="">
+        <ul class="isolate grid p-2 grid-cols-2 gap-2">
+          <li class=""><a href="/components/link" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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-inverted px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><span class="iconify i-lucide:file size-5 shrink-0 text-dimmed group-hover:text-default transition-colors" aria-hidden="true"></span>
+              <div class="min-w-0">
+                <p class="truncate font-medium">Link
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Use NuxtLink with superpowers.</p>
+              </div>
+            </a></li>
+          <li class=""><a href="/components/modal" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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-inverted px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><span class="iconify i-lucide:file size-5 shrink-0 text-dimmed group-hover:text-default transition-colors" aria-hidden="true"></span>
+              <div class="min-w-0">
+                <p class="truncate font-medium">Modal
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Display a modal within your application.</p>
+              </div>
+            </a></li>
+          <li class=""><a href="/components/navigation-menu" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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-inverted px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><span class="iconify i-lucide:file size-5 shrink-0 text-dimmed group-hover:text-default transition-colors" aria-hidden="true"></span>
+              <div class="min-w-0">
+                <p class="truncate font-medium">NavigationMenu
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Display a list of links.</p>
+              </div>
+            </a></li>
+          <li class=""><a href="/components/pagination" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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-inverted px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><span class="iconify i-lucide:file size-5 shrink-0 text-dimmed group-hover:text-default transition-colors" aria-hidden="true"></span>
+              <div class="min-w-0">
+                <p class="truncate font-medium">Pagination
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Display a list of pages.</p>
+              </div>
+            </a></li>
+          <li class=""><a href="/components/popover" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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-inverted px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><span class="iconify i-lucide:file size-5 shrink-0 text-dimmed group-hover:text-default transition-colors" aria-hidden="true"></span>
+              <div class="min-w-0">
+                <p class="truncate font-medium">Popover
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Display a non-modal dialog that floats around a trigger element.</p>
+              </div>
+            </a></li>
+          <li class=""><a href="/components/progress" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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-inverted px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><span class="iconify i-lucide:file size-5 shrink-0 text-dimmed group-hover:text-default transition-colors" aria-hidden="true"></span>
+              <div class="min-w-0">
+                <p class="truncate font-medium">Progress
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Show a horizontal bar to indicate task progression.</p>
+              </div>
+            </a></li>
+        </ul>
+      </div>
+    </div>
   </div>
 </nav>"
 `;
@@ -677,14 +1892,12 @@ exports[`NavigationMenu > renders with neutral variant link highlight correctly
         </button>
         <!--v-if-->
         <!--teleport start-->
-        <!---->
         <!--teleport end-->
         <!--v-if-->
       </li>
       <li data-menu-item="" class="min-w-0 py-2"><button type="button" data-reka-collection-item="" id="reka-navigation-menu-v-0-0-0-trigger-item-2" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" aria-controls="reka-navigation-menu-v-0-0-0-content-item-2" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-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-inverted px-2.5 py-1.5 before:inset-x-px before:inset-y-0 after:absolute after:-bottom-2 after:inset-x-2.5 after:block after:h-px after:rounded-full after:transition-colors text-highlighted after:bg-inverted"><span class="iconify i-lucide:box shrink-0 size-5 text-highlighted group-data-[state=open]:text-highlighted" aria-hidden="true"></span><span class="truncate">Components<!--v-if--></span><span as="span" class="group ms-auto inline-flex gap-1.5 items-center"><!--v-if--><span class="iconify i-lucide:chevron-down size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></span></button>
         <!--v-if-->
         <!--teleport start-->
-        <!---->
         <!--teleport end-->
         <!--v-if-->
       </li>
@@ -710,7 +1923,96 @@ exports[`NavigationMenu > renders with neutral variant link highlight correctly
   <!--v-if-->
   <div class="absolute top-full left-0 flex w-full justify-center">
     <!--v-if-->
-    <!---->
+    <div class="relative overflow-hidden bg-default shadow-lg rounded-md ring ring-default h-(--reka-navigation-menu-viewport-height) w-full transition-[width,height,left] duration-200 origin-[top_center] data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] z-[1]" data-state="closed" data-orientation="horizontal" style="pointer-events: none;" hidden="">
+      <div data-dismissable-layer="" style="pointer-events: none;" id="reka-navigation-menu-v-0-0-0-content-item-1" aria-labelledby="reka-navigation-menu-v-0-0-0-trigger-item-1" data-state="closed" data-orientation="horizontal" class="absolute top-0 left-0 w-full max-h-[70vh] overflow-y-auto 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]" hidden="">
+        <ul class="isolate grid p-2 grid-cols-2 gap-2">
+          <li class=""><button type="button" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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-inverted px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><span class="iconify i-lucide:house size-5 shrink-0 text-dimmed group-hover:text-default transition-colors" aria-hidden="true"></span>
+              <div class="min-w-0">
+                <p class="truncate font-medium">Introduction
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Fully styled and customizable components for Nuxt.</p>
+              </div>
+            </button></li>
+          <li class=""><button type="button" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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-inverted px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><span class="iconify i-lucide:cloud-download size-5 shrink-0 text-dimmed group-hover:text-default transition-colors" aria-hidden="true"></span>
+              <div class="min-w-0">
+                <p class="truncate font-medium">Installation
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Learn how to install and configure Nuxt UI in your application.</p>
+              </div>
+            </button></li>
+          <li class=""><button type="button" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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-inverted px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><span class="iconify i-lucide:swatch-book size-5 shrink-0 text-dimmed group-hover:text-default transition-colors" aria-hidden="true"></span>
+              <div class="min-w-0">
+                <p class="truncate font-medium">Theming
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Learn how to customize the look and feel of the components.</p>
+              </div>
+            </button></li>
+          <li class=""><button type="button" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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-inverted px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><span class="iconify i-lucide:monitor size-5 shrink-0 text-dimmed group-hover:text-default transition-colors" aria-hidden="true"></span>
+              <div class="min-w-0">
+                <p class="truncate font-medium">Shortcuts
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Learn how to display and define keyboard shortcuts in your app.</p>
+              </div>
+            </button></li>
+        </ul>
+      </div>
+      <div data-dismissable-layer="" style="pointer-events: none;" id="reka-navigation-menu-v-0-0-0-content-item-2" aria-labelledby="reka-navigation-menu-v-0-0-0-trigger-item-2" data-state="closed" data-orientation="horizontal" class="absolute top-0 left-0 w-full max-h-[70vh] overflow-y-auto 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]" hidden="">
+        <ul class="isolate grid p-2 grid-cols-2 gap-2">
+          <li class=""><a href="/components/link" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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-inverted px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><span class="iconify i-lucide:file size-5 shrink-0 text-dimmed group-hover:text-default transition-colors" aria-hidden="true"></span>
+              <div class="min-w-0">
+                <p class="truncate font-medium">Link
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Use NuxtLink with superpowers.</p>
+              </div>
+            </a></li>
+          <li class=""><a href="/components/modal" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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-inverted px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><span class="iconify i-lucide:file size-5 shrink-0 text-dimmed group-hover:text-default transition-colors" aria-hidden="true"></span>
+              <div class="min-w-0">
+                <p class="truncate font-medium">Modal
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Display a modal within your application.</p>
+              </div>
+            </a></li>
+          <li class=""><a href="/components/navigation-menu" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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-inverted px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><span class="iconify i-lucide:file size-5 shrink-0 text-dimmed group-hover:text-default transition-colors" aria-hidden="true"></span>
+              <div class="min-w-0">
+                <p class="truncate font-medium">NavigationMenu
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Display a list of links.</p>
+              </div>
+            </a></li>
+          <li class=""><a href="/components/pagination" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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-inverted px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><span class="iconify i-lucide:file size-5 shrink-0 text-dimmed group-hover:text-default transition-colors" aria-hidden="true"></span>
+              <div class="min-w-0">
+                <p class="truncate font-medium">Pagination
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Display a list of pages.</p>
+              </div>
+            </a></li>
+          <li class=""><a href="/components/popover" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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-inverted px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><span class="iconify i-lucide:file size-5 shrink-0 text-dimmed group-hover:text-default transition-colors" aria-hidden="true"></span>
+              <div class="min-w-0">
+                <p class="truncate font-medium">Popover
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Display a non-modal dialog that floats around a trigger element.</p>
+              </div>
+            </a></li>
+          <li class=""><a href="/components/progress" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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-inverted px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><span class="iconify i-lucide:file size-5 shrink-0 text-dimmed group-hover:text-default transition-colors" aria-hidden="true"></span>
+              <div class="min-w-0">
+                <p class="truncate font-medium">Progress
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Show a horizontal bar to indicate task progression.</p>
+              </div>
+            </a></li>
+        </ul>
+      </div>
+    </div>
   </div>
 </nav>"
 `;
@@ -725,14 +2027,12 @@ exports[`NavigationMenu > renders with neutral variant link highlight neutral co
         </button>
         <!--v-if-->
         <!--teleport start-->
-        <!---->
         <!--teleport end-->
         <!--v-if-->
       </li>
       <li data-menu-item="" class="min-w-0 py-2"><button type="button" data-reka-collection-item="" id="reka-navigation-menu-v-0-0-0-trigger-item-2" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" aria-controls="reka-navigation-menu-v-0-0-0-content-item-2" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-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-inverted px-2.5 py-1.5 before:inset-x-px before:inset-y-0 after:absolute after:-bottom-2 after:inset-x-2.5 after:block after:h-px after:rounded-full after:transition-colors text-highlighted after:bg-inverted"><span class="iconify i-lucide:box shrink-0 size-5 text-highlighted group-data-[state=open]:text-highlighted" aria-hidden="true"></span><span class="truncate">Components<!--v-if--></span><span as="span" class="group ms-auto inline-flex gap-1.5 items-center"><!--v-if--><span class="iconify i-lucide:chevron-down size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></span></button>
         <!--v-if-->
         <!--teleport start-->
-        <!---->
         <!--teleport end-->
         <!--v-if-->
       </li>
@@ -758,7 +2058,96 @@ exports[`NavigationMenu > renders with neutral variant link highlight neutral co
   <!--v-if-->
   <div class="absolute top-full left-0 flex w-full justify-center">
     <!--v-if-->
-    <!---->
+    <div class="relative overflow-hidden bg-default shadow-lg rounded-md ring ring-default h-(--reka-navigation-menu-viewport-height) w-full transition-[width,height,left] duration-200 origin-[top_center] data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] z-[1]" data-state="closed" data-orientation="horizontal" style="pointer-events: none;" hidden="">
+      <div data-dismissable-layer="" style="pointer-events: none;" id="reka-navigation-menu-v-0-0-0-content-item-1" aria-labelledby="reka-navigation-menu-v-0-0-0-trigger-item-1" data-state="closed" data-orientation="horizontal" class="absolute top-0 left-0 w-full max-h-[70vh] overflow-y-auto 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]" hidden="">
+        <ul class="isolate grid p-2 grid-cols-2 gap-2">
+          <li class=""><button type="button" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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-inverted px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><span class="iconify i-lucide:house size-5 shrink-0 text-dimmed group-hover:text-default transition-colors" aria-hidden="true"></span>
+              <div class="min-w-0">
+                <p class="truncate font-medium">Introduction
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Fully styled and customizable components for Nuxt.</p>
+              </div>
+            </button></li>
+          <li class=""><button type="button" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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-inverted px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><span class="iconify i-lucide:cloud-download size-5 shrink-0 text-dimmed group-hover:text-default transition-colors" aria-hidden="true"></span>
+              <div class="min-w-0">
+                <p class="truncate font-medium">Installation
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Learn how to install and configure Nuxt UI in your application.</p>
+              </div>
+            </button></li>
+          <li class=""><button type="button" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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-inverted px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><span class="iconify i-lucide:swatch-book size-5 shrink-0 text-dimmed group-hover:text-default transition-colors" aria-hidden="true"></span>
+              <div class="min-w-0">
+                <p class="truncate font-medium">Theming
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Learn how to customize the look and feel of the components.</p>
+              </div>
+            </button></li>
+          <li class=""><button type="button" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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-inverted px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><span class="iconify i-lucide:monitor size-5 shrink-0 text-dimmed group-hover:text-default transition-colors" aria-hidden="true"></span>
+              <div class="min-w-0">
+                <p class="truncate font-medium">Shortcuts
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Learn how to display and define keyboard shortcuts in your app.</p>
+              </div>
+            </button></li>
+        </ul>
+      </div>
+      <div data-dismissable-layer="" style="pointer-events: none;" id="reka-navigation-menu-v-0-0-0-content-item-2" aria-labelledby="reka-navigation-menu-v-0-0-0-trigger-item-2" data-state="closed" data-orientation="horizontal" class="absolute top-0 left-0 w-full max-h-[70vh] overflow-y-auto 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]" hidden="">
+        <ul class="isolate grid p-2 grid-cols-2 gap-2">
+          <li class=""><a href="/components/link" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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-inverted px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><span class="iconify i-lucide:file size-5 shrink-0 text-dimmed group-hover:text-default transition-colors" aria-hidden="true"></span>
+              <div class="min-w-0">
+                <p class="truncate font-medium">Link
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Use NuxtLink with superpowers.</p>
+              </div>
+            </a></li>
+          <li class=""><a href="/components/modal" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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-inverted px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><span class="iconify i-lucide:file size-5 shrink-0 text-dimmed group-hover:text-default transition-colors" aria-hidden="true"></span>
+              <div class="min-w-0">
+                <p class="truncate font-medium">Modal
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Display a modal within your application.</p>
+              </div>
+            </a></li>
+          <li class=""><a href="/components/navigation-menu" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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-inverted px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><span class="iconify i-lucide:file size-5 shrink-0 text-dimmed group-hover:text-default transition-colors" aria-hidden="true"></span>
+              <div class="min-w-0">
+                <p class="truncate font-medium">NavigationMenu
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Display a list of links.</p>
+              </div>
+            </a></li>
+          <li class=""><a href="/components/pagination" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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-inverted px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><span class="iconify i-lucide:file size-5 shrink-0 text-dimmed group-hover:text-default transition-colors" aria-hidden="true"></span>
+              <div class="min-w-0">
+                <p class="truncate font-medium">Pagination
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Display a list of pages.</p>
+              </div>
+            </a></li>
+          <li class=""><a href="/components/popover" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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-inverted px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><span class="iconify i-lucide:file size-5 shrink-0 text-dimmed group-hover:text-default transition-colors" aria-hidden="true"></span>
+              <div class="min-w-0">
+                <p class="truncate font-medium">Popover
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Display a non-modal dialog that floats around a trigger element.</p>
+              </div>
+            </a></li>
+          <li class=""><a href="/components/progress" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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-inverted px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><span class="iconify i-lucide:file size-5 shrink-0 text-dimmed group-hover:text-default transition-colors" aria-hidden="true"></span>
+              <div class="min-w-0">
+                <p class="truncate font-medium">Progress
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Show a horizontal bar to indicate task progression.</p>
+              </div>
+            </a></li>
+        </ul>
+      </div>
+    </div>
   </div>
 </nav>"
 `;
@@ -773,14 +2162,12 @@ exports[`NavigationMenu > renders with neutral variant pill correctly 1`] = `
         </button>
         <!--v-if-->
         <!--teleport start-->
-        <!---->
         <!--teleport end-->
         <!--v-if-->
       </li>
       <li data-menu-item="" class="min-w-0 py-2"><button type="button" data-reka-collection-item="" id="reka-navigation-menu-v-0-0-0-trigger-item-2" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" aria-controls="reka-navigation-menu-v-0-0-0-content-item-2" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-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-inverted px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-highlighted before:bg-elevated"><span class="iconify i-lucide:box shrink-0 size-5 text-highlighted group-data-[state=open]:text-highlighted" aria-hidden="true"></span><span class="truncate">Components<!--v-if--></span><span as="span" class="group ms-auto inline-flex gap-1.5 items-center"><!--v-if--><span class="iconify i-lucide:chevron-down size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></span></button>
         <!--v-if-->
         <!--teleport start-->
-        <!---->
         <!--teleport end-->
         <!--v-if-->
       </li>
@@ -806,7 +2193,96 @@ exports[`NavigationMenu > renders with neutral variant pill correctly 1`] = `
   <!--v-if-->
   <div class="absolute top-full left-0 flex w-full justify-center">
     <!--v-if-->
-    <!---->
+    <div class="relative overflow-hidden bg-default shadow-lg rounded-md ring ring-default h-(--reka-navigation-menu-viewport-height) w-full transition-[width,height,left] duration-200 origin-[top_center] data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] z-[1]" data-state="closed" data-orientation="horizontal" style="pointer-events: none;" hidden="">
+      <div data-dismissable-layer="" style="pointer-events: none;" id="reka-navigation-menu-v-0-0-0-content-item-1" aria-labelledby="reka-navigation-menu-v-0-0-0-trigger-item-1" data-state="closed" data-orientation="horizontal" class="absolute top-0 left-0 w-full max-h-[70vh] overflow-y-auto 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]" hidden="">
+        <ul class="isolate grid p-2 grid-cols-2 gap-2">
+          <li class=""><button type="button" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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-inverted px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><span class="iconify i-lucide:house size-5 shrink-0 text-dimmed group-hover:text-default transition-colors" aria-hidden="true"></span>
+              <div class="min-w-0">
+                <p class="truncate font-medium">Introduction
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Fully styled and customizable components for Nuxt.</p>
+              </div>
+            </button></li>
+          <li class=""><button type="button" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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-inverted px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><span class="iconify i-lucide:cloud-download size-5 shrink-0 text-dimmed group-hover:text-default transition-colors" aria-hidden="true"></span>
+              <div class="min-w-0">
+                <p class="truncate font-medium">Installation
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Learn how to install and configure Nuxt UI in your application.</p>
+              </div>
+            </button></li>
+          <li class=""><button type="button" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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-inverted px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><span class="iconify i-lucide:swatch-book size-5 shrink-0 text-dimmed group-hover:text-default transition-colors" aria-hidden="true"></span>
+              <div class="min-w-0">
+                <p class="truncate font-medium">Theming
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Learn how to customize the look and feel of the components.</p>
+              </div>
+            </button></li>
+          <li class=""><button type="button" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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-inverted px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><span class="iconify i-lucide:monitor size-5 shrink-0 text-dimmed group-hover:text-default transition-colors" aria-hidden="true"></span>
+              <div class="min-w-0">
+                <p class="truncate font-medium">Shortcuts
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Learn how to display and define keyboard shortcuts in your app.</p>
+              </div>
+            </button></li>
+        </ul>
+      </div>
+      <div data-dismissable-layer="" style="pointer-events: none;" id="reka-navigation-menu-v-0-0-0-content-item-2" aria-labelledby="reka-navigation-menu-v-0-0-0-trigger-item-2" data-state="closed" data-orientation="horizontal" class="absolute top-0 left-0 w-full max-h-[70vh] overflow-y-auto 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]" hidden="">
+        <ul class="isolate grid p-2 grid-cols-2 gap-2">
+          <li class=""><a href="/components/link" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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-inverted px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><span class="iconify i-lucide:file size-5 shrink-0 text-dimmed group-hover:text-default transition-colors" aria-hidden="true"></span>
+              <div class="min-w-0">
+                <p class="truncate font-medium">Link
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Use NuxtLink with superpowers.</p>
+              </div>
+            </a></li>
+          <li class=""><a href="/components/modal" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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-inverted px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><span class="iconify i-lucide:file size-5 shrink-0 text-dimmed group-hover:text-default transition-colors" aria-hidden="true"></span>
+              <div class="min-w-0">
+                <p class="truncate font-medium">Modal
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Display a modal within your application.</p>
+              </div>
+            </a></li>
+          <li class=""><a href="/components/navigation-menu" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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-inverted px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><span class="iconify i-lucide:file size-5 shrink-0 text-dimmed group-hover:text-default transition-colors" aria-hidden="true"></span>
+              <div class="min-w-0">
+                <p class="truncate font-medium">NavigationMenu
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Display a list of links.</p>
+              </div>
+            </a></li>
+          <li class=""><a href="/components/pagination" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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-inverted px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><span class="iconify i-lucide:file size-5 shrink-0 text-dimmed group-hover:text-default transition-colors" aria-hidden="true"></span>
+              <div class="min-w-0">
+                <p class="truncate font-medium">Pagination
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Display a list of pages.</p>
+              </div>
+            </a></li>
+          <li class=""><a href="/components/popover" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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-inverted px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><span class="iconify i-lucide:file size-5 shrink-0 text-dimmed group-hover:text-default transition-colors" aria-hidden="true"></span>
+              <div class="min-w-0">
+                <p class="truncate font-medium">Popover
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Display a non-modal dialog that floats around a trigger element.</p>
+              </div>
+            </a></li>
+          <li class=""><a href="/components/progress" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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-inverted px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><span class="iconify i-lucide:file size-5 shrink-0 text-dimmed group-hover:text-default transition-colors" aria-hidden="true"></span>
+              <div class="min-w-0">
+                <p class="truncate font-medium">Progress
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Show a horizontal bar to indicate task progression.</p>
+              </div>
+            </a></li>
+        </ul>
+      </div>
+    </div>
   </div>
 </nav>"
 `;
@@ -821,14 +2297,12 @@ exports[`NavigationMenu > renders with neutral variant pill highlight correctly
         </button>
         <!--v-if-->
         <!--teleport start-->
-        <!---->
         <!--teleport end-->
         <!--v-if-->
       </li>
       <li data-menu-item="" class="min-w-0 py-2"><button type="button" data-reka-collection-item="" id="reka-navigation-menu-v-0-0-0-trigger-item-2" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" aria-controls="reka-navigation-menu-v-0-0-0-content-item-2" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-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-inverted px-2.5 py-1.5 before:inset-x-px before:inset-y-0 after:absolute after:-bottom-2 after:inset-x-2.5 after:block after:h-px after:rounded-full after:transition-colors data-[state=open]:before:bg-elevated/50 text-highlighted hover:before:bg-elevated/50 before:transition-colors after:bg-inverted"><span class="iconify i-lucide:box shrink-0 size-5 text-highlighted group-data-[state=open]:text-highlighted" aria-hidden="true"></span><span class="truncate">Components<!--v-if--></span><span as="span" class="group ms-auto inline-flex gap-1.5 items-center"><!--v-if--><span class="iconify i-lucide:chevron-down size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></span></button>
         <!--v-if-->
         <!--teleport start-->
-        <!---->
         <!--teleport end-->
         <!--v-if-->
       </li>
@@ -854,7 +2328,96 @@ exports[`NavigationMenu > renders with neutral variant pill highlight correctly
   <!--v-if-->
   <div class="absolute top-full left-0 flex w-full justify-center">
     <!--v-if-->
-    <!---->
+    <div class="relative overflow-hidden bg-default shadow-lg rounded-md ring ring-default h-(--reka-navigation-menu-viewport-height) w-full transition-[width,height,left] duration-200 origin-[top_center] data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] z-[1]" data-state="closed" data-orientation="horizontal" style="pointer-events: none;" hidden="">
+      <div data-dismissable-layer="" style="pointer-events: none;" id="reka-navigation-menu-v-0-0-0-content-item-1" aria-labelledby="reka-navigation-menu-v-0-0-0-trigger-item-1" data-state="closed" data-orientation="horizontal" class="absolute top-0 left-0 w-full max-h-[70vh] overflow-y-auto 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]" hidden="">
+        <ul class="isolate grid p-2 grid-cols-2 gap-2">
+          <li class=""><button type="button" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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-inverted px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><span class="iconify i-lucide:house size-5 shrink-0 text-dimmed group-hover:text-default transition-colors" aria-hidden="true"></span>
+              <div class="min-w-0">
+                <p class="truncate font-medium">Introduction
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Fully styled and customizable components for Nuxt.</p>
+              </div>
+            </button></li>
+          <li class=""><button type="button" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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-inverted px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><span class="iconify i-lucide:cloud-download size-5 shrink-0 text-dimmed group-hover:text-default transition-colors" aria-hidden="true"></span>
+              <div class="min-w-0">
+                <p class="truncate font-medium">Installation
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Learn how to install and configure Nuxt UI in your application.</p>
+              </div>
+            </button></li>
+          <li class=""><button type="button" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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-inverted px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><span class="iconify i-lucide:swatch-book size-5 shrink-0 text-dimmed group-hover:text-default transition-colors" aria-hidden="true"></span>
+              <div class="min-w-0">
+                <p class="truncate font-medium">Theming
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Learn how to customize the look and feel of the components.</p>
+              </div>
+            </button></li>
+          <li class=""><button type="button" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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-inverted px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><span class="iconify i-lucide:monitor size-5 shrink-0 text-dimmed group-hover:text-default transition-colors" aria-hidden="true"></span>
+              <div class="min-w-0">
+                <p class="truncate font-medium">Shortcuts
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Learn how to display and define keyboard shortcuts in your app.</p>
+              </div>
+            </button></li>
+        </ul>
+      </div>
+      <div data-dismissable-layer="" style="pointer-events: none;" id="reka-navigation-menu-v-0-0-0-content-item-2" aria-labelledby="reka-navigation-menu-v-0-0-0-trigger-item-2" data-state="closed" data-orientation="horizontal" class="absolute top-0 left-0 w-full max-h-[70vh] overflow-y-auto 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]" hidden="">
+        <ul class="isolate grid p-2 grid-cols-2 gap-2">
+          <li class=""><a href="/components/link" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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-inverted px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><span class="iconify i-lucide:file size-5 shrink-0 text-dimmed group-hover:text-default transition-colors" aria-hidden="true"></span>
+              <div class="min-w-0">
+                <p class="truncate font-medium">Link
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Use NuxtLink with superpowers.</p>
+              </div>
+            </a></li>
+          <li class=""><a href="/components/modal" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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-inverted px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><span class="iconify i-lucide:file size-5 shrink-0 text-dimmed group-hover:text-default transition-colors" aria-hidden="true"></span>
+              <div class="min-w-0">
+                <p class="truncate font-medium">Modal
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Display a modal within your application.</p>
+              </div>
+            </a></li>
+          <li class=""><a href="/components/navigation-menu" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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-inverted px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><span class="iconify i-lucide:file size-5 shrink-0 text-dimmed group-hover:text-default transition-colors" aria-hidden="true"></span>
+              <div class="min-w-0">
+                <p class="truncate font-medium">NavigationMenu
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Display a list of links.</p>
+              </div>
+            </a></li>
+          <li class=""><a href="/components/pagination" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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-inverted px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><span class="iconify i-lucide:file size-5 shrink-0 text-dimmed group-hover:text-default transition-colors" aria-hidden="true"></span>
+              <div class="min-w-0">
+                <p class="truncate font-medium">Pagination
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Display a list of pages.</p>
+              </div>
+            </a></li>
+          <li class=""><a href="/components/popover" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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-inverted px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><span class="iconify i-lucide:file size-5 shrink-0 text-dimmed group-hover:text-default transition-colors" aria-hidden="true"></span>
+              <div class="min-w-0">
+                <p class="truncate font-medium">Popover
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Display a non-modal dialog that floats around a trigger element.</p>
+              </div>
+            </a></li>
+          <li class=""><a href="/components/progress" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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-inverted px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><span class="iconify i-lucide:file size-5 shrink-0 text-dimmed group-hover:text-default transition-colors" aria-hidden="true"></span>
+              <div class="min-w-0">
+                <p class="truncate font-medium">Progress
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Show a horizontal bar to indicate task progression.</p>
+              </div>
+            </a></li>
+        </ul>
+      </div>
+    </div>
   </div>
 </nav>"
 `;
@@ -869,14 +2432,12 @@ exports[`NavigationMenu > renders with neutral variant pill highlight neutral co
         </button>
         <!--v-if-->
         <!--teleport start-->
-        <!---->
         <!--teleport end-->
         <!--v-if-->
       </li>
       <li data-menu-item="" class="min-w-0 py-2"><button type="button" data-reka-collection-item="" id="reka-navigation-menu-v-0-0-0-trigger-item-2" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" aria-controls="reka-navigation-menu-v-0-0-0-content-item-2" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-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-inverted px-2.5 py-1.5 before:inset-x-px before:inset-y-0 after:absolute after:-bottom-2 after:inset-x-2.5 after:block after:h-px after:rounded-full after:transition-colors data-[state=open]:before:bg-elevated/50 text-highlighted hover:before:bg-elevated/50 before:transition-colors after:bg-inverted"><span class="iconify i-lucide:box shrink-0 size-5 text-highlighted group-data-[state=open]:text-highlighted" aria-hidden="true"></span><span class="truncate">Components<!--v-if--></span><span as="span" class="group ms-auto inline-flex gap-1.5 items-center"><!--v-if--><span class="iconify i-lucide:chevron-down size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></span></button>
         <!--v-if-->
         <!--teleport start-->
-        <!---->
         <!--teleport end-->
         <!--v-if-->
       </li>
@@ -902,7 +2463,96 @@ exports[`NavigationMenu > renders with neutral variant pill highlight neutral co
   <!--v-if-->
   <div class="absolute top-full left-0 flex w-full justify-center">
     <!--v-if-->
-    <!---->
+    <div class="relative overflow-hidden bg-default shadow-lg rounded-md ring ring-default h-(--reka-navigation-menu-viewport-height) w-full transition-[width,height,left] duration-200 origin-[top_center] data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] z-[1]" data-state="closed" data-orientation="horizontal" style="pointer-events: none;" hidden="">
+      <div data-dismissable-layer="" style="pointer-events: none;" id="reka-navigation-menu-v-0-0-0-content-item-1" aria-labelledby="reka-navigation-menu-v-0-0-0-trigger-item-1" data-state="closed" data-orientation="horizontal" class="absolute top-0 left-0 w-full max-h-[70vh] overflow-y-auto 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]" hidden="">
+        <ul class="isolate grid p-2 grid-cols-2 gap-2">
+          <li class=""><button type="button" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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-inverted px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><span class="iconify i-lucide:house size-5 shrink-0 text-dimmed group-hover:text-default transition-colors" aria-hidden="true"></span>
+              <div class="min-w-0">
+                <p class="truncate font-medium">Introduction
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Fully styled and customizable components for Nuxt.</p>
+              </div>
+            </button></li>
+          <li class=""><button type="button" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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-inverted px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><span class="iconify i-lucide:cloud-download size-5 shrink-0 text-dimmed group-hover:text-default transition-colors" aria-hidden="true"></span>
+              <div class="min-w-0">
+                <p class="truncate font-medium">Installation
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Learn how to install and configure Nuxt UI in your application.</p>
+              </div>
+            </button></li>
+          <li class=""><button type="button" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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-inverted px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><span class="iconify i-lucide:swatch-book size-5 shrink-0 text-dimmed group-hover:text-default transition-colors" aria-hidden="true"></span>
+              <div class="min-w-0">
+                <p class="truncate font-medium">Theming
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Learn how to customize the look and feel of the components.</p>
+              </div>
+            </button></li>
+          <li class=""><button type="button" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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-inverted px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><span class="iconify i-lucide:monitor size-5 shrink-0 text-dimmed group-hover:text-default transition-colors" aria-hidden="true"></span>
+              <div class="min-w-0">
+                <p class="truncate font-medium">Shortcuts
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Learn how to display and define keyboard shortcuts in your app.</p>
+              </div>
+            </button></li>
+        </ul>
+      </div>
+      <div data-dismissable-layer="" style="pointer-events: none;" id="reka-navigation-menu-v-0-0-0-content-item-2" aria-labelledby="reka-navigation-menu-v-0-0-0-trigger-item-2" data-state="closed" data-orientation="horizontal" class="absolute top-0 left-0 w-full max-h-[70vh] overflow-y-auto 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]" hidden="">
+        <ul class="isolate grid p-2 grid-cols-2 gap-2">
+          <li class=""><a href="/components/link" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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-inverted px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><span class="iconify i-lucide:file size-5 shrink-0 text-dimmed group-hover:text-default transition-colors" aria-hidden="true"></span>
+              <div class="min-w-0">
+                <p class="truncate font-medium">Link
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Use NuxtLink with superpowers.</p>
+              </div>
+            </a></li>
+          <li class=""><a href="/components/modal" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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-inverted px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><span class="iconify i-lucide:file size-5 shrink-0 text-dimmed group-hover:text-default transition-colors" aria-hidden="true"></span>
+              <div class="min-w-0">
+                <p class="truncate font-medium">Modal
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Display a modal within your application.</p>
+              </div>
+            </a></li>
+          <li class=""><a href="/components/navigation-menu" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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-inverted px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><span class="iconify i-lucide:file size-5 shrink-0 text-dimmed group-hover:text-default transition-colors" aria-hidden="true"></span>
+              <div class="min-w-0">
+                <p class="truncate font-medium">NavigationMenu
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Display a list of links.</p>
+              </div>
+            </a></li>
+          <li class=""><a href="/components/pagination" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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-inverted px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><span class="iconify i-lucide:file size-5 shrink-0 text-dimmed group-hover:text-default transition-colors" aria-hidden="true"></span>
+              <div class="min-w-0">
+                <p class="truncate font-medium">Pagination
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Display a list of pages.</p>
+              </div>
+            </a></li>
+          <li class=""><a href="/components/popover" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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-inverted px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><span class="iconify i-lucide:file size-5 shrink-0 text-dimmed group-hover:text-default transition-colors" aria-hidden="true"></span>
+              <div class="min-w-0">
+                <p class="truncate font-medium">Popover
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Display a non-modal dialog that floats around a trigger element.</p>
+              </div>
+            </a></li>
+          <li class=""><a href="/components/progress" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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-inverted px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><span class="iconify i-lucide:file size-5 shrink-0 text-dimmed group-hover:text-default transition-colors" aria-hidden="true"></span>
+              <div class="min-w-0">
+                <p class="truncate font-medium">Progress
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Show a horizontal bar to indicate task progression.</p>
+              </div>
+            </a></li>
+        </ul>
+      </div>
+    </div>
   </div>
 </nav>"
 `;
@@ -1007,14 +2657,12 @@ exports[`NavigationMenu > renders with primary variant link correctly 1`] = `
         </button>
         <!--v-if-->
         <!--teleport start-->
-        <!---->
         <!--teleport end-->
         <!--v-if-->
       </li>
       <li data-menu-item="" class="min-w-0 py-2"><button type="button" data-reka-collection-item="" id="reka-navigation-menu-v-0-0-0-trigger-item-2" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" aria-controls="reka-navigation-menu-v-0-0-0-content-item-2" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-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 px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-primary"><span class="iconify i-lucide:box shrink-0 size-5 text-primary group-data-[state=open]:text-primary" aria-hidden="true"></span><span class="truncate">Components<!--v-if--></span><span as="span" class="group ms-auto inline-flex gap-1.5 items-center"><!--v-if--><span class="iconify i-lucide:chevron-down size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></span></button>
         <!--v-if-->
         <!--teleport start-->
-        <!---->
         <!--teleport end-->
         <!--v-if-->
       </li>
@@ -1040,7 +2688,96 @@ exports[`NavigationMenu > renders with primary variant link correctly 1`] = `
   <!--v-if-->
   <div class="absolute top-full left-0 flex w-full justify-center">
     <!--v-if-->
-    <!---->
+    <div class="relative overflow-hidden bg-default shadow-lg rounded-md ring ring-default h-(--reka-navigation-menu-viewport-height) w-full transition-[width,height,left] duration-200 origin-[top_center] data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] z-[1]" data-state="closed" data-orientation="horizontal" style="pointer-events: none;" hidden="">
+      <div data-dismissable-layer="" style="pointer-events: none;" id="reka-navigation-menu-v-0-0-0-content-item-1" aria-labelledby="reka-navigation-menu-v-0-0-0-trigger-item-1" data-state="closed" data-orientation="horizontal" class="absolute top-0 left-0 w-full max-h-[70vh] overflow-y-auto 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]" hidden="">
+        <ul class="isolate grid p-2 grid-cols-2 gap-2">
+          <li class=""><button type="button" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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 px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><span class="iconify i-lucide:house size-5 shrink-0 text-dimmed group-hover:text-default transition-colors" aria-hidden="true"></span>
+              <div class="min-w-0">
+                <p class="truncate font-medium">Introduction
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Fully styled and customizable components for Nuxt.</p>
+              </div>
+            </button></li>
+          <li class=""><button type="button" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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 px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><span class="iconify i-lucide:cloud-download size-5 shrink-0 text-dimmed group-hover:text-default transition-colors" aria-hidden="true"></span>
+              <div class="min-w-0">
+                <p class="truncate font-medium">Installation
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Learn how to install and configure Nuxt UI in your application.</p>
+              </div>
+            </button></li>
+          <li class=""><button type="button" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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 px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><span class="iconify i-lucide:swatch-book size-5 shrink-0 text-dimmed group-hover:text-default transition-colors" aria-hidden="true"></span>
+              <div class="min-w-0">
+                <p class="truncate font-medium">Theming
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Learn how to customize the look and feel of the components.</p>
+              </div>
+            </button></li>
+          <li class=""><button type="button" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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 px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><span class="iconify i-lucide:monitor size-5 shrink-0 text-dimmed group-hover:text-default transition-colors" aria-hidden="true"></span>
+              <div class="min-w-0">
+                <p class="truncate font-medium">Shortcuts
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Learn how to display and define keyboard shortcuts in your app.</p>
+              </div>
+            </button></li>
+        </ul>
+      </div>
+      <div data-dismissable-layer="" style="pointer-events: none;" id="reka-navigation-menu-v-0-0-0-content-item-2" aria-labelledby="reka-navigation-menu-v-0-0-0-trigger-item-2" data-state="closed" data-orientation="horizontal" class="absolute top-0 left-0 w-full max-h-[70vh] overflow-y-auto 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]" hidden="">
+        <ul class="isolate grid p-2 grid-cols-2 gap-2">
+          <li class=""><a href="/components/link" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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 px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><span class="iconify i-lucide:file size-5 shrink-0 text-dimmed group-hover:text-default transition-colors" aria-hidden="true"></span>
+              <div class="min-w-0">
+                <p class="truncate font-medium">Link
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Use NuxtLink with superpowers.</p>
+              </div>
+            </a></li>
+          <li class=""><a href="/components/modal" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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 px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><span class="iconify i-lucide:file size-5 shrink-0 text-dimmed group-hover:text-default transition-colors" aria-hidden="true"></span>
+              <div class="min-w-0">
+                <p class="truncate font-medium">Modal
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Display a modal within your application.</p>
+              </div>
+            </a></li>
+          <li class=""><a href="/components/navigation-menu" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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 px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><span class="iconify i-lucide:file size-5 shrink-0 text-dimmed group-hover:text-default transition-colors" aria-hidden="true"></span>
+              <div class="min-w-0">
+                <p class="truncate font-medium">NavigationMenu
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Display a list of links.</p>
+              </div>
+            </a></li>
+          <li class=""><a href="/components/pagination" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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 px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><span class="iconify i-lucide:file size-5 shrink-0 text-dimmed group-hover:text-default transition-colors" aria-hidden="true"></span>
+              <div class="min-w-0">
+                <p class="truncate font-medium">Pagination
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Display a list of pages.</p>
+              </div>
+            </a></li>
+          <li class=""><a href="/components/popover" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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 px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><span class="iconify i-lucide:file size-5 shrink-0 text-dimmed group-hover:text-default transition-colors" aria-hidden="true"></span>
+              <div class="min-w-0">
+                <p class="truncate font-medium">Popover
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Display a non-modal dialog that floats around a trigger element.</p>
+              </div>
+            </a></li>
+          <li class=""><a href="/components/progress" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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 px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><span class="iconify i-lucide:file size-5 shrink-0 text-dimmed group-hover:text-default transition-colors" aria-hidden="true"></span>
+              <div class="min-w-0">
+                <p class="truncate font-medium">Progress
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Show a horizontal bar to indicate task progression.</p>
+              </div>
+            </a></li>
+        </ul>
+      </div>
+    </div>
   </div>
 </nav>"
 `;
@@ -1055,14 +2792,12 @@ exports[`NavigationMenu > renders with primary variant link highlight correctly
         </button>
         <!--v-if-->
         <!--teleport start-->
-        <!---->
         <!--teleport end-->
         <!--v-if-->
       </li>
       <li data-menu-item="" class="min-w-0 py-2"><button type="button" data-reka-collection-item="" id="reka-navigation-menu-v-0-0-0-trigger-item-2" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" aria-controls="reka-navigation-menu-v-0-0-0-content-item-2" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-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 px-2.5 py-1.5 before:inset-x-px before:inset-y-0 after:absolute after:-bottom-2 after:inset-x-2.5 after:block after:h-px after:rounded-full after:transition-colors text-primary after:bg-primary"><span class="iconify i-lucide:box shrink-0 size-5 text-primary group-data-[state=open]:text-primary" aria-hidden="true"></span><span class="truncate">Components<!--v-if--></span><span as="span" class="group ms-auto inline-flex gap-1.5 items-center"><!--v-if--><span class="iconify i-lucide:chevron-down size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></span></button>
         <!--v-if-->
         <!--teleport start-->
-        <!---->
         <!--teleport end-->
         <!--v-if-->
       </li>
@@ -1088,7 +2823,96 @@ exports[`NavigationMenu > renders with primary variant link highlight correctly
   <!--v-if-->
   <div class="absolute top-full left-0 flex w-full justify-center">
     <!--v-if-->
-    <!---->
+    <div class="relative overflow-hidden bg-default shadow-lg rounded-md ring ring-default h-(--reka-navigation-menu-viewport-height) w-full transition-[width,height,left] duration-200 origin-[top_center] data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] z-[1]" data-state="closed" data-orientation="horizontal" style="pointer-events: none;" hidden="">
+      <div data-dismissable-layer="" style="pointer-events: none;" id="reka-navigation-menu-v-0-0-0-content-item-1" aria-labelledby="reka-navigation-menu-v-0-0-0-trigger-item-1" data-state="closed" data-orientation="horizontal" class="absolute top-0 left-0 w-full max-h-[70vh] overflow-y-auto 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]" hidden="">
+        <ul class="isolate grid p-2 grid-cols-2 gap-2">
+          <li class=""><button type="button" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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 px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><span class="iconify i-lucide:house size-5 shrink-0 text-dimmed group-hover:text-default transition-colors" aria-hidden="true"></span>
+              <div class="min-w-0">
+                <p class="truncate font-medium">Introduction
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Fully styled and customizable components for Nuxt.</p>
+              </div>
+            </button></li>
+          <li class=""><button type="button" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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 px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><span class="iconify i-lucide:cloud-download size-5 shrink-0 text-dimmed group-hover:text-default transition-colors" aria-hidden="true"></span>
+              <div class="min-w-0">
+                <p class="truncate font-medium">Installation
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Learn how to install and configure Nuxt UI in your application.</p>
+              </div>
+            </button></li>
+          <li class=""><button type="button" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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 px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><span class="iconify i-lucide:swatch-book size-5 shrink-0 text-dimmed group-hover:text-default transition-colors" aria-hidden="true"></span>
+              <div class="min-w-0">
+                <p class="truncate font-medium">Theming
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Learn how to customize the look and feel of the components.</p>
+              </div>
+            </button></li>
+          <li class=""><button type="button" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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 px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><span class="iconify i-lucide:monitor size-5 shrink-0 text-dimmed group-hover:text-default transition-colors" aria-hidden="true"></span>
+              <div class="min-w-0">
+                <p class="truncate font-medium">Shortcuts
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Learn how to display and define keyboard shortcuts in your app.</p>
+              </div>
+            </button></li>
+        </ul>
+      </div>
+      <div data-dismissable-layer="" style="pointer-events: none;" id="reka-navigation-menu-v-0-0-0-content-item-2" aria-labelledby="reka-navigation-menu-v-0-0-0-trigger-item-2" data-state="closed" data-orientation="horizontal" class="absolute top-0 left-0 w-full max-h-[70vh] overflow-y-auto 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]" hidden="">
+        <ul class="isolate grid p-2 grid-cols-2 gap-2">
+          <li class=""><a href="/components/link" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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 px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><span class="iconify i-lucide:file size-5 shrink-0 text-dimmed group-hover:text-default transition-colors" aria-hidden="true"></span>
+              <div class="min-w-0">
+                <p class="truncate font-medium">Link
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Use NuxtLink with superpowers.</p>
+              </div>
+            </a></li>
+          <li class=""><a href="/components/modal" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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 px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><span class="iconify i-lucide:file size-5 shrink-0 text-dimmed group-hover:text-default transition-colors" aria-hidden="true"></span>
+              <div class="min-w-0">
+                <p class="truncate font-medium">Modal
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Display a modal within your application.</p>
+              </div>
+            </a></li>
+          <li class=""><a href="/components/navigation-menu" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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 px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><span class="iconify i-lucide:file size-5 shrink-0 text-dimmed group-hover:text-default transition-colors" aria-hidden="true"></span>
+              <div class="min-w-0">
+                <p class="truncate font-medium">NavigationMenu
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Display a list of links.</p>
+              </div>
+            </a></li>
+          <li class=""><a href="/components/pagination" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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 px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><span class="iconify i-lucide:file size-5 shrink-0 text-dimmed group-hover:text-default transition-colors" aria-hidden="true"></span>
+              <div class="min-w-0">
+                <p class="truncate font-medium">Pagination
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Display a list of pages.</p>
+              </div>
+            </a></li>
+          <li class=""><a href="/components/popover" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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 px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><span class="iconify i-lucide:file size-5 shrink-0 text-dimmed group-hover:text-default transition-colors" aria-hidden="true"></span>
+              <div class="min-w-0">
+                <p class="truncate font-medium">Popover
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Display a non-modal dialog that floats around a trigger element.</p>
+              </div>
+            </a></li>
+          <li class=""><a href="/components/progress" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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 px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><span class="iconify i-lucide:file size-5 shrink-0 text-dimmed group-hover:text-default transition-colors" aria-hidden="true"></span>
+              <div class="min-w-0">
+                <p class="truncate font-medium">Progress
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Show a horizontal bar to indicate task progression.</p>
+              </div>
+            </a></li>
+        </ul>
+      </div>
+    </div>
   </div>
 </nav>"
 `;
@@ -1103,14 +2927,12 @@ exports[`NavigationMenu > renders with primary variant pill correctly 1`] = `
         </button>
         <!--v-if-->
         <!--teleport start-->
-        <!---->
         <!--teleport end-->
         <!--v-if-->
       </li>
       <li data-menu-item="" class="min-w-0 py-2"><button type="button" data-reka-collection-item="" id="reka-navigation-menu-v-0-0-0-trigger-item-2" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" aria-controls="reka-navigation-menu-v-0-0-0-content-item-2" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-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 px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-primary before:bg-elevated"><span class="iconify i-lucide:box shrink-0 size-5 text-primary group-data-[state=open]:text-primary" aria-hidden="true"></span><span class="truncate">Components<!--v-if--></span><span as="span" class="group ms-auto inline-flex gap-1.5 items-center"><!--v-if--><span class="iconify i-lucide:chevron-down size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></span></button>
         <!--v-if-->
         <!--teleport start-->
-        <!---->
         <!--teleport end-->
         <!--v-if-->
       </li>
@@ -1136,7 +2958,96 @@ exports[`NavigationMenu > renders with primary variant pill correctly 1`] = `
   <!--v-if-->
   <div class="absolute top-full left-0 flex w-full justify-center">
     <!--v-if-->
-    <!---->
+    <div class="relative overflow-hidden bg-default shadow-lg rounded-md ring ring-default h-(--reka-navigation-menu-viewport-height) w-full transition-[width,height,left] duration-200 origin-[top_center] data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] z-[1]" data-state="closed" data-orientation="horizontal" style="pointer-events: none;" hidden="">
+      <div data-dismissable-layer="" style="pointer-events: none;" id="reka-navigation-menu-v-0-0-0-content-item-1" aria-labelledby="reka-navigation-menu-v-0-0-0-trigger-item-1" data-state="closed" data-orientation="horizontal" class="absolute top-0 left-0 w-full max-h-[70vh] overflow-y-auto 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]" hidden="">
+        <ul class="isolate grid p-2 grid-cols-2 gap-2">
+          <li class=""><button type="button" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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 px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><span class="iconify i-lucide:house size-5 shrink-0 text-dimmed group-hover:text-default transition-colors" aria-hidden="true"></span>
+              <div class="min-w-0">
+                <p class="truncate font-medium">Introduction
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Fully styled and customizable components for Nuxt.</p>
+              </div>
+            </button></li>
+          <li class=""><button type="button" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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 px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><span class="iconify i-lucide:cloud-download size-5 shrink-0 text-dimmed group-hover:text-default transition-colors" aria-hidden="true"></span>
+              <div class="min-w-0">
+                <p class="truncate font-medium">Installation
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Learn how to install and configure Nuxt UI in your application.</p>
+              </div>
+            </button></li>
+          <li class=""><button type="button" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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 px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><span class="iconify i-lucide:swatch-book size-5 shrink-0 text-dimmed group-hover:text-default transition-colors" aria-hidden="true"></span>
+              <div class="min-w-0">
+                <p class="truncate font-medium">Theming
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Learn how to customize the look and feel of the components.</p>
+              </div>
+            </button></li>
+          <li class=""><button type="button" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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 px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><span class="iconify i-lucide:monitor size-5 shrink-0 text-dimmed group-hover:text-default transition-colors" aria-hidden="true"></span>
+              <div class="min-w-0">
+                <p class="truncate font-medium">Shortcuts
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Learn how to display and define keyboard shortcuts in your app.</p>
+              </div>
+            </button></li>
+        </ul>
+      </div>
+      <div data-dismissable-layer="" style="pointer-events: none;" id="reka-navigation-menu-v-0-0-0-content-item-2" aria-labelledby="reka-navigation-menu-v-0-0-0-trigger-item-2" data-state="closed" data-orientation="horizontal" class="absolute top-0 left-0 w-full max-h-[70vh] overflow-y-auto 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]" hidden="">
+        <ul class="isolate grid p-2 grid-cols-2 gap-2">
+          <li class=""><a href="/components/link" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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 px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><span class="iconify i-lucide:file size-5 shrink-0 text-dimmed group-hover:text-default transition-colors" aria-hidden="true"></span>
+              <div class="min-w-0">
+                <p class="truncate font-medium">Link
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Use NuxtLink with superpowers.</p>
+              </div>
+            </a></li>
+          <li class=""><a href="/components/modal" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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 px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><span class="iconify i-lucide:file size-5 shrink-0 text-dimmed group-hover:text-default transition-colors" aria-hidden="true"></span>
+              <div class="min-w-0">
+                <p class="truncate font-medium">Modal
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Display a modal within your application.</p>
+              </div>
+            </a></li>
+          <li class=""><a href="/components/navigation-menu" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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 px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><span class="iconify i-lucide:file size-5 shrink-0 text-dimmed group-hover:text-default transition-colors" aria-hidden="true"></span>
+              <div class="min-w-0">
+                <p class="truncate font-medium">NavigationMenu
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Display a list of links.</p>
+              </div>
+            </a></li>
+          <li class=""><a href="/components/pagination" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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 px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><span class="iconify i-lucide:file size-5 shrink-0 text-dimmed group-hover:text-default transition-colors" aria-hidden="true"></span>
+              <div class="min-w-0">
+                <p class="truncate font-medium">Pagination
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Display a list of pages.</p>
+              </div>
+            </a></li>
+          <li class=""><a href="/components/popover" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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 px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><span class="iconify i-lucide:file size-5 shrink-0 text-dimmed group-hover:text-default transition-colors" aria-hidden="true"></span>
+              <div class="min-w-0">
+                <p class="truncate font-medium">Popover
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Display a non-modal dialog that floats around a trigger element.</p>
+              </div>
+            </a></li>
+          <li class=""><a href="/components/progress" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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 px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><span class="iconify i-lucide:file size-5 shrink-0 text-dimmed group-hover:text-default transition-colors" aria-hidden="true"></span>
+              <div class="min-w-0">
+                <p class="truncate font-medium">Progress
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Show a horizontal bar to indicate task progression.</p>
+              </div>
+            </a></li>
+        </ul>
+      </div>
+    </div>
   </div>
 </nav>"
 `;
@@ -1151,14 +3062,12 @@ exports[`NavigationMenu > renders with primary variant pill highlight correctly
         </button>
         <!--v-if-->
         <!--teleport start-->
-        <!---->
         <!--teleport end-->
         <!--v-if-->
       </li>
       <li data-menu-item="" class="min-w-0 py-2"><button type="button" data-reka-collection-item="" id="reka-navigation-menu-v-0-0-0-trigger-item-2" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" aria-controls="reka-navigation-menu-v-0-0-0-content-item-2" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-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 px-2.5 py-1.5 before:inset-x-px before:inset-y-0 after:absolute after:-bottom-2 after:inset-x-2.5 after:block after:h-px after:rounded-full after:transition-colors data-[state=open]:before:bg-elevated/50 text-primary hover:before:bg-elevated/50 before:transition-colors after:bg-primary"><span class="iconify i-lucide:box shrink-0 size-5 text-primary group-data-[state=open]:text-primary" aria-hidden="true"></span><span class="truncate">Components<!--v-if--></span><span as="span" class="group ms-auto inline-flex gap-1.5 items-center"><!--v-if--><span class="iconify i-lucide:chevron-down size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></span></button>
         <!--v-if-->
         <!--teleport start-->
-        <!---->
         <!--teleport end-->
         <!--v-if-->
       </li>
@@ -1184,7 +3093,96 @@ exports[`NavigationMenu > renders with primary variant pill highlight correctly
   <!--v-if-->
   <div class="absolute top-full left-0 flex w-full justify-center">
     <!--v-if-->
-    <!---->
+    <div class="relative overflow-hidden bg-default shadow-lg rounded-md ring ring-default h-(--reka-navigation-menu-viewport-height) w-full transition-[width,height,left] duration-200 origin-[top_center] data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] z-[1]" data-state="closed" data-orientation="horizontal" style="pointer-events: none;" hidden="">
+      <div data-dismissable-layer="" style="pointer-events: none;" id="reka-navigation-menu-v-0-0-0-content-item-1" aria-labelledby="reka-navigation-menu-v-0-0-0-trigger-item-1" data-state="closed" data-orientation="horizontal" class="absolute top-0 left-0 w-full max-h-[70vh] overflow-y-auto 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]" hidden="">
+        <ul class="isolate grid p-2 grid-cols-2 gap-2">
+          <li class=""><button type="button" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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 px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><span class="iconify i-lucide:house size-5 shrink-0 text-dimmed group-hover:text-default transition-colors" aria-hidden="true"></span>
+              <div class="min-w-0">
+                <p class="truncate font-medium">Introduction
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Fully styled and customizable components for Nuxt.</p>
+              </div>
+            </button></li>
+          <li class=""><button type="button" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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 px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><span class="iconify i-lucide:cloud-download size-5 shrink-0 text-dimmed group-hover:text-default transition-colors" aria-hidden="true"></span>
+              <div class="min-w-0">
+                <p class="truncate font-medium">Installation
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Learn how to install and configure Nuxt UI in your application.</p>
+              </div>
+            </button></li>
+          <li class=""><button type="button" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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 px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><span class="iconify i-lucide:swatch-book size-5 shrink-0 text-dimmed group-hover:text-default transition-colors" aria-hidden="true"></span>
+              <div class="min-w-0">
+                <p class="truncate font-medium">Theming
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Learn how to customize the look and feel of the components.</p>
+              </div>
+            </button></li>
+          <li class=""><button type="button" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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 px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><span class="iconify i-lucide:monitor size-5 shrink-0 text-dimmed group-hover:text-default transition-colors" aria-hidden="true"></span>
+              <div class="min-w-0">
+                <p class="truncate font-medium">Shortcuts
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Learn how to display and define keyboard shortcuts in your app.</p>
+              </div>
+            </button></li>
+        </ul>
+      </div>
+      <div data-dismissable-layer="" style="pointer-events: none;" id="reka-navigation-menu-v-0-0-0-content-item-2" aria-labelledby="reka-navigation-menu-v-0-0-0-trigger-item-2" data-state="closed" data-orientation="horizontal" class="absolute top-0 left-0 w-full max-h-[70vh] overflow-y-auto 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]" hidden="">
+        <ul class="isolate grid p-2 grid-cols-2 gap-2">
+          <li class=""><a href="/components/link" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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 px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><span class="iconify i-lucide:file size-5 shrink-0 text-dimmed group-hover:text-default transition-colors" aria-hidden="true"></span>
+              <div class="min-w-0">
+                <p class="truncate font-medium">Link
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Use NuxtLink with superpowers.</p>
+              </div>
+            </a></li>
+          <li class=""><a href="/components/modal" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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 px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><span class="iconify i-lucide:file size-5 shrink-0 text-dimmed group-hover:text-default transition-colors" aria-hidden="true"></span>
+              <div class="min-w-0">
+                <p class="truncate font-medium">Modal
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Display a modal within your application.</p>
+              </div>
+            </a></li>
+          <li class=""><a href="/components/navigation-menu" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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 px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><span class="iconify i-lucide:file size-5 shrink-0 text-dimmed group-hover:text-default transition-colors" aria-hidden="true"></span>
+              <div class="min-w-0">
+                <p class="truncate font-medium">NavigationMenu
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Display a list of links.</p>
+              </div>
+            </a></li>
+          <li class=""><a href="/components/pagination" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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 px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><span class="iconify i-lucide:file size-5 shrink-0 text-dimmed group-hover:text-default transition-colors" aria-hidden="true"></span>
+              <div class="min-w-0">
+                <p class="truncate font-medium">Pagination
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Display a list of pages.</p>
+              </div>
+            </a></li>
+          <li class=""><a href="/components/popover" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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 px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><span class="iconify i-lucide:file size-5 shrink-0 text-dimmed group-hover:text-default transition-colors" aria-hidden="true"></span>
+              <div class="min-w-0">
+                <p class="truncate font-medium">Popover
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Display a non-modal dialog that floats around a trigger element.</p>
+              </div>
+            </a></li>
+          <li class=""><a href="/components/progress" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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 px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><span class="iconify i-lucide:file size-5 shrink-0 text-dimmed group-hover:text-default transition-colors" aria-hidden="true"></span>
+              <div class="min-w-0">
+                <p class="truncate font-medium">Progress
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Show a horizontal bar to indicate task progression.</p>
+              </div>
+            </a></li>
+        </ul>
+      </div>
+    </div>
   </div>
 </nav>"
 `;
@@ -1199,14 +3197,12 @@ exports[`NavigationMenu > renders with trailingIcon correctly 1`] = `
         </button>
         <!--v-if-->
         <!--teleport start-->
-        <!---->
         <!--teleport end-->
         <!--v-if-->
       </li>
       <li data-menu-item="" class="min-w-0 py-2"><button type="button" data-reka-collection-item="" id="reka-navigation-menu-v-0-0-0-trigger-item-2" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" aria-controls="reka-navigation-menu-v-0-0-0-content-item-2" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-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 px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-primary before:bg-elevated"><span class="iconify i-lucide:box shrink-0 size-5 text-primary group-data-[state=open]:text-primary" aria-hidden="true"></span><span class="truncate">Components<!--v-if--></span><span as="span" class="group ms-auto inline-flex gap-1.5 items-center"><!--v-if--><span class="iconify i-lucide:plus size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></span></button>
         <!--v-if-->
         <!--teleport start-->
-        <!---->
         <!--teleport end-->
         <!--v-if-->
       </li>
@@ -1232,7 +3228,96 @@ exports[`NavigationMenu > renders with trailingIcon correctly 1`] = `
   <!--v-if-->
   <div class="absolute top-full left-0 flex w-full justify-center">
     <!--v-if-->
-    <!---->
+    <div class="relative overflow-hidden bg-default shadow-lg rounded-md ring ring-default h-(--reka-navigation-menu-viewport-height) w-full transition-[width,height,left] duration-200 origin-[top_center] data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] z-[1]" data-state="closed" data-orientation="horizontal" style="pointer-events: none;" hidden="">
+      <div data-dismissable-layer="" style="pointer-events: none;" id="reka-navigation-menu-v-0-0-0-content-item-1" aria-labelledby="reka-navigation-menu-v-0-0-0-trigger-item-1" data-state="closed" data-orientation="horizontal" class="absolute top-0 left-0 w-full max-h-[70vh] overflow-y-auto 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]" hidden="">
+        <ul class="isolate grid p-2 grid-cols-2 gap-2">
+          <li class=""><button type="button" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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 px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><span class="iconify i-lucide:house size-5 shrink-0 text-dimmed group-hover:text-default transition-colors" aria-hidden="true"></span>
+              <div class="min-w-0">
+                <p class="truncate font-medium">Introduction
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Fully styled and customizable components for Nuxt.</p>
+              </div>
+            </button></li>
+          <li class=""><button type="button" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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 px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><span class="iconify i-lucide:cloud-download size-5 shrink-0 text-dimmed group-hover:text-default transition-colors" aria-hidden="true"></span>
+              <div class="min-w-0">
+                <p class="truncate font-medium">Installation
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Learn how to install and configure Nuxt UI in your application.</p>
+              </div>
+            </button></li>
+          <li class=""><button type="button" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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 px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><span class="iconify i-lucide:swatch-book size-5 shrink-0 text-dimmed group-hover:text-default transition-colors" aria-hidden="true"></span>
+              <div class="min-w-0">
+                <p class="truncate font-medium">Theming
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Learn how to customize the look and feel of the components.</p>
+              </div>
+            </button></li>
+          <li class=""><button type="button" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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 px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><span class="iconify i-lucide:monitor size-5 shrink-0 text-dimmed group-hover:text-default transition-colors" aria-hidden="true"></span>
+              <div class="min-w-0">
+                <p class="truncate font-medium">Shortcuts
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Learn how to display and define keyboard shortcuts in your app.</p>
+              </div>
+            </button></li>
+        </ul>
+      </div>
+      <div data-dismissable-layer="" style="pointer-events: none;" id="reka-navigation-menu-v-0-0-0-content-item-2" aria-labelledby="reka-navigation-menu-v-0-0-0-trigger-item-2" data-state="closed" data-orientation="horizontal" class="absolute top-0 left-0 w-full max-h-[70vh] overflow-y-auto 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]" hidden="">
+        <ul class="isolate grid p-2 grid-cols-2 gap-2">
+          <li class=""><a href="/components/link" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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 px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><span class="iconify i-lucide:file size-5 shrink-0 text-dimmed group-hover:text-default transition-colors" aria-hidden="true"></span>
+              <div class="min-w-0">
+                <p class="truncate font-medium">Link
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Use NuxtLink with superpowers.</p>
+              </div>
+            </a></li>
+          <li class=""><a href="/components/modal" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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 px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><span class="iconify i-lucide:file size-5 shrink-0 text-dimmed group-hover:text-default transition-colors" aria-hidden="true"></span>
+              <div class="min-w-0">
+                <p class="truncate font-medium">Modal
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Display a modal within your application.</p>
+              </div>
+            </a></li>
+          <li class=""><a href="/components/navigation-menu" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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 px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><span class="iconify i-lucide:file size-5 shrink-0 text-dimmed group-hover:text-default transition-colors" aria-hidden="true"></span>
+              <div class="min-w-0">
+                <p class="truncate font-medium">NavigationMenu
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Display a list of links.</p>
+              </div>
+            </a></li>
+          <li class=""><a href="/components/pagination" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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 px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><span class="iconify i-lucide:file size-5 shrink-0 text-dimmed group-hover:text-default transition-colors" aria-hidden="true"></span>
+              <div class="min-w-0">
+                <p class="truncate font-medium">Pagination
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Display a list of pages.</p>
+              </div>
+            </a></li>
+          <li class=""><a href="/components/popover" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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 px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><span class="iconify i-lucide:file size-5 shrink-0 text-dimmed group-hover:text-default transition-colors" aria-hidden="true"></span>
+              <div class="min-w-0">
+                <p class="truncate font-medium">Popover
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Display a non-modal dialog that floats around a trigger element.</p>
+              </div>
+            </a></li>
+          <li class=""><a href="/components/progress" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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 px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><span class="iconify i-lucide:file size-5 shrink-0 text-dimmed group-hover:text-default transition-colors" aria-hidden="true"></span>
+              <div class="min-w-0">
+                <p class="truncate font-medium">Progress
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Show a horizontal bar to indicate task progression.</p>
+              </div>
+            </a></li>
+        </ul>
+      </div>
+    </div>
   </div>
 </nav>"
 `;
@@ -1247,14 +3332,12 @@ exports[`NavigationMenu > renders with ui correctly 1`] = `
         </button>
         <!--v-if-->
         <!--teleport start-->
-        <!---->
         <!--teleport end-->
         <!--v-if-->
       </li>
       <li data-menu-item="" class="min-w-0 py-2"><button type="button" data-reka-collection-item="" id="reka-navigation-menu-v-0-0-0-trigger-item-2" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" aria-controls="reka-navigation-menu-v-0-0-0-content-item-2" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-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 px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-primary before:bg-elevated"><span class="iconify i-lucide:box shrink-0 size-5 text-primary group-data-[state=open]:text-primary" aria-hidden="true"></span><span class="truncate">Components<!--v-if--></span><span as="span" class="group ms-auto inline-flex gap-1.5 items-center"><!--v-if--><span class="iconify i-lucide:chevron-down size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></span></button>
         <!--v-if-->
         <!--teleport start-->
-        <!---->
         <!--teleport end-->
         <!--v-if-->
       </li>
@@ -1280,7 +3363,96 @@ exports[`NavigationMenu > renders with ui correctly 1`] = `
   <!--v-if-->
   <div class="absolute top-full left-0 flex w-full justify-center">
     <!--v-if-->
-    <!---->
+    <div class="relative overflow-hidden bg-default shadow-lg rounded-md ring ring-default h-(--reka-navigation-menu-viewport-height) w-full transition-[width,height,left] duration-200 origin-[top_center] data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] z-[1]" data-state="closed" data-orientation="horizontal" style="pointer-events: none;" hidden="">
+      <div data-dismissable-layer="" style="pointer-events: none;" id="reka-navigation-menu-v-0-0-0-content-item-1" aria-labelledby="reka-navigation-menu-v-0-0-0-trigger-item-1" data-state="closed" data-orientation="horizontal" class="absolute top-0 left-0 w-full max-h-[70vh] overflow-y-auto 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]" hidden="">
+        <ul class="isolate grid p-2 grid-cols-2 gap-2">
+          <li class=""><button type="button" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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 px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><span class="iconify i-lucide:house size-5 shrink-0 text-dimmed group-hover:text-default transition-colors" aria-hidden="true"></span>
+              <div class="min-w-0">
+                <p class="truncate font-medium">Introduction
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Fully styled and customizable components for Nuxt.</p>
+              </div>
+            </button></li>
+          <li class=""><button type="button" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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 px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><span class="iconify i-lucide:cloud-download size-5 shrink-0 text-dimmed group-hover:text-default transition-colors" aria-hidden="true"></span>
+              <div class="min-w-0">
+                <p class="truncate font-medium">Installation
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Learn how to install and configure Nuxt UI in your application.</p>
+              </div>
+            </button></li>
+          <li class=""><button type="button" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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 px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><span class="iconify i-lucide:swatch-book size-5 shrink-0 text-dimmed group-hover:text-default transition-colors" aria-hidden="true"></span>
+              <div class="min-w-0">
+                <p class="truncate font-medium">Theming
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Learn how to customize the look and feel of the components.</p>
+              </div>
+            </button></li>
+          <li class=""><button type="button" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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 px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><span class="iconify i-lucide:monitor size-5 shrink-0 text-dimmed group-hover:text-default transition-colors" aria-hidden="true"></span>
+              <div class="min-w-0">
+                <p class="truncate font-medium">Shortcuts
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Learn how to display and define keyboard shortcuts in your app.</p>
+              </div>
+            </button></li>
+        </ul>
+      </div>
+      <div data-dismissable-layer="" style="pointer-events: none;" id="reka-navigation-menu-v-0-0-0-content-item-2" aria-labelledby="reka-navigation-menu-v-0-0-0-trigger-item-2" data-state="closed" data-orientation="horizontal" class="absolute top-0 left-0 w-full max-h-[70vh] overflow-y-auto 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]" hidden="">
+        <ul class="isolate grid p-2 grid-cols-2 gap-2">
+          <li class=""><a href="/components/link" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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 px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><span class="iconify i-lucide:file size-5 shrink-0 text-dimmed group-hover:text-default transition-colors" aria-hidden="true"></span>
+              <div class="min-w-0">
+                <p class="truncate font-medium">Link
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Use NuxtLink with superpowers.</p>
+              </div>
+            </a></li>
+          <li class=""><a href="/components/modal" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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 px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><span class="iconify i-lucide:file size-5 shrink-0 text-dimmed group-hover:text-default transition-colors" aria-hidden="true"></span>
+              <div class="min-w-0">
+                <p class="truncate font-medium">Modal
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Display a modal within your application.</p>
+              </div>
+            </a></li>
+          <li class=""><a href="/components/navigation-menu" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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 px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><span class="iconify i-lucide:file size-5 shrink-0 text-dimmed group-hover:text-default transition-colors" aria-hidden="true"></span>
+              <div class="min-w-0">
+                <p class="truncate font-medium">NavigationMenu
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Display a list of links.</p>
+              </div>
+            </a></li>
+          <li class=""><a href="/components/pagination" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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 px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><span class="iconify i-lucide:file size-5 shrink-0 text-dimmed group-hover:text-default transition-colors" aria-hidden="true"></span>
+              <div class="min-w-0">
+                <p class="truncate font-medium">Pagination
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Display a list of pages.</p>
+              </div>
+            </a></li>
+          <li class=""><a href="/components/popover" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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 px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><span class="iconify i-lucide:file size-5 shrink-0 text-dimmed group-hover:text-default transition-colors" aria-hidden="true"></span>
+              <div class="min-w-0">
+                <p class="truncate font-medium">Popover
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Display a non-modal dialog that floats around a trigger element.</p>
+              </div>
+            </a></li>
+          <li class=""><a href="/components/progress" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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 px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><span class="iconify i-lucide:file size-5 shrink-0 text-dimmed group-hover:text-default transition-colors" aria-hidden="true"></span>
+              <div class="min-w-0">
+                <p class="truncate font-medium">Progress
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Show a horizontal bar to indicate task progression.</p>
+              </div>
+            </a></li>
+        </ul>
+      </div>
+    </div>
   </div>
 </nav>"
 `;
@@ -1430,14 +3602,12 @@ exports[`NavigationMenu > renders without externalIcon correctly 1`] = `
         </button>
         <!--v-if-->
         <!--teleport start-->
-        <!---->
         <!--teleport end-->
         <!--v-if-->
       </li>
       <li data-menu-item="" class="min-w-0 py-2"><button type="button" data-reka-collection-item="" id="reka-navigation-menu-v-0-0-0-trigger-item-2" data-state="closed" data-navigation-menu-trigger="" aria-expanded="false" aria-controls="reka-navigation-menu-v-0-0-0-content-item-2" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-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 px-2.5 py-1.5 before:inset-x-px before:inset-y-0 text-primary before:bg-elevated"><span class="iconify i-lucide:box shrink-0 size-5 text-primary group-data-[state=open]:text-primary" aria-hidden="true"></span><span class="truncate">Components<!--v-if--></span><span as="span" class="group ms-auto inline-flex gap-1.5 items-center"><!--v-if--><span class="iconify i-lucide:chevron-down size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true"></span></span></button>
         <!--v-if-->
         <!--teleport start-->
-        <!---->
         <!--teleport end-->
         <!--v-if-->
       </li>
@@ -1463,7 +3633,96 @@ exports[`NavigationMenu > renders without externalIcon correctly 1`] = `
   <!--v-if-->
   <div class="absolute top-full left-0 flex w-full justify-center">
     <!--v-if-->
-    <!---->
+    <div class="relative overflow-hidden bg-default shadow-lg rounded-md ring ring-default h-(--reka-navigation-menu-viewport-height) w-full transition-[width,height,left] duration-200 origin-[top_center] data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] z-[1]" data-state="closed" data-orientation="horizontal" style="pointer-events: none;" hidden="">
+      <div data-dismissable-layer="" style="pointer-events: none;" id="reka-navigation-menu-v-0-0-0-content-item-1" aria-labelledby="reka-navigation-menu-v-0-0-0-trigger-item-1" data-state="closed" data-orientation="horizontal" class="absolute top-0 left-0 w-full max-h-[70vh] overflow-y-auto 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]" hidden="">
+        <ul class="isolate grid p-2 grid-cols-2 gap-2">
+          <li class=""><button type="button" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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 px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><span class="iconify i-lucide:house size-5 shrink-0 text-dimmed group-hover:text-default transition-colors" aria-hidden="true"></span>
+              <div class="min-w-0">
+                <p class="truncate font-medium">Introduction
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Fully styled and customizable components for Nuxt.</p>
+              </div>
+            </button></li>
+          <li class=""><button type="button" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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 px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><span class="iconify i-lucide:cloud-download size-5 shrink-0 text-dimmed group-hover:text-default transition-colors" aria-hidden="true"></span>
+              <div class="min-w-0">
+                <p class="truncate font-medium">Installation
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Learn how to install and configure Nuxt UI in your application.</p>
+              </div>
+            </button></li>
+          <li class=""><button type="button" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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 px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><span class="iconify i-lucide:swatch-book size-5 shrink-0 text-dimmed group-hover:text-default transition-colors" aria-hidden="true"></span>
+              <div class="min-w-0">
+                <p class="truncate font-medium">Theming
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Learn how to customize the look and feel of the components.</p>
+              </div>
+            </button></li>
+          <li class=""><button type="button" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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 px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><span class="iconify i-lucide:monitor size-5 shrink-0 text-dimmed group-hover:text-default transition-colors" aria-hidden="true"></span>
+              <div class="min-w-0">
+                <p class="truncate font-medium">Shortcuts
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Learn how to display and define keyboard shortcuts in your app.</p>
+              </div>
+            </button></li>
+        </ul>
+      </div>
+      <div data-dismissable-layer="" style="pointer-events: none;" id="reka-navigation-menu-v-0-0-0-content-item-2" aria-labelledby="reka-navigation-menu-v-0-0-0-trigger-item-2" data-state="closed" data-orientation="horizontal" class="absolute top-0 left-0 w-full max-h-[70vh] overflow-y-auto 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]" hidden="">
+        <ul class="isolate grid p-2 grid-cols-2 gap-2">
+          <li class=""><a href="/components/link" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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 px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><span class="iconify i-lucide:file size-5 shrink-0 text-dimmed group-hover:text-default transition-colors" aria-hidden="true"></span>
+              <div class="min-w-0">
+                <p class="truncate font-medium">Link
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Use NuxtLink with superpowers.</p>
+              </div>
+            </a></li>
+          <li class=""><a href="/components/modal" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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 px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><span class="iconify i-lucide:file size-5 shrink-0 text-dimmed group-hover:text-default transition-colors" aria-hidden="true"></span>
+              <div class="min-w-0">
+                <p class="truncate font-medium">Modal
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Display a modal within your application.</p>
+              </div>
+            </a></li>
+          <li class=""><a href="/components/navigation-menu" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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 px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><span class="iconify i-lucide:file size-5 shrink-0 text-dimmed group-hover:text-default transition-colors" aria-hidden="true"></span>
+              <div class="min-w-0">
+                <p class="truncate font-medium">NavigationMenu
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Display a list of links.</p>
+              </div>
+            </a></li>
+          <li class=""><a href="/components/pagination" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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 px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><span class="iconify i-lucide:file size-5 shrink-0 text-dimmed group-hover:text-default transition-colors" aria-hidden="true"></span>
+              <div class="min-w-0">
+                <p class="truncate font-medium">Pagination
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Display a list of pages.</p>
+              </div>
+            </a></li>
+          <li class=""><a href="/components/popover" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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 px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><span class="iconify i-lucide:file size-5 shrink-0 text-dimmed group-hover:text-default transition-colors" aria-hidden="true"></span>
+              <div class="min-w-0">
+                <p class="truncate font-medium">Popover
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Display a non-modal dialog that floats around a trigger element.</p>
+              </div>
+            </a></li>
+          <li class=""><a href="/components/progress" data-reka-collection-item="" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-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 px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors"><span class="iconify i-lucide:file size-5 shrink-0 text-dimmed group-hover:text-default transition-colors" aria-hidden="true"></span>
+              <div class="min-w-0">
+                <p class="truncate font-medium">Progress
+                  <!--v-if-->
+                </p>
+                <p class="text-muted">Show a horizontal bar to indicate task progression.</p>
+              </div>
+            </a></li>
+        </ul>
+      </div>
+    </div>
   </div>
 </nav>"
 `;