From 0d4d86d79db488b79ca2baf7d620b415a36cb135 Mon Sep 17 00:00:00 2001
From: Benjamin Canac <canacb1@gmail.com>
Date: Tue, 19 Mar 2024 19:12:31 +0100
Subject: [PATCH] feat(NavigationMenu): new component

---
 playground/app.vue                            |  13 +-
 playground/pages/navigation-menu.vue          |  43 ++++++
 src/runtime/components/Link.vue               |   5 +
 src/runtime/components/NavigationMenu.vue     | 126 ++++++++++++++++++
 src/runtime/utils/index.ts                    |  27 ++++
 src/theme/index.ts                            |   1 +
 src/theme/navigationMenu.ts                   |  49 +++++++
 test/components/NavigationMenu.spec.ts        |  35 +++++
 .../__snapshots__/NavigationMenu.spec.ts.snap |  93 +++++++++++++
 9 files changed, 381 insertions(+), 11 deletions(-)
 create mode 100644 playground/pages/navigation-menu.vue
 create mode 100644 src/runtime/components/NavigationMenu.vue
 create mode 100644 src/theme/navigationMenu.ts
 create mode 100644 test/components/NavigationMenu.spec.ts
 create mode 100644 test/components/__snapshots__/NavigationMenu.spec.ts.snap

diff --git a/playground/app.vue b/playground/app.vue
index 41b19ed5..4b891dba 100644
--- a/playground/app.vue
+++ b/playground/app.vue
@@ -19,6 +19,7 @@ const components = [
   'input',
   'kbd',
   'modal',
+  'navigation-menu',
   'popover',
   'skeleton',
   'slideover',
@@ -34,17 +35,7 @@ function upperName (name: string) {
 <template>
   <UProvider>
     <UContainer class="min-h-screen flex flex-col gap-4 items-center justify-center overflow-y-auto">
-      <div class="flex gap-1.5 py-4">
-        <ULink
-          v-for="component in components"
-          :key="component"
-          :to="`/${component}`"
-          active-class="text-primary-500 dark:text-primary-400 font-medium"
-          class="capitalize text-sm"
-        >
-          {{ upperName(component) }}
-        </ULink>
-      </div>
+      <UNavigationMenu :links="components.map(component => ({ label: upperName(component), to: `/${component}` }))" class="border-b border-gray-200 dark:border-gray-800" />
 
       <div class="flex-1 flex flex-col justify-center">
         <NuxtPage />
diff --git a/playground/pages/navigation-menu.vue b/playground/pages/navigation-menu.vue
new file mode 100644
index 00000000..746245c7
--- /dev/null
+++ b/playground/pages/navigation-menu.vue
@@ -0,0 +1,43 @@
+<script setup lang="ts">
+const links = [
+  [{
+    label: 'Profile',
+    avatar: {
+      src: 'https://avatars.githubusercontent.com/u/739984?v=4'
+    },
+    badge: 100,
+    coucou: 'test',
+    click () {
+      console.log('Profile clicked')
+    }
+  }, {
+    label: 'Modal',
+    icon: 'i-heroicons-home',
+    to: '/modal'
+  }, {
+    label: 'NavigationMenu',
+    icon: 'i-heroicons-chart-bar',
+    to: '/navigation-menu'
+  }, {
+    label: 'Popover',
+    icon: 'i-heroicons-command-line',
+    to: '/popover'
+  }], [{
+    label: 'Examples',
+    icon: 'i-heroicons-light-bulb',
+    to: 'https://ui.nuxt.com',
+    target: '_blank'
+  }, {
+    label: 'Help',
+    icon: 'i-heroicons-question-mark-circle'
+  }]
+]
+</script>
+
+<template>
+  <div class="flex flex-col gap-12 w-4xl">
+    <UNavigationMenu :links="links" class="border-b border-gray-200 dark:border-gray-800" />
+
+    <UNavigationMenu :links="links" orientation="vertical" class="w-48" />
+  </div>
+</template>
diff --git a/src/runtime/components/Link.vue b/src/runtime/components/Link.vue
index 76847904..474f9b1d 100644
--- a/src/runtime/components/Link.vue
+++ b/src/runtime/components/Link.vue
@@ -1,6 +1,7 @@
 <script lang="ts">
 import type { PrimitiveProps } from 'radix-vue'
 import type { NuxtLinkProps } from '#app'
+import { pick } from '#ui/utils'
 
 export interface LinkProps extends NuxtLinkProps, Omit<PrimitiveProps, 'asChild'> {
   type?: string
@@ -11,6 +12,10 @@ export interface LinkProps extends NuxtLinkProps, Omit<PrimitiveProps, 'asChild'
   exactHash?: boolean
   inactiveClass?: string
 }
+
+export function getNuxtLinkProps (props: NuxtLinkProps) {
+  return pick(props, ['to', 'href', 'target', 'rel', 'noRel', 'prefetch', 'noPrefetch'])
+}
 </script>
 
 <script setup lang="ts">
diff --git a/src/runtime/components/NavigationMenu.vue b/src/runtime/components/NavigationMenu.vue
new file mode 100644
index 00000000..7c7c68a9
--- /dev/null
+++ b/src/runtime/components/NavigationMenu.vue
@@ -0,0 +1,126 @@
+<script lang="ts">
+import { tv } from 'tailwind-variants'
+import type { NavigationMenuRootProps, NavigationMenuRootEmits } from 'radix-vue'
+import type { AppConfig } from '@nuxt/schema'
+import _appConfig from '#build/app.config'
+import theme from '#build/ui/navigationMenu'
+import { getNuxtLinkProps, type LinkProps } from '#ui/components/Link.vue'
+import type { AvatarProps } from '#ui/components/Avatar.vue'
+import type { BadgeProps } from '#ui/components/Badge.vue'
+
+const appConfig = _appConfig as AppConfig & { ui: { navigationMenu: Partial<typeof theme> } }
+
+const navigationMenu = tv({ extend: tv(theme), ...(appConfig.ui?.navigationMenu || {}) })
+
+export interface NavigationMenuLink extends LinkProps {
+  label: string | number
+  labelClass?: any
+  icon?: string
+  iconClass?: any
+  avatar?: AvatarProps
+  avatarClass?: any
+  click?: Function
+  class?: any
+  badge?: string | number | BadgeProps
+}
+
+export interface NavigationMenuProps<T extends NavigationMenuLink> extends Omit<NavigationMenuRootProps, 'asChild' | 'dir'> {
+  links: T[][] | T[]
+  class?: any
+  ui?: Partial<typeof navigationMenu.slots>
+}
+
+export interface NavigationMenuEmits extends NavigationMenuRootEmits {}
+
+export interface NavigationMenuSlots<T extends NavigationMenuLink> {
+  avatar(props: { link: T; active: boolean }): any
+  icon(props: { link: T; active: boolean }): any
+  badge(props: { link: T; active: boolean }): any
+  default(props: { link: T; active: boolean }): any
+}
+</script>
+
+<script setup lang="ts" generic="T extends NavigationMenuLink">
+import { computed } from 'vue'
+import { NavigationMenuRoot, NavigationMenuList, NavigationMenuItem, NavigationMenuLink, useForwardPropsEmits } from 'radix-vue'
+import { reactivePick } from '@vueuse/core'
+import { NuxtLink, UIcon, UAvatar, UBadge } from '#components'
+import { omit } from '../utils'
+
+const props = withDefaults(defineProps<NavigationMenuProps<T>>(), { orientation: 'horizontal' })
+const emits = defineEmits<NavigationMenuEmits>()
+defineSlots<NavigationMenuSlots<T>>()
+
+const rootProps = useForwardPropsEmits(reactivePick(props, 'as', 'modelValue', 'defaultValue', 'delayDuration', 'skipDelayDuration', 'orientation'), emits)
+
+const ui = computed(() => tv({ extend: navigationMenu, slots: props.ui })({
+  orientation: props.orientation
+}))
+
+const lists = computed(() => (Array.isArray(props.links[0]) ? props.links : [props.links]) as T[][])
+
+function onClick (e: MouseEvent, link: NavigationMenuLink, { href, navigate, isExternal }: { href: string; navigate: Function; isExternal: boolean }) {
+  if (link.click) {
+    link.click(e)
+  }
+
+  if (href && !isExternal) {
+    navigate(e)
+  }
+}
+</script>
+
+<template>
+  <NavigationMenuRoot v-bind="rootProps" :class="ui.root({ class: props.class })">
+    <NavigationMenuList v-for="(list, index) in lists" :key="`list-${index}`" :class="ui.list()">
+      <NavigationMenuItem v-for="(link, subIndex) in list" :key="`list-${index}-${subIndex}`" :class="ui.item()">
+        <NuxtLink v-slot="{ href, target, rel, navigate, isExternal, isActive }" v-bind="getNuxtLinkProps(link)" custom>
+          <NavigationMenuLink as-child :active="isActive">
+            <component
+              :is="href ? 'a' : 'button'"
+              :href="href"
+              :rel="rel"
+              :target="target"
+              :class="ui.base({ active: isActive, class: link.class })"
+              @click="onClick($event, link, { href, navigate, isExternal })"
+            >
+              <slot name="avatar" :link="link" :active="isActive">
+                <UAvatar
+                  v-if="link.avatar"
+                  size="2xs"
+                  v-bind="link.avatar"
+                  :class="ui.avatar({ active: isActive, class: link.avatarClass })"
+                />
+              </slot>
+
+              <slot name="icon" :link="link" :active="isActive">
+                <UIcon
+                  v-if="link.icon"
+                  :name="link.icon"
+                  :class="ui.icon({ active: isActive, class: link.iconClass })"
+                />
+              </slot>
+
+              <slot :link="link" :active="isActive">
+                <span v-if="link.label" :class="ui.label({ class: link.labelClass })">
+                  {{ link.label }}
+                </span>
+              </slot>
+
+              <slot name="badge" :link="link" :active="isActive">
+                <UBadge
+                  v-if="link.badge"
+                  color="gray"
+                  variant="solid"
+                  size="xs"
+                  v-bind="(typeof link.badge === 'string' || typeof link.badge === 'number') ? { label: link.badge } : link.badge"
+                  :class="ui.badge()"
+                />
+              </slot>
+            </component>
+          </NavigationMenuLink>
+        </NuxtLink>
+      </NavigationMenuItem>
+    </NavigationMenuList>
+  </NavigationMenuRoot>
+</template>
diff --git a/src/runtime/utils/index.ts b/src/runtime/utils/index.ts
index 9ca3c401..b6d1782e 100644
--- a/src/runtime/utils/index.ts
+++ b/src/runtime/utils/index.ts
@@ -1,3 +1,30 @@
+export function omit<Data extends object, Keys extends keyof Data> (
+  data: Data,
+  keys: Keys[]
+): Omit<Data, Keys> {
+  const result = { ...data }
+
+  for (const key of keys) {
+    delete result[key]
+  }
+
+  return result as Omit<Data, Keys>
+}
+
+export function pick<Data extends object, Keys extends keyof Data> (
+  data: Data,
+  keys: Keys[]
+): Pick<Data, Keys> {
+  const result = {} as Pick<Data, Keys>
+
+  for (const key of keys) {
+    result[key] = data[key]
+  }
+
+  return result
+}
+
+
 export function looseToNumber (val: any): any {
   const n = parseFloat(val)
   return isNaN(n) ? val : n
diff --git a/src/theme/index.ts b/src/theme/index.ts
index c879f078..0507c8f6 100644
--- a/src/theme/index.ts
+++ b/src/theme/index.ts
@@ -11,6 +11,7 @@ export { default as icons } from './icons'
 export { default as input } from './input'
 export { default as kbd } from './kbd'
 export { default as modal } from './modal'
+export { default as navigationMenu } from './navigationMenu'
 export { default as popover } from './popover'
 export { default as skeleton } from './skeleton'
 export { default as slideover } from './slideover'
diff --git a/src/theme/navigationMenu.ts b/src/theme/navigationMenu.ts
new file mode 100644
index 00000000..510a18cb
--- /dev/null
+++ b/src/theme/navigationMenu.ts
@@ -0,0 +1,49 @@
+export default {
+  slots: {
+    root: 'relative',
+    list: '',
+    item: '',
+    base: 'group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:rounded-md focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary-500 dark:focus-visible:before:ring-primary-400 disabled:cursor-not-allowed disabled:opacity-75',
+    icon: 'shrink-0 w-5 h-5 relative',
+    avatar: 'shrink-0 relative',
+    label: 'truncate relative',
+    badge: 'shrink-0 ms-auto relative rounded'
+  },
+  variants: {
+    orientation: {
+      horizontal: {
+        root: 'w-full flex items-center justify-between',
+        list: 'flex items-center min-w-0',
+        item: 'min-w-0',
+        base: 'px-2.5 py-3.5 before:inset-x-0 before:inset-y-2 hover:before:bg-gray-50 dark:hover:before:bg-gray-800/50 after:absolute after:bottom-0 after:inset-x-2.5 after:block after:h-[2px] after:mt-2 after:rounded-full'
+      },
+      vertical: {
+        root: 'flex flex-col *:py-1.5 first:*:pt-0 last:*:pb-0 divide-y divide-gray-200 dark:divide-gray-800',
+        base: 'px-2.5 py-1.5 before:inset-px'
+      }
+    },
+    active: {
+      true: {
+        base: 'text-gray-900 dark:text-white',
+        icon: 'text-gray-700 dark:text-gray-200'
+      },
+      false: {
+        base: 'text-gray-500 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white',
+        icon: 'text-gray-400 dark:text-gray-500 group-hover:text-gray-700 dark:group-hover:text-gray-200'
+      }
+    }
+  },
+  compoundVariants: [{
+    orientation: 'horizontal',
+    active: true,
+    class: 'after:bg-primary-500 dark:after:bg-primary-400'
+  }, {
+    orientation: 'vertical',
+    active: true,
+    class: 'before:bg-gray-100 dark:before:bg-gray-800'
+  }, {
+    orientation: 'vertical',
+    active: false,
+    class: 'hover:before:bg-gray-50 dark:hover:before:bg-gray-800/50'
+  }]
+}
diff --git a/test/components/NavigationMenu.spec.ts b/test/components/NavigationMenu.spec.ts
new file mode 100644
index 00000000..f54d6358
--- /dev/null
+++ b/test/components/NavigationMenu.spec.ts
@@ -0,0 +1,35 @@
+import { describe, it, expect } from 'vitest'
+import NavigationMenu, { type NavigationMenuProps } from '../../src/runtime/components/NavigationMenu.vue'
+import ComponentRender from '../component-render'
+
+const links = [{
+  label: 'Profile',
+  avatar: {
+    src: 'https://avatars.githubusercontent.com/u/739984?v=4'
+  },
+  badge: 100
+}, {
+  label: 'Modal',
+  icon: 'i-heroicons-home',
+  to: '/modal'
+}, {
+  label: 'NavigationMenu',
+  icon: 'i-heroicons-chart-bar',
+  to: '/navigation-menu'
+}, {
+  label: 'Popover',
+  icon: 'i-heroicons-command-line',
+  to: '/popover'
+}]
+
+describe('NavigationMenu', () => {
+  it.each([
+    ['basic case', { props: { links } }],
+    ['with vertical orientation', { props: { links, orientation: 'vertical' as const } }],
+    ['with class', { props: { class: 'w-48' } }],
+    ['with ui', { props: { ui: { icon: 'w-4 h-4' } } }]
+  ])('renders %s correctly', async (nameOrHtml: string, options: { props?: NavigationMenuProps<typeof links[number]>, slots?: any }) => {
+    const html = await ComponentRender(nameOrHtml, options, NavigationMenu)
+    expect(html).toMatchSnapshot()
+  })
+})
diff --git a/test/components/__snapshots__/NavigationMenu.spec.ts.snap b/test/components/__snapshots__/NavigationMenu.spec.ts.snap
new file mode 100644
index 00000000..ef527997
--- /dev/null
+++ b/test/components/__snapshots__/NavigationMenu.spec.ts.snap
@@ -0,0 +1,93 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`NavigationMenu > renders basic case correctly 1`] = `
+"<nav aria-label="Main" data-orientation="horizontal" dir="ltr" class="relative w-full flex items-center justify-between">
+  <div style="position: relative;">
+    <ul class="flex items-center min-w-0" data-orientation="horizontal">
+      <li data-menu-item="" class="min-w-0"><button class="group relative w-full flex items-center gap-1.5 rounded-md font-medium text-sm before:absolute before:rounded-md focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 disabled:cursor-not-allowed disabled:opacity-75 px-2.5 py-3.5 before:inset-x-0 before:inset-y-2 hover:before:bg-gray-50 dark:hover:before:bg-gray-800/50 after:absolute after:bottom-0 after:inset-x-2.5 after:block after:h-[2px] after:mt-2 after:rounded-full" data-radix-vue-collection-item=""><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-gray-100 dark:bg-gray-800 size-5 text-[10px] shrink-0 relative"><!----><span class="font-medium leading-none text-gray-500 dark:text-gray-400 truncate"></span></span>
+          <!--v-if--><span class="truncate relative">Profile</span><span class="font-medium inline-flex items-center text-xs px-1.5 py-0.5 ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-700 dark:text-gray-200 bg-gray-50 dark:bg-gray-800 shrink-0 ms-auto relative rounded">100</span>
+        </button></li>
+      <li data-menu-item="" class="min-w-0"><a href="/modal" class="group relative w-full flex items-center gap-1.5 rounded-md font-medium text-sm before:absolute before:rounded-md focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 disabled:cursor-not-allowed disabled:opacity-75 px-2.5 py-3.5 before:inset-x-0 before:inset-y-2 hover:before:bg-gray-50 dark:hover:before:bg-gray-800/50 after:absolute after:bottom-0 after:inset-x-2.5 after:block after:h-[2px] after:mt-2 after:rounded-full" data-radix-vue-collection-item="">
+          <!--v-if--><svg data-v-0eed249c="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="icon shrink-0 w-5 h-5 relative text-gray-400 dark:text-gray-500 group-hover:text-gray-700 dark:group-hover:text-gray-200" width="1em" height="1em" viewBox="0 0 24 24">
+            <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="m2.25 12l8.955-8.955a1.124 1.124 0 0 1 1.59 0L21.75 12M4.5 9.75v10.125c0 .621.504 1.125 1.125 1.125H9.75v-4.875c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21h4.125c.621 0 1.125-.504 1.125-1.125V9.75M8.25 21h8.25"></path>
+          </svg><span class="truncate relative">Modal</span>
+          <!--v-if-->
+        </a></li>
+      <li data-menu-item="" class="min-w-0"><a href="/navigation-menu" class="group relative w-full flex items-center gap-1.5 rounded-md font-medium text-sm before:absolute before:rounded-md focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 disabled:cursor-not-allowed disabled:opacity-75 px-2.5 py-3.5 before:inset-x-0 before:inset-y-2 hover:before:bg-gray-50 dark:hover:before:bg-gray-800/50 after:absolute after:bottom-0 after:inset-x-2.5 after:block after:h-[2px] after:mt-2 after:rounded-full" data-radix-vue-collection-item="">
+          <!--v-if--><svg data-v-0eed249c="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="icon shrink-0 w-5 h-5 relative text-gray-400 dark:text-gray-500 group-hover:text-gray-700 dark:group-hover:text-gray-200" width="1em" height="1em" viewBox="0 0 24 24">
+            <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M3 13.125C3 12.504 3.504 12 4.125 12h2.25c.621 0 1.125.504 1.125 1.125v6.75C7.5 20.496 6.996 21 6.375 21h-2.25A1.125 1.125 0 0 1 3 19.875zm6.75-4.5c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125v11.25c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 0 1-1.125-1.125zm6.75-4.5c0-.621.504-1.125 1.125-1.125h2.25C20.496 3 21 3.504 21 4.125v15.75c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 0 1-1.125-1.125z"></path>
+          </svg><span class="truncate relative">NavigationMenu</span>
+          <!--v-if-->
+        </a></li>
+      <li data-menu-item="" class="min-w-0"><a href="/popover" class="group relative w-full flex items-center gap-1.5 rounded-md font-medium text-sm before:absolute before:rounded-md focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 disabled:cursor-not-allowed disabled:opacity-75 px-2.5 py-3.5 before:inset-x-0 before:inset-y-2 hover:before:bg-gray-50 dark:hover:before:bg-gray-800/50 after:absolute after:bottom-0 after:inset-x-2.5 after:block after:h-[2px] after:mt-2 after:rounded-full" data-radix-vue-collection-item="">
+          <!--v-if--><svg data-v-0eed249c="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="icon shrink-0 w-5 h-5 relative text-gray-400 dark:text-gray-500 group-hover:text-gray-700 dark:group-hover:text-gray-200" width="1em" height="1em" viewBox="0 0 24 24">
+            <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="m6.75 7.5l3 2.25l-3 2.25m4.5 0h3m-9 8.25h13.5A2.25 2.25 0 0 0 21 18V6a2.25 2.25 0 0 0-2.25-2.25H5.25A2.25 2.25 0 0 0 3 6v12a2.25 2.25 0 0 0 2.25 2.25"></path>
+          </svg><span class="truncate relative">Popover</span>
+          <!--v-if-->
+        </a></li>
+    </ul>
+  </div>
+  <div style="position: relative;">
+    <ul class="flex items-center min-w-0" data-orientation="horizontal">
+      <li data-menu-item="" class="min-w-0"><a href="https://ui.nuxt.com" rel="noopener noreferrer" target="_blank" class="group relative w-full flex items-center gap-1.5 rounded-md font-medium text-sm before:absolute before:rounded-md focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 disabled:cursor-not-allowed disabled:opacity-75 px-2.5 py-3.5 before:inset-x-0 before:inset-y-2 hover:before:bg-gray-50 dark:hover:before:bg-gray-800/50 after:absolute after:bottom-0 after:inset-x-2.5 after:block after:h-[2px] after:mt-2 after:rounded-full" data-radix-vue-collection-item="">
+          <!--v-if--><svg data-v-0eed249c="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="icon shrink-0 w-5 h-5 relative text-gray-400 dark:text-gray-500 group-hover:text-gray-700 dark:group-hover:text-gray-200" width="1em" height="1em" viewBox="0 0 24 24">
+            <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M12 18v-5.25m0 0a6.01 6.01 0 0 0 1.5-.189m-1.5.189a6.01 6.01 0 0 1-1.5-.189m3.75 7.478a12.06 12.06 0 0 1-4.5 0m3.75 2.383a14.406 14.406 0 0 1-3 0M14.25 18v-.192c0-.983.658-1.823 1.508-2.316a7.5 7.5 0 1 0-7.517 0c.85.493 1.509 1.333 1.509 2.316V18"></path>
+          </svg><span class="truncate relative">Examples</span>
+          <!--v-if-->
+        </a></li>
+      <li data-menu-item="" class="min-w-0"><button class="group relative w-full flex items-center gap-1.5 rounded-md font-medium text-sm before:absolute before:rounded-md focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 disabled:cursor-not-allowed disabled:opacity-75 px-2.5 py-3.5 before:inset-x-0 before:inset-y-2 hover:before:bg-gray-50 dark:hover:before:bg-gray-800/50 after:absolute after:bottom-0 after:inset-x-2.5 after:block after:h-[2px] after:mt-2 after:rounded-full" data-radix-vue-collection-item="">
+          <!--v-if--><svg data-v-0eed249c="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="icon shrink-0 w-5 h-5 relative text-gray-400 dark:text-gray-500 group-hover:text-gray-700 dark:group-hover:text-gray-200" width="1em" height="1em" viewBox="0 0 24 24">
+            <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9.879 7.519c1.172-1.025 3.071-1.025 4.243 0c1.171 1.025 1.171 2.687 0 3.712a2.98 2.98 0 0 1-.67.442c-.746.361-1.452.999-1.452 1.827v.75M21 12a9 9 0 1 1-18 0a9 9 0 0 1 18 0m-9 5.25h.008v.008H12z"></path>
+          </svg><span class="truncate relative">Help</span>
+          <!--v-if-->
+        </button></li>
+    </ul>
+  </div>
+</nav>"
+`;
+
+exports[`NavigationMenu > renders with vertical orientation correctly 1`] = `
+"<nav aria-label="Main" data-orientation="vertical" dir="ltr" class="relative space-y-2 divide-y divide-gray-200 dark:divide-gray-800">
+  <div style="position: relative;">
+    <ul class="" data-orientation="vertical">
+      <li data-menu-item="" class=""><button class="group relative w-full flex items-center gap-1.5 rounded-md font-medium text-sm before:absolute before:rounded-md focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 disabled:cursor-not-allowed disabled:opacity-75 px-2.5 py-1.5 before:inset-px" data-radix-vue-collection-item=""><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-gray-100 dark:bg-gray-800 size-5 text-[10px] shrink-0 relative"><!----><span class="font-medium leading-none text-gray-500 dark:text-gray-400 truncate"></span></span>
+          <!--v-if--><span class="truncate relative">Profile</span><span class="font-medium inline-flex items-center text-xs px-1.5 py-0.5 ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-700 dark:text-gray-200 bg-gray-50 dark:bg-gray-800 shrink-0 ms-auto relative rounded">100</span>
+        </button></li>
+      <li data-menu-item="" class=""><a href="/modal" class="group relative w-full flex items-center gap-1.5 rounded-md font-medium text-sm before:absolute before:rounded-md focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 disabled:cursor-not-allowed disabled:opacity-75 px-2.5 py-1.5 before:inset-px" data-radix-vue-collection-item="">
+          <!--v-if--><svg data-v-0eed249c="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="icon shrink-0 w-5 h-5 relative text-gray-400 dark:text-gray-500 group-hover:text-gray-700 dark:group-hover:text-gray-200" width="1em" height="1em" viewBox="0 0 24 24">
+            <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="m2.25 12l8.955-8.955a1.124 1.124 0 0 1 1.59 0L21.75 12M4.5 9.75v10.125c0 .621.504 1.125 1.125 1.125H9.75v-4.875c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21h4.125c.621 0 1.125-.504 1.125-1.125V9.75M8.25 21h8.25"></path>
+          </svg><span class="truncate relative">Modal</span>
+          <!--v-if-->
+        </a></li>
+      <li data-menu-item="" class=""><a href="/navigation-menu" class="group relative w-full flex items-center gap-1.5 rounded-md font-medium text-sm before:absolute before:rounded-md focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 disabled:cursor-not-allowed disabled:opacity-75 px-2.5 py-1.5 before:inset-px" data-radix-vue-collection-item="">
+          <!--v-if--><svg data-v-0eed249c="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="icon shrink-0 w-5 h-5 relative text-gray-400 dark:text-gray-500 group-hover:text-gray-700 dark:group-hover:text-gray-200" width="1em" height="1em" viewBox="0 0 24 24">
+            <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M3 13.125C3 12.504 3.504 12 4.125 12h2.25c.621 0 1.125.504 1.125 1.125v6.75C7.5 20.496 6.996 21 6.375 21h-2.25A1.125 1.125 0 0 1 3 19.875zm6.75-4.5c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125v11.25c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 0 1-1.125-1.125zm6.75-4.5c0-.621.504-1.125 1.125-1.125h2.25C20.496 3 21 3.504 21 4.125v15.75c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 0 1-1.125-1.125z"></path>
+          </svg><span class="truncate relative">NavigationMenu</span>
+          <!--v-if-->
+        </a></li>
+      <li data-menu-item="" class=""><a href="/popover" class="group relative w-full flex items-center gap-1.5 rounded-md font-medium text-sm before:absolute before:rounded-md focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 disabled:cursor-not-allowed disabled:opacity-75 px-2.5 py-1.5 before:inset-px" data-radix-vue-collection-item="">
+          <!--v-if--><svg data-v-0eed249c="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="icon shrink-0 w-5 h-5 relative text-gray-400 dark:text-gray-500 group-hover:text-gray-700 dark:group-hover:text-gray-200" width="1em" height="1em" viewBox="0 0 24 24">
+            <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="m6.75 7.5l3 2.25l-3 2.25m4.5 0h3m-9 8.25h13.5A2.25 2.25 0 0 0 21 18V6a2.25 2.25 0 0 0-2.25-2.25H5.25A2.25 2.25 0 0 0 3 6v12a2.25 2.25 0 0 0 2.25 2.25"></path>
+          </svg><span class="truncate relative">Popover</span>
+          <!--v-if-->
+        </a></li>
+    </ul>
+  </div>
+  <div style="position: relative;">
+    <ul class="" data-orientation="vertical">
+      <li data-menu-item="" class=""><a href="https://ui.nuxt.com" rel="noopener noreferrer" target="_blank" class="group relative w-full flex items-center gap-1.5 rounded-md font-medium text-sm before:absolute before:rounded-md focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 disabled:cursor-not-allowed disabled:opacity-75 px-2.5 py-1.5 before:inset-px" data-radix-vue-collection-item="">
+          <!--v-if--><svg data-v-0eed249c="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="icon shrink-0 w-5 h-5 relative text-gray-400 dark:text-gray-500 group-hover:text-gray-700 dark:group-hover:text-gray-200" width="1em" height="1em" viewBox="0 0 24 24">
+            <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M12 18v-5.25m0 0a6.01 6.01 0 0 0 1.5-.189m-1.5.189a6.01 6.01 0 0 1-1.5-.189m3.75 7.478a12.06 12.06 0 0 1-4.5 0m3.75 2.383a14.406 14.406 0 0 1-3 0M14.25 18v-.192c0-.983.658-1.823 1.508-2.316a7.5 7.5 0 1 0-7.517 0c.85.493 1.509 1.333 1.509 2.316V18"></path>
+          </svg><span class="truncate relative">Examples</span>
+          <!--v-if-->
+        </a></li>
+      <li data-menu-item="" class=""><button class="group relative w-full flex items-center gap-1.5 rounded-md font-medium text-sm before:absolute before:rounded-md focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 disabled:cursor-not-allowed disabled:opacity-75 px-2.5 py-1.5 before:inset-px" data-radix-vue-collection-item="">
+          <!--v-if--><svg data-v-0eed249c="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="icon shrink-0 w-5 h-5 relative text-gray-400 dark:text-gray-500 group-hover:text-gray-700 dark:group-hover:text-gray-200" width="1em" height="1em" viewBox="0 0 24 24">
+            <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9.879 7.519c1.172-1.025 3.071-1.025 4.243 0c1.171 1.025 1.171 2.687 0 3.712a2.98 2.98 0 0 1-.67.442c-.746.361-1.452.999-1.452 1.827v.75M21 12a9 9 0 1 1-18 0a9 9 0 0 1 18 0m-9 5.25h.008v.008H12z"></path>
+          </svg><span class="truncate relative">Help</span>
+          <!--v-if-->
+        </button></li>
+    </ul>
+  </div>
+</nav>"
+`;