## NavMenu Menu that provides navigation for your website. ### Top bar Top bar NavMenu can be used in a variety of scenarios. ::: demo By default Menu is vertical, but you can change it to horizontal by setting the mode prop to 'horizontal'. In addition, you can use the submenu component to create a second level menu. ```html Processing Center item one item two item three Orders

Processing Center item one item two item three Orders ``` ::: ### Side bar Vertical NavMenu with sub-menus. ::: demo You can use the el-menu-item-group component to create a menu group, and the name of the group is determined by the title prop or a named slot. ```html

With icons

item one item one item three Navigator Two Navigator Three

Without icons

item one item two item three Navigator Two Navigator Three

Groups

Navigator One Navigator Two Navigator Three Navigator Four ``` ::: ### Menu Attribute | Attribute | Description | Type | Accepted Values | Default | |---------- |-------- |---------- |------------- |-------- | | mode | menu display mode | string | horizontal/vertical | vertical | | theme | theme color | string | light/dark | light | | default-active | index of currently active menu | string | — | — | | default-openeds | array that contains keys of currently active sub-menus | Array | — | — | | unique-opened | whether only one sub-menu can be active | boolean | — | false | | menu-trigger | how sub-menus are triggered, only works when `mode` is 'horizontal' | string | — | hover | | router | whether `vue-router` mode is activated. If true, index will be used as 'path' to activate the route action | boolean | — | false | ### Menu Events | Event Name | Description | Parameters | |---------- |-------- |---------- | | select | callback function when menu is activated | index: index of activated menu, indexPath: index path of activated menu | | open | callback function when sub-menu expands | index: index of expanded sub-menu, indexPath: index path of expanded sub-menu | | close | callback function when sub-menu collapses | index: index of collapsed sub-menu, indexPath: index path of collapsed sub-menu | ### SubMenu Attribute | Attribute | Description | Type | Accepted Values | Default | |---------- |-------- |---------- |------------- |-------- | | index | unique identification | string | — | — | ### Menu-Item Attribute | Attribute | Description | Type | Accepted Values | Default | |---------- |-------- |---------- |------------- |-------- | | index | unique identification | string | — | — | | route | Vue Router object | object | — | — | ### Menu-Group Attribute | Attribute | Description | Type | Accepted Values | Default | |---------- |-------- |---------- |------------- |-------- | | title | group title | string | — | — |