element导航菜单

Element UI是一个基于Vue.js的UI组件库，其中包含了许多现成的UI组件，其中就包括导航菜单（Navigation Menu）组件。下面是一个简单的Element导航菜单的代码示例：

<template>
  <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
    <el-menu-item index="1">导航一</el-menu-item>
    <el-menu-item index="2">导航二</el-menu-item>
    <el-menu-item index="3">导航三</el-menu-item>
    <el-submenu index="4">
      <template slot="title">导航四</template>
      <el-menu-item index="4-1">选项1</el-menu-item>
      <el-menu-item index="4-2">选项2</el-menu-item>
      <el-menu-item index="4-3">选项3</el-menu-item>
    </el-submenu>
  </el-menu>
</template>

<script>
export default {
  data() {
    return {
      activeIndex: '1'
    }
  },
  methods: {
    handleSelect(index) {
      this.activeIndex = index;
    }
  }
}
</script>

在这个示例中，我们使用了`el-menu`组件来创建一个水平导航菜单，并通过`default-active`属性设置默认选中的菜单项。`el-menu`组件中的每个子组件都是一个菜单项，可以使用`el-menu-item`组件来创建。此外，如果需要创建一个包含子菜单的菜单项，可以使用`el-submenu`组件。

通过上述代码示例，你可以了解到如何使用Element UI来创建导航菜单。当然，实际使用时，你还可以根据自己的需求进行自定义配置。