N Menu

Naive UI Menu Component

Menu component for navigation and actions. No Food.

When to Use

Use this component when:

• Side navigation: Create sidebar navigation for applications
• Top navigation: Build horizontal navigation bars
• Nested navigation: Display hierarchical menu structures
• Admin panels: Create collapsible sidebar menus

When to Invoke

Invoke this skill when:

• User needs to implement navigation menus
• User wants to create sidebar or top navigation
• User needs collapsible menu functionality
• User wants to integrate with vue-router
• User asks about menu customization or rendering

Features

• Horizontal & Vertical: Support both layout modes
• Collapsible: Collapse menu with icon-only mode
• Nested Items: Support multi-level menu structure
• Router Integration: Works with vue-router
• Custom Rendering: Custom render functions for labels and icons
• Accordion Mode: Expand one submenu at a time
• Responsive: Auto-collapse overflow items in horizontal mode

API Reference

Menu Props

MenuOption Properties

Menu Methods

Basic Usage

Horizontal Menu

<template>
  <n-menu
    v-model:value="activeKey"
    mode="horizontal"
    :options="menuOptions"
    responsive
  />
</template>

<script setup>
import { ref } from 'vue'
import { h } from 'vue'

const activeKey = ref(null)

const menuOptions = [
  {
    label: 'Home',
    key: 'home'
  },
  {
    label: 'About',
    key: 'about'
  },
  {
    label: 'Contact',
    key: 'contact'
  }
]
</script>

Vertical Menu with Selection

<template>
  <n-menu :options="menuOptions" @update:value="handleUpdateValue" />
</template>

<script setup>
import { h } from 'vue'

const handleUpdateValue = (key, item) => {
  console.log('Selected:', key, item)
}

const menuOptions = [
  {
    label: 'Dashboard',
    key: 'dashboard'
  },
  {
    label: 'Settings',
    key: 'settings',
    children: [
      { label: 'Profile', key: 'profile' },
      { label: 'Security', key: 'security' }
    ]
  }
]
</script>

Common Patterns

Collapsible Sidebar Menu

<template>
  <n-space vertical>
    <n-switch v-model:value="collapsed" />
    <n-layout has-sider>
      <n-layout-sider
        bordered
        collapse-mode="width"
        :collapsed-width="64"
        :width="240"
        :collapsed="collapsed"
        show-trigger
        @collapse="collapsed = true"
        @expand="collapsed = false"
      >
        <n-menu
          :collapsed="collapsed"
          :collapsed-width="64"
          :collapsed-icon-size="22"
          :options="menuOptions"
        />
      </n-layout-sider>
      <n-layout>
        <span>Content</span>
      </n-layout>
    </n-layout>
  </n-space>
</template>

<script setup>
import { ref } from 'vue'

const collapsed = ref(false)
const menuOptions = [...]
</script>

Menu with Icons

<template>
  <n-menu
    :options="menuOptions"
    :render-icon="renderMenuIcon"
  />
</template>

<script setup>
import { h } from 'vue'
import { HomeOutline, SettingsOutline } from '@vicons/ionicons5'

const renderMenuIcon = (option) => {
  if (option.key === 'home') return h(HomeOutline)
  if (option.key === 'settings') return h(SettingsOutline)
  return null
}

const menuOptions = [
  { label: 'Home', key: 'home' },
  { label: 'Settings', key: 'settings' }
]
</script>

Menu with Vue Router

<template>
  <n-menu :options="menuOptions" />
</template>

<script setup>
import { h } from 'vue'
import { RouterLink } from 'vue-router'

const menuOptions = [
  {
    label: () => h(RouterLink, { to: '/' }, { default: () => 'Home' }),
    key: 'home'
  },
  {
    label: () => h(RouterLink, { to: '/about' }, { default: () => 'About' }),
    key: 'about'
  }
]
</script>

Accordion Mode

<template>
  <n-menu
    :options="menuOptions"
    :default-expanded-keys="defaultExpandedKeys"
    accordion
  />
</template>

Inverted Style

<template>
  <n-layout has-sider>
    <n-layout-sider bordered inverted>
      <n-menu inverted :options="menuOptions" />
    </n-layout-sider>
    <n-layout>
      Content
    </n-layout>
  </n-layout>
</template>

Control Option Visibility

<template>
  <n-menu :options="filteredOptions" />
</template>

<script setup>
import { computed } from 'vue'

const isAdmin = ref(false)

const menuOptions = [
  { label: 'Dashboard', key: 'dashboard', show: true },
  { label: 'Admin', key: 'admin', show: isAdmin.value },
  { label: 'Settings', key: 'settings', show: true }
]

const filteredOptions = computed(() => 
  menuOptions.filter(item => item.show !== false)
)
</script>

Best Practices

1. Use with Layout: Combine with n-layout-sider for sidebar navigation

2. Router integration: Render labels as RouterLink for SPA navigation

3. Collapsed state: Set appropriate collapsed-width for icon-only mode

4. Custom field names: Use key-field, label-field for backend data mapping

5. Accordion for limited space: Use accordion mode to prevent menu from getting too tall

6. Responsive horizontal menu: Enable responsive for horizontal menus that may overflow