feat(VerticalNavigation): ability to add dividers (#963)

* feat(VerticalNavigation): ability to add sections with divider

* lint fix

* updating branch. resolving conflicts

* reverting app.vue

* removing unnecessary style

---------

Co-authored-by: Inesh Bose <dev@inesh.xyz>

docs/components/content/examples/VerticalNavigationExampleSections.vue

@@ -0,0 +1,41 @@
+<script setup>
+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: 'Help',
+      icon: 'i-heroicons-question-mark-circle',
+      to: '/getting-started/examples'
+    }
+  ]
+]
+</script>
+
+<template>
+  <UVerticalNavigation :links="links" />
+</template>

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

@@ -27,6 +27,12 @@ You can also pass any property from the [NuxtLink](https://nuxt.com/docs/api/com
 Learn how to build a Tailwind like vertical navigation in the [Examples](/getting-started/examples#verticalnavigation) page.
 ::
 
+## Sections
+
+Group your navigation links into distinct sections, separated by a divider. You can do this by passing an array of arrays to the `links` prop of the VerticalNavigation component.
+
+:component-example{component="vertical-navigation-example-sections"}
+
 ## Slots
 
 You can use slots to customize links display.