<el-menu>
. 1, router attribute, if the router using the menu-item index attribute corresponding router in the path attribute
2, mode, the pull-down menu mode is divided into horizontal and vertical modes
3, background-color, background-color property as the whole background color drop-down menu
4, text-color, text-color drop-down menu text color
5, active-text-color is the color of the selected menu
<El-menu> Labels may el-submenu and el-menu-item labels composition
demo
<el-menu :router="true" mode="horizontal" background-color="#1c213f" text-color="#fff">
<el-submenu index="1">
<template slot="title">
<i class="el-icon-menu"></i>
</template>
<el-menu-item index="1-1">选项一</el-menu-item>
<el-submenu index="2">
<template slot="title">选项二</template>
<el-menu-item index="2-1">选项二-一</el-menu-item>
</el-submenu>
</el-menu>
| parameter | Explanation | Types of | Optional value | Defaults |
|---|---|---|---|---|
| mode | mode | string | horizontal / vertical | vertical |
| collapse | Folded away menu is level (vertical mode is available when only) | boolean | — | false |
| background-color | The background color of the menu (only supports hex format) | string | — | #ffffff |
| text-color | Text color menu (only supports hex format) | string | — | #303133 |
| active-text-color | Currently active menu text color (only supports hex format) | string | — | #409EFF |
| default-active | The index currently active menu | string | — | — |
| default-openeds | Array index of the currently open sub-menu of | Array | — | — |
| unique-opened | If only to maintain a sub-menu of expansion | boolean | — | false |
| menu-trigger | Open sub-menu trigger mode (only available when mode is horizontal) | string | hover / click | hover |
| router | Whether vue-router mode to enable this mode is activated when the index as a path to route navigation Jump | boolean | — | false |
| collapse-transition | Whether to open the folding animation | boolean | — | true |