skills.rest
jiaiyan
jiaiyanCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

el-menu

Render Element Plus navigation menus with Vue Router integration.

21|2|Updated Mar 13, 2026
Search Tags:#vue#navigation#router#submenu#element-plus#ui-component#el-menu
One-click install
npx skills add https://github.com/jiaiyan/element-plus-skills --skill el-menu
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: el-menu
Source: https://github.com/jiaiyan/element-plus-skills/tree/main/components/el-menu
Command: npx skills add https://github.com/jiaiyan/element-plus-skills --skill el-menu

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill simplifies the creation and configuration of navigation menus for Vue/ Element Plus based applications, enabling consistent, accessible, and router-aware menus without boilerplate.

Core Features & Use Cases

  • Multiple modes: horizontal and vertical layouts with responsive behavior
  • Submenus and groups: nested structures with support for grouping
  • Router integration: seamless Vue Router navigation with router mode
  • Accessibility: keyboard navigation and ARIA-compliant structures
  • Customization: theming, icons, and collapse behavior for mobile

Quick Start

Create an el-menu instance in a Vue component with mode="horizontal" and add a few el-menu-item elements to form a top navigation bar.

Frequently Asked Questions about el-menu

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I build a navigation menu in Vue with Element Plus?▼

To build a Vue navigation menu, use Element Plus components like el-menu and el-menu-item to configure layouts, add submenus, and integrate Vue Router without boilerplate.

Does Element Plus support collapsible vertical sidebars for Vue SPAs?▼

Yes, Element Plus supports collapsible vertical sidebars for Vue SPAs. You can configure the collapse behavior on the el-menu component to create responsive layouts for mobile and desktop.

How do I integrate Vue Router into an Element Plus navigation menu?▼

Vue Router integrates into an Element Plus navigation menu using the router mode. This enables seamless SPA navigation by mapping menu items directly to your application's routes.

What is the best way to structure nested submenus and groups in a Vue navigation bar?▼

The best way to structure nested submenus and groups in a Vue navigation bar is using Element Plus submenu grouping and slots, which support complex nested structures with ARIA-compliant accessibility.

Can I customize the theme and icons of an Element Plus menu component?▼

Yes, you can customize the theme and icons of an Element Plus menu component. The framework supports theming and icon integration to match your application's design system.

How do I handle select, open, and close events in a Vue navigation menu?▼

You handle select, open, and close events in a Vue navigation menu by binding event hooks provided by the Element Plus el-menu component to execute custom logic during user interactions.

Related Skills

Explore More Software Engineering Skills→
partme-aipartme-ai
610

element-plus-vue3

Guide Element Plus Vue 3 component installation, theming, and API usage.

Official
Intermediate
VIDLGVIDLG
4

webf-routing-setup

Configure hybrid routing for WebF apps with @openwebf/react-router or @openwebf/vue-router.

Official
Intermediate
PaldomPaldom
1

using-streamlit-layouts

Structure Streamlit application layouts with sidebars, columns, containers, tabs, and expanders.

Community
Intermediate
DexploarerDexploarer
6

a11y-annotation-generator

Add ARIA labels, roles, and alt text to HTML, JSX, and Vue templates.

Community
Intermediate