菜单 Menu

对应 Arco 的浅色 Menu，支持纵向、横向和折叠菜单。 属性用法见 Element Plus 文档。

纵向菜单

默认纵向菜单对应 Arco vertical，点击子菜单可展开选项。

<script setup lang="ts">
import { Location, Folder, Setting } from '@element-plus/icons-vue'
</script>

<template>
  <el-menu default-active="overview" style="width: 240px">
    <el-menu-item index="overview"><el-icon><Location /></el-icon><span>Overview</span></el-menu-item>
    <el-sub-menu index="projects">
      <template #title><el-icon><Folder /></el-icon><span>Projects</span></template>
      <el-menu-item index="design">Design system</el-menu-item>
      <el-menu-item index="website">Website</el-menu-item>
    </el-sub-menu>
    <el-menu-item index="settings" disabled><el-icon><Setting /></el-icon><span>Settings</span></el-menu-item>
  </el-menu>
</template>

横向菜单

mode="horizontal" 对应 Arco 横向导航，选中项显示底部主色条。

<template>
  <el-menu mode="horizontal" default-active="overview" :ellipsis="false" style="width: 100%">
    <el-menu-item index="overview">Overview</el-menu-item>
    <el-menu-item index="projects">Projects</el-menu-item>
    <el-menu-item index="settings">Settings</el-menu-item>
  </el-menu>
</template>

折叠菜单

切换 collapse 保留 Element Plus 的折叠布局，配色使用主题变量。

<script setup lang="ts">
import { ref } from 'vue'
import { Location, Setting } from '@element-plus/icons-vue'
const collapsed = ref(true)
</script>

<template>
  <div style="width: 100%">
    <el-switch v-model="collapsed" active-text="Collapsed" style="margin-bottom: 16px" />
    <el-menu :collapse="collapsed" default-active="overview" style="max-width: 240px">
      <el-menu-item index="overview"><el-icon><Location /></el-icon><template #title>Overview</template></el-menu-item>
      <el-menu-item index="settings"><el-icon><Setting /></el-icon><template #title>Settings</template></el-menu-item>
    </el-menu>
  </div>
</template>

与 Arco 的差异

• 菜单项保留 Element Plus 的键盘聚焦行为。