diff --git a/playground/pages/navigation-menu.vue b/playground/pages/navigation-menu.vue
index 746245c7..2215bc00 100644
--- a/playground/pages/navigation-menu.vue
+++ b/playground/pages/navigation-menu.vue
@@ -2,11 +2,11 @@
 const links = [
   [{
     label: 'Profile',
+    active: true,
     avatar: {
       src: 'https://avatars.githubusercontent.com/u/739984?v=4'
     },
     badge: 100,
-    coucou: 'test',
     click () {
       console.log('Profile clicked')
     }
diff --git a/src/runtime/components/NavigationMenu.vue b/src/runtime/components/NavigationMenu.vue
index c38fc2aa..8a9e8795 100644
--- a/src/runtime/components/NavigationMenu.vue
+++ b/src/runtime/components/NavigationMenu.vue
@@ -4,7 +4,7 @@ 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 { LinkProps } from '#ui/components/Link.vue'
 import type { AvatarProps } from '#ui/components/Avatar.vue'
 import type { BadgeProps } from '#ui/components/Badge.vue'
 
@@ -16,8 +16,6 @@ export interface NavigationMenuLink extends LinkProps {
   label: string | number
   icon?: string
   avatar?: AvatarProps
-  click?: Function
-  class?: any
   badge?: string | number | BadgeProps
 }
 
@@ -42,7 +40,8 @@ export interface NavigationMenuSlots<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 { UIcon, UAvatar, UBadge, ULink, ULinkBase } from '#components'
+import { omit } from '#ui/utils'
 
 const props = withDefaults(defineProps<NavigationMenuProps<T>>(), { orientation: 'horizontal' })
 const emits = defineEmits<NavigationMenuEmits>()
@@ -50,49 +49,30 @@ 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 ui = computed(() => tv({ extend: navigationMenu, slots: props.ui })({ orientation: props.orientation }))
 
 const lists = computed(() => props.links?.length ? (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="leading" :link="link" :active="isActive">
-                <UAvatar v-if="link.avatar" size="2xs" v-bind="link.avatar" :class="ui.avatar({ active: isActive })" />
-                <UIcon v-else-if="link.icon" :name="link.icon" :class="ui.icon({ active: isActive })" />
+        <ULink v-slot="{ active, ...slotProps }" v-bind="omit(link, ['label', 'icon', 'avatar', 'badge'])" custom>
+          <NavigationMenuLink as-child :active="active">
+            <ULinkBase v-bind="slotProps" :class="ui.base({ active })">
+              <slot name="leading" :link="link" :active="active">
+                <UAvatar v-if="link.avatar" size="2xs" v-bind="link.avatar" :class="ui.avatar({ active })" />
+                <UIcon v-else-if="link.icon" :name="link.icon" :class="ui.icon({ active })" />
               </slot>
 
               <span v-if="link.label || $slots.default" :class="ui.label()">
-                <slot :link="link" :active="isActive">
+                <slot :link="link" :active="active">
                   {{ link.label }}
                 </slot>
               </span>
 
-              <slot name="trailing" :link="link" :active="isActive">
+              <slot name="trailing" :link="link" :active="active">
                 <UBadge
                   v-if="link.badge"
                   color="gray"
@@ -102,9 +82,9 @@ function onClick (e: MouseEvent, link: NavigationMenuLink, { href, navigate, isE
                   :class="ui.badge()"
                 />
               </slot>
-            </component>
+            </ULinkBase>
           </NavigationMenuLink>
-        </NuxtLink>
+        </ULink>
       </NavigationMenuItem>
     </NavigationMenuList>
   </NavigationMenuRoot>
diff --git a/test/components/__snapshots__/NavigationMenu.spec.ts.snap b/test/components/__snapshots__/NavigationMenu.spec.ts.snap
index f83b9b49..d220a5e9 100644
--- a/test/components/__snapshots__/NavigationMenu.spec.ts.snap
+++ b/test/components/__snapshots__/NavigationMenu.spec.ts.snap
@@ -4,7 +4,7 @@ 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 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 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 text-gray-500 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white" 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><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"><button type="button" class="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 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 text-gray-500 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white" 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><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 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 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 text-gray-500 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white" data-radix-vue-collection-item=""><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>
@@ -29,7 +29,7 @@ exports[`NavigationMenu > renders with class correctly 1`] = `
 "<nav aria-label="Main" data-orientation="horizontal" dir="ltr" class="relative flex items-center justify-between w-48">
   <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 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 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 text-gray-500 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white" 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><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"><button type="button" class="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 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 text-gray-500 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white" 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><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 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 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 text-gray-500 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white" data-radix-vue-collection-item=""><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>
@@ -54,7 +54,7 @@ exports[`NavigationMenu > renders with ui 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 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 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 text-gray-500 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white" 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><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"><button type="button" class="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 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 text-gray-500 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white" 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><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 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 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 text-gray-500 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white" data-radix-vue-collection-item=""><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 relative w-4 h-4 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>
@@ -79,18 +79,18 @@ exports[`NavigationMenu > renders with vertical orientation correctly 1`] = `
 "<nav aria-label="Main" data-orientation="vertical" dir="ltr" class="relative flex flex-col *:py-1.5 first:*:pt-0 last:*:pb-0 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 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 px-2.5 py-1.5 before:inset-px text-gray-500 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white hover:before:bg-gray-50 dark:hover:before:bg-gray-800/50" 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><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 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 px-2.5 py-1.5 before:inset-px text-gray-500 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white" data-radix-vue-collection-item=""><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">
+      <li data-menu-item="" class=""><button type="button" class="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 px-2.5 py-1.5 before:inset-px text-gray-500 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white hover:before:bg-gray-50 dark:hover:before:bg-gray-800/50" 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><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 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 px-2.5 py-1.5 before:inset-px text-gray-500 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white hover:before:bg-gray-50 dark:hover:before:bg-gray-800/50" data-radix-vue-collection-item=""><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 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 px-2.5 py-1.5 before:inset-px text-gray-500 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white" data-radix-vue-collection-item=""><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">
+      <li data-menu-item="" class=""><a href="/navigation-menu" class="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 px-2.5 py-1.5 before:inset-px text-gray-500 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white hover:before:bg-gray-50 dark:hover:before:bg-gray-800/50" data-radix-vue-collection-item=""><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 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 px-2.5 py-1.5 before:inset-px text-gray-500 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white" data-radix-vue-collection-item=""><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">
+      <li data-menu-item="" class=""><a href="/popover" class="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 px-2.5 py-1.5 before:inset-px text-gray-500 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white hover:before:bg-gray-50 dark:hover:before:bg-gray-800/50" data-radix-vue-collection-item=""><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-->