diff --git a/docs/content/3.components/context-menu.md b/docs/content/3.components/context-menu.md
index 7f33e423..e0b93e53 100644
--- a/docs/content/3.components/context-menu.md
+++ b/docs/content/3.components/context-menu.md
@@ -99,8 +99,12 @@ slots:
 :div{class="flex items-center justify-center rounded-md border border-dashed border-gray-300 dark:border-gray-700 text-sm aspect-video w-72"}[Right click here]
 ::
 
+::note
+You can pass an array of arrays to the `items` prop to create separated groups of items.
+::
+
 ::tip
-Each item can take a `children` array to create a nested menu which can be controlled using the `open`, `defaultOpen` and `content` properties.
+Each item can take a `children` array of objects with the same properties as the `items` prop to create a nested menu which can be controlled using the `open`, `defaultOpen` and `content` properties.
 ::
 
 ### Size
diff --git a/docs/content/3.components/dropdown-menu.md b/docs/content/3.components/dropdown-menu.md
index be3d26fe..daa711d9 100644
--- a/docs/content/3.components/dropdown-menu.md
+++ b/docs/content/3.components/dropdown-menu.md
@@ -98,8 +98,12 @@ slots:
 :u-button{icon="i-heroicons-bars-3" color="gray" variant="outline"}
 ::
 
+::note
+You can pass an array of arrays to the `items` prop to create separated groups of items.
+::
+
 ::tip
-Each item can take a `children` array to create a nested menu which can be controlled using the `open`, `defaultOpen` and `content` properties.
+Each item can take a `children` array of objects with the same properties as the `items` prop to create a nested menu which can be controlled using the `open`, `defaultOpen` and `content` properties.
 ::
 
 ### Content
diff --git a/docs/content/3.components/navigation-menu.md b/docs/content/3.components/navigation-menu.md
index 57c25231..f3b9add2 100644
--- a/docs/content/3.components/navigation-menu.md
+++ b/docs/content/3.components/navigation-menu.md
@@ -15,6 +15,273 @@ navigation:
 
 ## Usage
 
+### Items
+
+Use the `items` prop as an array of objects with the following properties:
+
+- `label?: string`{lang="ts-type"}
+- `icon?: string`{lang="ts-type"}
+- `avatar?: AvatarProps`{lang="ts-type"}
+- `badge?: string | number | BadgeProps`{lang="ts-type"}
+- `trailingIcon?: string`{lang="ts-type"}
+- `class?: any`{lang="ts-type"}
+- [`slot?: string`{lang="ts-type"}](#with-custom-slot)
+- `select?(e: Event): void`{lang="ts-type"}
+
+You can also pass any property from the [Link](/components/link#props) component such as `to`, `target`, etc.
+
+::component-code
+---
+collapse: true
+ignore:
+  - items
+  - class
+external:
+  - items
+props:
+  items:
+    - label: Guide
+      icon: i-heroicons-book-open
+      children:
+        - label: Introduction
+          description: Fully styled and customizable components for Nuxt.
+          icon: i-heroicons-home
+        - label: Installation
+          description: Learn how to install and configure Nuxt UI in your application.
+          icon: i-heroicons-cloud-arrow-down
+        - label: 'Icons'
+          icon: 'i-heroicons-face-smile'
+          description: 'You have nothing to do, @nuxt/icon will handle it automatically.'
+        - label: 'Colors'
+          icon: 'i-heroicons-swatch'
+          description: 'Choose a primary and a gray color from your Tailwind CSS theme.'
+        - label: 'Theme'
+          icon: 'i-heroicons-cog'
+          description: 'You can customize components by using the `class` / `ui` props or in your app.config.ts.'
+    - label: Composables
+      icon: i-heroicons-circle-stack
+      to: /composables
+      children:
+        - label: defineShortcuts
+          icon: i-heroicons-document-text-20-solid
+          description: Define shortcuts for your application.
+          to: /composables/define-shortcuts
+        - label: useModal
+          icon: i-heroicons-document-text-20-solid
+          description: Display a modal within your application.
+          to: /composables/use-modal
+        - label: useSlideover
+          icon: i-heroicons-document-text-20-solid
+          description: Display a slideover within your application.
+          to: /composables/use-slideover
+        - label: useToast
+          icon: i-heroicons-document-text-20-solid
+          description: Display a toast within your application.
+          to: /composables/use-toast
+    - label: Components
+      icon: i-heroicons-cube-transparent
+      to: /components
+      active: true
+      children:
+        - label: Link
+          icon: i-heroicons-document-text-20-solid
+          description: Use NuxtLink with superpowers.
+          to: /components/link
+        - label: Modal
+          icon: i-heroicons-document-text-20-solid
+          description: Display a modal within your application.
+          to: /components/modal
+        - label: NavigationMenu
+          icon: i-heroicons-document-text-20-solid
+          description: Display a list of links.
+          to: /components/navigation-menu
+        - label: Pagination
+          icon: i-heroicons-document-text-20-solid
+          description: Display a list of pages.
+          to: /components/pagination
+        - label: Popover
+          icon: i-heroicons-document-text-20-solid
+          description: Display a non-modal dialog that floats around a trigger element.
+          to: /components/popover
+        - label: Progress
+          icon: i-heroicons-document-text-20-solid
+          description: Show a horizontal bar to indicate task progression.
+          to: /components/progress
+    - label: GitHub
+      icon: i-simple-icons-github
+      badge: 3.8k
+      to: https://github.com/nuxt/ui
+      target: _blank
+    - label: Help
+      icon: i-heroicons-question-mark-circle
+      disabled: true
+  class: 'justify-center'
+---
+::
+
+::note
+You can pass an array of arrays to the `items` prop to display groups of items.
+::
+
+::tip{class="[&_ul]:my-0 [&_ul]:marker:text-green-500/50 dark:[&_ul]:marker:text-green-400/50"}
+Each item can take a `children` array of objects with the following properties to create submenus:
+
+- `label: string`
+- `description?: string`
+- `icon?: string`
+- `class?: any`
+- `select?(e: Event): void`
+::
+
+### Orientation
+
+Use the `orientation` prop to change the orientation of the NavigationMenu.
+
+::component-code
+---
+collapse: true
+ignore:
+  - items
+  - class
+external:
+  - items
+props:
+  orientation: 'vertical'
+  items:
+    - - label: Guide
+        icon: i-heroicons-book-open
+      - label: Composables
+        icon: i-heroicons-circle-stack
+        to: /composables
+      - label: Components
+        icon: i-heroicons-cube-transparent
+        to: /components
+        active: true
+    - - label: GitHub
+        icon: i-simple-icons-github
+        badge: 3.8k
+        to: https://github.com/nuxt/ui
+        target: _blank
+---
+::
+
+::note
+Groups will be spaced between each other when orientation is `horizontal` and separated by a line when orientation is `vertical`.
+::
+
+### Highlight
+
+Use the `highlight` prop to display a highlighted border for the active item.
+
+Use the `highlight-color` prop to change the color of the border. It defaults to the `color` prop.
+
+::component-code
+---
+prettier: true
+collapse: true
+ignore:
+  - items
+  - highlight
+  - class
+external:
+  - items
+props:
+  highlight: true
+  highlightColor: ''
+  orientation: 'horizontal'
+  items:
+    - - label: Guide
+        icon: i-heroicons-book-open
+      - label: Composables
+        icon: i-heroicons-circle-stack
+        to: /composables
+      - label: Components
+        icon: i-heroicons-cube-transparent
+        to: /components
+        active: true
+    - - label: GitHub
+        icon: i-simple-icons-github
+        badge: 3.8k
+        to: https://github.com/nuxt/ui
+        target: _blank
+  class: 'data-[orientation=horizontal]:border-b data-[orientation=vertical]:border-l border-gray-200 dark:border-gray-800'
+---
+::
+
+::note
+In this example, the `border-l` and `border-b` classes are applied to display a gray line, this is not done by default to let you have a clean slate to work with.
+::
+
+### Color
+
+Use the `color` prop to change the color of the NavigationMenu.
+
+::component-code
+---
+collapse: true
+ignore:
+  - items
+  - class
+external:
+  - items
+props:
+  color: 'gray'
+  items:
+    - - label: Guide
+        icon: i-heroicons-book-open
+      - label: Composables
+        icon: i-heroicons-circle-stack
+        to: /composables
+      - label: Components
+        icon: i-heroicons-cube-transparent
+        to: /components
+        active: true
+    - - label: GitHub
+        icon: i-simple-icons-github
+        badge: 3.8k
+        to: https://github.com/nuxt/ui
+        target: _blank
+---
+::
+
+### Variant
+
+Use the `variant` prop to change the variant of the NavigationMenu.
+
+::component-code
+---
+collapse: true
+ignore:
+  - items
+  - class
+external:
+  - items
+props:
+  color: 'gray'
+  variant: 'link'
+  highlight: false
+  items:
+    - - label: Guide
+        icon: i-heroicons-book-open
+      - label: Composables
+        icon: i-heroicons-circle-stack
+        to: /composables
+      - label: Components
+        icon: i-heroicons-cube-transparent
+        to: /components
+        active: true
+    - - label: GitHub
+        icon: i-simple-icons-github
+        badge: 3.8k
+        to: https://github.com/nuxt/ui
+        target: _blank
+---
+::
+
+::note
+The `highlight` prop changes the `pill` variant active item style. Try it out to see the difference.
+::
+
 ## Examples
 
 ## API
diff --git a/docs/nuxt.config.ts b/docs/nuxt.config.ts
index 72929f5a..05ef84a6 100644
--- a/docs/nuxt.config.ts
+++ b/docs/nuxt.config.ts
@@ -137,6 +137,7 @@ export default defineNuxtConfig({
         'UKbd',
         'ULink',
         'UModal',
+        'UNavigationMenu',
         'UPopover',
         'UProgress',
         'URadioGroup',
diff --git a/src/runtime/components/NavigationMenu.vue b/src/runtime/components/NavigationMenu.vue
index a5c709bd..cf02fbef 100644
--- a/src/runtime/components/NavigationMenu.vue
+++ b/src/runtime/components/NavigationMenu.vue
@@ -15,7 +15,7 @@ export interface NavigationMenuChildItem extends Omit<LinkProps, 'raw' | 'custom
   label: string
   description?: string
   icon?: string
-  select?(e: MouseEvent): void
+  select?(e: Event): void
 }
 
 export interface NavigationMenuItem extends Omit<LinkProps, 'raw' | 'custom'>, Pick<NavigationMenuItemProps, 'value'> {
@@ -26,7 +26,7 @@ export interface NavigationMenuItem extends Omit<LinkProps, 'raw' | 'custom'>, P
   trailingIcon?: string
   slot?: string
   children?: NavigationMenuChildItem[]
-  select?(e: MouseEvent): void
+  select?(e: Event): void
 }
 
 type NavigationMenuVariants = VariantProps<typeof navigationMenu>