El Menu

Element Plus Menu Component

Menu that provides navigation for your website.

When to Invoke

Invoke this skill when:

• User needs to create a navigation menu
• User wants horizontal or vertical menu
• User needs collapsible sidebar menu
• User wants to integrate with Vue Router
• User asks about submenu or menu groups

Features

• Multiple Modes: Horizontal (top bar) and vertical (sidebar)
• Collapsible: Vertical menu can be collapsed
• Vue Router Integration: Automatic route navigation
• Submenus: Multi-level nested menus
• Menu Groups: Group related menu items
• Customizable: Colors, icons, and themes
• Accessibility: Keyboard navigation support

API Reference

Menu Attributes

| Name | Description | Type | Default | |------|-------------|------|---------| | mode | menu display mode | 'horizontal' \| 'vertical' | vertical | | collapse | whether the menu is collapsed (only vertical mode) | boolean | false | | ellipsis | whether the menu is ellipsis (only horizontal mode) | boolean | true | | ellipsis-icon | custom ellipsis icon (only horizontal mode) | string \| Component | — | | popper-offset | offset of the popper | number | 6 | | default-active | index of active menu on page load | string | '' | | default-openeds | array of expanded sub-menus indexes | string[] | [] | | unique-opened | whether only one sub-menu can be active | boolean | false | | menu-trigger | how sub-menus are triggered (horizontal mode) | 'hover' \| 'click' | hover | | router | whether vue-router mode is activated | boolean | false | | collapse-transition | whether to enable collapse transition | boolean | true | | popper-effect | Tooltip theme when collapsed | 'dark' \| 'light' | dark | | close-on-click-outside | whether menu collapses when clicking outside | boolean | false | | popper-class | custom class for popup menus | string | — | | popper-style | custom style for popup menus | string \| object | — | | show-timeout | timeout before showing menu | number | 300 | | hide-timeout | timeout before hiding menu | number | 300 |

Menu Events

| Name | Description | Type | |------|-------------|------| | select | callback when menu is activated | (index, indexPath, item, routerResult) => void | | open | callback when sub-menu expands | (index, indexPath) => void | | close | callback when sub-menu collapses | (index, indexPath) => void |

Menu Slots

| Name | Description | Subtags | |------|-------------|---------| | default | customize default content | SubMenu / MenuItem / MenuItemGroup |

Menu Exposes

| Name | Description | Type | |------|-------------|------| | open | open a specific sub-menu | (index: string) => void | | close | close a specific sub-menu | (index: string) => void | | handleResize | manually trigger menu width recalculation | () => void | | updateActiveIndex | set index of active menu | (index: string) => void |

SubMenu Attributes

| Name | Description | Type | Default | |------|-------------|------|---------| | index | unique identification (required) | string | — | | popper-class | custom class for popup menu | string | — | | popper-style | custom style for popup menu | string \| object | — | | show-timeout | timeout before showing | number | — | | hide-timeout | timeout before hiding | number | — | | disabled | whether disabled | boolean | false | | teleported | whether popup is teleported | boolean | undefined | | popper-offset | offset of the popper | number | — | | expand-close-icon | icon when expanded and submenu closed | string \| Component | — | | expand-open-icon | icon when expanded and submenu open | string \| Component | — | | collapse-close-icon | icon when collapsed and submenu closed | string \| Component | — | | collapse-open-icon | icon when collapsed and submenu open | string \| Component | — |

SubMenu Slots

| Name | Description | Subtags | |------|-------------|---------| | default | customize default content | SubMenu / MenuItem / MenuItemGroup | | title | customize title content | — |

MenuItem Attributes

| Name | Description | Type | Default | |------|-------------|------|---------| | index | unique identification (required) | string | — | | route | Vue Router route parameters | string \| object | — | | disabled | whether disabled | boolean | false |

MenuItem Events

| Name | Description | Type | |------|-------------|------| | click | callback when menu-item is clicked | (item) => void |

MenuItem Slots

| Name | Description | |------|-------------| | default | customize default content | | title | customize title content |

MenuItemGroup Attributes

| Name | Description | Type | Default | |------|-------------|------|---------| | title | group title | string | — |

MenuItemGroup Slots

| Name | Description | Subtags | |------|-------------|---------| | default | customize default content | MenuItem | | title | customize group title | — |

Usage Examples

Top Bar (Horizontal)

  
    Processing Center
    
      Workspace
      Item One
      Item Two
      Item Three
    
    Info
    Orders
  

import { ref } from 'vue'

const activeIndex = ref('1')

const handleSelect = (key, keyPath) => {
  console.log(key, keyPath)
}

Left And Right Alignment

  
    Left Item
    Left Item
    
    Right Item
    Right Item
  

Sidebar (Vertical)

  
    
      
      Navigator One
    
    
      
      Navigator Two
    
    
      
      Navigator Three
    
  

import { ref } from 'vue'
import { Location, Document, Setting } from '@element-plus/icons-vue'

const activeIndex = ref('1')

.el-menu-vertical {
  width: 200px;
  min-height: 400px;
}

Collapsible Sidebar

  
    Expand
    Collapse
  
  
  
    
      
      Home
    
    
      
        
        Documents
      
      Recent
      Starred
    
    
      
      Settings
    
  

import { ref } from 'vue'
import { HomeFilled, Document, Setting } from '@element-plus/icons-vue'

const isCollapse = ref(false)
const activeIndex = ref('1')

.el-menu-vertical:not(.el-menu--collapse) {
  width: 200px;
}

With Vue Router

  
    
      
      Dashboard
    
    
      
      Users
    
    
      
      Settings
    
  

Menu Groups

  
    
      Option 1
      Option 2
    
    
      Option 3
      Option 4
    
  

Common Issues

1. Menu Not Updating Active State

Use updateActiveIndex method:

const menuRef = ref()

const updateActive = (index) => {
  menuRef.value?.updateActiveIndex(index)
}

2. Router Navigation Not Working

Ensure router prop is set and index matches route path:

  Dashboard

3. Custom Height in Horizontal Mode

Override CSS variable:

.el-menu--horizontal {
  --el-menu-horizontal-height: 80px;
}

Best Practices

1. Use router mode: Integrate with Vue Router for SPA navigation
2. Consistent icons: Use icons consistently across menu items
3. Group related items: Use MenuItemGroup for organization
4. Collapse for mobile: Use collapse mode for responsive design
5. Unique indexes: Ensure each menu item has a unique index

Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

• Author: jiaiyan
• Source: jiaiyan/element-plus-skills
• License: MIT
• Homepage: https://skills.sh/jiaiyan/element-plus-skills/element-plus-skills

Install and usage instructions live in the source repository linked above.