## 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. Menu provides `background-color`, `text-color` and `active-text-color` to customize the colors. ```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

Default colors

item one item one item three item one Navigator Two Navigator Three

Custom colors

item one item one item three item one Navigator Two Navigator Three ``` ::: ### Collapse Vertical NavMenu could be collapsed. ::: demo ```html expand collapse Group One item one item two item three item four item one Navigator Two Navigator Three ``` ::: ### Menu Attribute | Attribute | Description | Type | Accepted Values | Default | |---------- |-------- |---------- |------------- |-------- | | mode | menu display mode | string | horizontal / vertical | vertical | | collapse | whether the menu is collapsed (available only in vertical mode) | boolean | — | false | | background-color | background color of Menu (hex format) | string | — | #ffffff | | text-color | text color of Menu (hex format) | string | — | #2d2f33 | | active-text-color | text color of currently active menu item (hex format) | string | — | #409EFF | | 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 Methods | Event Name | Description | Parameters | |---------- |-------- |---------- | | open | open a specific sub-menu | index: index of the sub-menu to open | | close | close a specific sub-menu | index: index of the sub-menu to close | ### 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 | ### Menu-Item Events | Event Name | Description | Parameters | |---------- |-------- |---------- | | click | callback function when menu-item is clicked | el: menu-item instance | ### 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 | — | — |