feat(HorizontalNavigation): new component (#1279)

docs/components/content/examples/HorizontalNavigationExample.vue

@@ -0,0 +1,27 @@
+<script setup>
+const route = useRoute()
+
+const links = [{
+  label: 'Profile',
+  avatar: {
+    src: 'https://avatars.githubusercontent.com/u/739984?v=4'
+  },
+  badge: 100
+}, {
+  label: 'Installation',
+  icon: 'i-heroicons-home',
+  to: '/getting-started/installation'
+}, {
+  label: 'Horizontal Navigation',
+  icon: 'i-heroicons-chart-bar',
+  to: `${route.path.startsWith('/dev') ? '/dev' : ''}/navigation/horizontal-navigation`
+}, {
+  label: 'Command Palette',
+  icon: 'i-heroicons-command-line',
+  to: '/navigation/command-palette'
+}]
+</script>
+
+<template>
+  <UHorizontalNavigation :links="links" class="border-b border-gray-200 dark:border-gray-800" />
+</template>

docs/components/content/examples/HorizontalNavigationExampleDefaultSlot.vue

@@ -0,0 +1,22 @@
+<script setup>
+const route = useRoute()
+
+const links = [{
+  label: 'Horizontal Navigation',
+  to: `${route.path.startsWith('/dev') ? '/dev' : ''}/navigation/horizontal-navigation`
+}, {
+  label: 'Command Palette',
+  to: '/navigation/command-palette'
+}, {
+  label: 'Table',
+  to: '/data/table'
+}]
+</script>
+
+<template>
+  <UHorizontalNavigation :links="links">
+    <template #default="{ link }">
+      <span class="group-hover:text-primary relative">{{ link.label }}</span>
+    </template>
+  </UHorizontalNavigation>
+</template>

docs/components/content/examples/HorizontalNavigationExampleSections.vue

@@ -0,0 +1,29 @@
+<script setup>
+const route = useRoute()
+
+const links = [
+  [{
+    label: 'Installation',
+    icon: 'i-heroicons-home',
+    to: '/getting-started/installation'
+  }, {
+    label: 'Horizontal Navigation',
+    icon: 'i-heroicons-chart-bar',
+    to: `${route.path.startsWith('/dev') ? '/dev' : ''}/navigation/horizontal-navigation`
+  }, {
+    label: 'Command Palette',
+    icon: 'i-heroicons-command-line',
+    to: '/navigation/command-palette'
+  }], [{
+    label: 'Examples',
+    icon: 'i-heroicons-light-bulb'
+  }, {
+    label: 'Help',
+    icon: 'i-heroicons-question-mark-circle'
+  }]
+]
+</script>
+
+<template>
+  <UHorizontalNavigation :links="links" class="border-b border-gray-200 dark:border-gray-800" />
+</template>

docs/components/content/examples/VerticalNavigationExample.vue

@@ -1,4 +1,6 @@
 <script setup>
+const route = useRoute()
+
 const links = [{
   label: 'Profile',
   avatar: {
@@ -12,7 +14,7 @@ const links = [{
 }, {
   label: 'Vertical Navigation',
   icon: 'i-heroicons-chart-bar',
-  to: '/navigation/vertical-navigation'
+  to: `${route.path.startsWith('/dev') ? '/dev' : ''}/navigation/vertical-navigation`
 }, {
   label: 'Command Palette',
   icon: 'i-heroicons-command-line',

docs/components/content/examples/VerticalNavigationExampleSections.vue

@@ -1,38 +1,32 @@
 <script setup>
+const route = useRoute()
+
 const links = [
-  [
-    {
-      label: 'Profile',
-      avatar: {
-        src: 'https://avatars.githubusercontent.com/u/739984?v=4'
-      },
-      badge: 100
-    }, {
-      label: 'Installation',
-      icon: 'i-heroicons-home',
-      to: '/getting-started/installation'
-    }, {
-      label: 'Vertical Navigation',
-      icon: 'i-heroicons-chart-bar',
-      to: '/navigation/vertical-navigation'
-    }, {
-      label: 'Command Palette',
-      icon: 'i-heroicons-command-line',
-      to: '/navigation/command-palette'
-    }
-  ],
-  [
-    {
-      label: 'Examples',
-      icon: 'i-heroicons-light-bulb',
-      to: '/getting-started/examples#verticalnavigation'
+  [{
+    label: 'Profile',
+    avatar: {
+      src: 'https://avatars.githubusercontent.com/u/739984?v=4'
     },
-    {
-      label: 'Help',
-      icon: 'i-heroicons-question-mark-circle',
-      to: '/getting-started/examples'
-    }
-  ]
+    badge: 100
+  }, {
+    label: 'Installation',
+    icon: 'i-heroicons-home',
+    to: '/getting-started/installation'
+  }, {
+    label: 'Vertical Navigation',
+    icon: 'i-heroicons-chart-bar',
+    to: `${route.path.startsWith('/dev') ? '/dev' : ''}/navigation/vertical-navigation`
+  }, {
+    label: 'Command Palette',
+    icon: 'i-heroicons-command-line',
+    to: '/navigation/command-palette'
+  }], [{
+    label: 'Examples',
+    icon: 'i-heroicons-light-bulb'
+  }, {
+    label: 'Help',
+    icon: 'i-heroicons-question-mark-circle'
+  }]
 ]
 </script>
 

docs/content/5.navigation/1.vertical-navigation.md

@@ -1,6 +1,6 @@
 ---
 title: VerticalNavigation
-description: Display a vertical navigation.
+description: Display a list of vertical links.
 links:
   - label: GitHub
     icon: i-simple-icons-github

docs/content/5.navigation/6.horizontal-navigation.md

@@ -0,0 +1,64 @@
+---
+title: HorizontalNavigation
+description: Display a list of horizontal links.
+links:
+  - label: GitHub
+    icon: i-simple-icons-github
+    to: https://github.com/nuxt/ui/blob/dev/src/runtime/components/navigation/HorizontalNavigation.vue
+navigation:
+  badge: New
+---
+
+## Usage
+
+Pass an array to the `links` prop of the HorizontalNavigation component. Each link can have the following properties:
+
+- `label` - The label of the link.
+- `labelClass` - The class of the link label.
+- `icon` - The icon of the link.
+- `iconClass` - The class of the link icon.
+- `avatar` - The avatar of the link. You can pass all the props of the [Avatar](/elements/avatar) component.
+- `badge` - A badge to display next to the label. You can pass all the props of the [Badge](/elements/badge) component.
+- `click` - The click handler of the link.
+
+You can also pass any property from the [NuxtLink](https://nuxt.com/docs/api/components/nuxt-link#props) component such as `to`, `exact`, etc.
+
+:component-example{component="horizontal-navigation-example"}
+
+## Sections
+
+Group your navigation links into distinct sections, they will be displayed apart thanks to a `justify-between` flexbox layout.
+
+You can do this by passing an array of arrays to the `links` prop of the HorizontalNavigation component.
+
+:component-example{component="horizontal-navigation-example-sections"}
+
+## Slots
+
+You can use slots to customize links display.
+
+### `default`
+
+Use the `#default` slot to customize the link label. You will have access to the `link` and `isActive` properties in the slot scope.
+
+:component-example{component="horizontal-navigation-example-default-slot"}
+
+### `avatar`
+
+Use the `#avatar` slot to customize the link avatar. You will have access to the `link` and `isActive` properties in the slot scope.
+
+### `icon`
+
+Use the `#icon` slot to customize the link icon. You will have access to the `link` and `isActive` properties in the slot scope.
+
+### `badge`
+
+Use the `#badge` slot to customize the link badge. You will have access to the `link` and `isActive` properties in the slot scope.
+
+## Props
+
+:component-props
+
+## Config
+
+:component-preset