UIMenu

UIMenu

A menu component for navigation and command execution.

<template>
  <UIMenu
    v-model:selectedKeys="selectedKeys"
    v-model:openKeys="openKeys"
    mode="inline"
    :items="menuItems"
    @select="handleSelect"
  >
    <template #icon-dashboard>
      <DashboardIcon />
    </template>
    <template #icon-settings>
      <SettingsIcon />
    </template>
  </UIMenu>
</template>

<script setup lang="ts">
interface MenuItem {
  key: string
  label: string
  icon?: string
  children?: MenuItem[]
  disabled?: boolean
}

const selectedKeys = ref(['dashboard'])
const openKeys = ref(['sub1'])

const menuItems: MenuItem[] = [
  {
    key: 'dashboard',
    label: 'Dashboard',
    icon: 'dashboard'
  },
  {
    key: 'sub1',
    label: 'Settings',
    icon: 'settings',
    children: [
      {
        key: 'profile',
        label: 'Profile Settings'
      },
      {
        key: 'security',
        label: 'Security Settings'
      }
    ]
  }
]

const handleSelect = ({ key, keyPath }: { key: string; keyPath: string[] }) => {
  console.log('Selected:', key, keyPath)
}
</script>

Props

• items (array): Menu items configuration
• mode (‘vertical’ | ‘horizontal’ | ‘inline’): Menu display mode
• theme (‘light’ | ‘dark’): Menu theme
• selectedKeys (string[]): Currently selected menu items
• openKeys (string[]): Currently opened submenu keys
• collapsed (boolean): Collapse inline menu
• multiple (boolean): Allow multiple selections
• inlineIndent (number): Indent of inline menu items
• disabled (boolean): Disable entire menu
• expandIcon (VNode): Custom expand icon
• triggerSubMenuAction (‘hover’ | ‘click’): How to trigger submenu
• selectable (boolean): Whether menu items are selectable

Events

• update:selectedKeys: Emitted when selection changes
• update:openKeys: Emitted when open keys change
• select: Emitted when menu item is selected
• deselect: Emitted when menu item is deselected
• click: Emitted when menu item is clicked
• openChange: Emitted when submenu open/close state changes

Slots

• default: Custom menu content
• expandIcon: Custom expand icon
• icon-[iconName]: Custom icon for menu items
• suffix-[key]: Custom suffix for menu items

MenuItem Props

• key (string): Unique identifier
• label (string): Menu item text
• icon (string): Icon name
• disabled (boolean): Disable item
• danger (boolean): Danger style
• title (string): Tooltip title
• children (array): Submenu items