Menu

Matches Arco's light Menu with vertical, horizontal and collapsed layouts. See the Element Plus docs for props.

Vertical Menu

The default layout matches Arco vertical; click a submenu to expand its options.

<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>

Horizontal Menu

Horizontal mode matches Arco navigation with a primary underline for the active item.

<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>

Collapsed Menu

Toggle collapse to use the Element Plus collapsed layout with themed colors.

<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>

Differences from Arco

• Menu items retain Element Plus keyboard focus behavior.