## NavMenu Menu that provides navigation for your website. ### Top bar Top bar NavMenu can be used in a variety of scenarios. ::: demo ```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 ```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 | — | — |