How to use element navmenu navigation menu

Time:2021-2-21

Components – navigation menu

Top bar

<el-menu :default-active="activeIndex" mode="horizontal" @select="handleSelect">
 < El menu item index = "1" > processing center < / El menu item >
 <el-submenu index="2">
  < template slot = "title" > My workbench < / template >
  < El menu item index = "2-1" > option 1 < / El menu item >
  < El menu item index = "2-2" > option 2 < / El menu item >
  < El menu item index = "2-3" > option 3 < / El menu item >
  <el-submenu index="2-4">
   < template slot = "title" > option 4 < / template >
   < El menu item index = "2-4-1" > option 1 < / El menu item >
   < El menu item index = "2-4-2" > option 2 < / El menu item >
   < El menu item index = "2-4-3" > option 3 < / El menu item >
  </el-submenu>
 </el-submenu>
 < El menu item index = "3" disabled > message center < / El menu item >
 <el-menu-item index="4"><a href=" https://www.ele.me " target="_ Blank "> order management < / a > < / El menu item >
</el-menu>
<div></div>
<el-menu
 :default-active="activeIndex2"

 mode="horizontal"
 @select="handleSelect"
 background-color="#545c64"
 text-color="#fff"
 active-text-color="#ffd04b">
 < El menu item index = "1" > processing center < / El menu item >
 <el-submenu index="2">
  < template slot = "title" > My workbench < / template >
  < El menu item index = "2-1" > option 1 < / El menu item >
  < El menu item index = "2-2" > option 2 < / El menu item >
  < El menu item index = "2-3" > option 3 < / El menu item >
  <el-submenu index="2-4">
   < template slot = "title" > option 4 < / template >
   < El menu item index = "2-4-1" > option 1 < / El menu item >
   < El menu item index = "2-4-2" > option 2 < / El menu item >
   < El menu item index = "2-4-3" > option 3 < / El menu item >
  </el-submenu>
 </el-submenu>
 < El menu item index = "3" disabled > message center < / El menu item >
 <el-menu-item index="4"><a href=" https://www.ele.me " target="_ Blank "> order management < / a > < / El menu item >
</el-menu>

<script>
 export default {
  data() {
   return {
    activeIndex: '1',
    activeIndex2: '1'
   };
  },
  methods: {
   handleSelect(key, keyPath) {
    console.log(key, keyPath);
   }
  }
 }
</script>

Sidebar

<el-row>
 <el-col :span="12">
  < H5 > default color < / H5 >
  <el-menu
   default-active="2"
  
   @open="handleOpen"
   @close="handleClose">
   <el-submenu index="1">
    <template slot="title">
     <i></i>
     <span>Navigation 1</span>
    </template>
    <el-menu-item-group>
     < template slot = "title" > group one < / template >
     < El menu item index = "1-1" > option 1 < / El menu item >
     < El menu item index = "1-2" > option 2 < / El menu item >
    </el-menu-item-group>
    < El menu item group title = "group 2" >
     < El menu item index = "1-3" > option 3 < / El menu item >
    </el-menu-item-group>
    <el-submenu index="1-4">
     < template slot = "title" > option 4 < / template >
     < El menu item index = "1-4-1" > option 1 < / El menu item >
    </el-submenu>
   </el-submenu>
   <el-menu-item index="2">
    <i></i>
    < span slot = "title" > navigation 2</span>
   </el-menu-item>
   <el-menu-item index="3" disabled>
    <i></i>
    < span slot = "title" > navigation 3</span>
   </el-menu-item>
   <el-menu-item index="4">
    <i></i>
    < span slot = "title" > navigation 4</span>
   </el-menu-item>
  </el-menu>
 </el-col>
 <el-col :span="12">
  < H5 > custom color < / H5 >
  <el-menu
   default-active="2"
  
   @open="handleOpen"
   @close="handleClose"
   background-color="#545c64"
   text-color="#fff"
   active-text-color="#ffd04b">
   <el-submenu index="1">
    <template slot="title">
     <i></i>
     <span>Navigation 1</span>
    </template>
    <el-menu-item-group>
     < template slot = "title" > group one < / template >
     < El menu item index = "1-1" > option 1 < / El menu item >
     < El menu item index = "1-2" > option 2 < / El menu item >
    </el-menu-item-group>
    < El menu item group title = "group 2" >
     < El menu item index = "1-3" > option 3 < / El menu item >
    </el-menu-item-group>
    <el-submenu index="1-4">
     < template slot = "title" > option 4 < / template >
     < El menu item index = "1-4-1" > option 1 < / El menu item >
    </el-submenu>
   </el-submenu>
   <el-menu-item index="2">
    <i></i>
    < span slot = "title" > navigation 2</span>
   </el-menu-item>
   <el-menu-item index="3" disabled>
    <i></i>
    < span slot = "title" > navigation 3</span>
   </el-menu-item>
   <el-menu-item index="4">
    <i></i>
    < span slot = "title" > navigation 4</span>
   </el-menu-item>
  </el-menu>
 </el-col>
</el-row>

<script>
 export default {
  methods: {
   handleOpen(key, keyPath) {
    console.log(key, keyPath);
   },
   handleClose(key, keyPath) {
    console.log(key, keyPath);
   }
  }
 }
</script>

fold

<el-radio-group v-model="isCollapse" style="margin-bottom: 20px;">
 < El radio button: label = "false" > Expand < / El radio button >
 < El radio button: label = "true" > stow < / El radio button >
</el-radio-group>
<el-menu default-active="1-4-1" @open="handleOpen" @close="handleClose" :collapse="isCollapse">
 <el-submenu index="1">
  <template slot="title">
   <i></i>
   < span slot = "title" > navigation 1</span>
  </template>
  <el-menu-item-group>
   < span slot = "title" > group one</span>
   < El menu item index = "1-1" > option 1 < / El menu item >
   < El menu item index = "1-2" > option 2 < / El menu item >
  </el-menu-item-group>
  < El menu item group title = "group 2" >
   < El menu item index = "1-3" > option 3 < / El menu item >
  </el-menu-item-group>
  <el-submenu index="1-4">
   < span slot = "title" > option 4</span>
   < El menu item index = "1-4-1" > option 1 < / El menu item >
  </el-submenu>
 </el-submenu>
 <el-menu-item index="2">
  <i></i>
  < span slot = "title" > navigation 2</span>
 </el-menu-item>
 <el-menu-item index="3" disabled>
  <i></i>
  < span slot = "title" > navigation 3</span>
 </el-menu-item>
 <el-menu-item index="4">
  <i></i>
  < span slot = "title" > navigation 4</span>
 </el-menu-item>
</el-menu>

<style>
 .el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  min-height: 400px;
 }
</style>

<script>
 export default {
  data() {
   return {
    isCollapse: true
   };
  },
  methods: {
   handleOpen(key, keyPath) {
    console.log(key, keyPath);
   },
   handleClose(key, keyPath) {
    console.log(key, keyPath);
   }
  }
 }
</script>

Menu Attribute

Menu Methods

Menu Events

SubMenu Attribute

Menu-Item Attribute

Menu-Group Attribute

Here is the article about how to use the element navmenu navigation menu. For more information about the content of the element navmenu navigation menu, please search previous articles of developer or continue to browse the following articles. I hope you can support developer more in the future!