feat(NavigationMenu): new component

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 />

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>