## NavMenu Menú que provee la navegación para tu sitio. ### Top bar Top bar NavMenu puede ser usado en distinto escenarios. :::**Demo** Por defecto el menú es vertical, pero puedes hacerlo horizontal asignando a la propiedad `mode` el valor 'horizontal'. Además, puedes utilizar el componente de submenú para crear un menú de segundo nivel. Menú provee `background-color`, `text-color` y `active-text-color` para customizar los colores. ```html Processing Center item one item two item three Orders
Processing Center item one item two item three Orders ``` ::: ### Side bar NavMenu vertical con sub-menús. :::**Demo** Puedes utilizar el componente el-menu-item-group para crear un grupo de menú, y el nombre del grupo estará determinado por la propiedad `title` o la propiedad `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 NavMenu vertical puede ser colapsado. :::**Demo** ```html expand collapse Group One item one item two item three item four item one Navigator Two Navigator Three ``` ::: ### Atributos Menu | Atributo | Descripción | Tipo | Valores aceptados | Valores por defecto | |---------- |-------- |---------- |------------- |-------- | | mode | modo de presentación del menú | string | horizontal / vertical | vertical | | collapse | si el menú está colapsado (solo en modo vertical) | boolean | — | false | | background-color | color de fondo del menú (formato hexadecimal) | string | — | #ffffff | | text-color | color de texto del menú (formato hexadecimal) | string | — | #2d2f33 | | active-text-color | color de text del menu-item activo (formato hexadecimal) | string | — | #409EFF | | default-active | índice del menu-item activo | string | — | — | | default-openeds | arreglo que contiene las llaves del sub-menus activo | Array | — | — | | unique-opened | whether only one sub-menu can be active | boolean | — | false | | menu-trigger | como dispara eventos sub-menus, solo funciona cuando `mode` es 'horizontal' | string | — | hover | | router | si el modo `vue-router` está activado. Si es verdader, índice será usado como 'path' para activar la ruta | boolean | — | false | ### Métodos Menu | Nombre de evento | Descripción | Parámetros | |---------- |-------- |---------- | | open | abre un sub-menu específico | index: índice del sub-menu para abrir | | close | cierra un sub-menu específico | index: índice del sub-menu para cerrar | ### Eventos Menu | Nombre de evento | Descripción | Parámetros | |---------- |-------- |---------- | | select | callback ejecutado cuando el menú es activado | index: índice del menú activado, indexPath: index path del menú activado | | open | callback ejecutado cuando sub-menu se expande | index: índice del sub-menu expandido, indexPath: index path del sub-menu expandido | | close | callback ejecutado cuando sub-menu colapsa | index: índice del sub-menu colapsado, indexPath: index path del menú colapsado | ### Eventos Menu-Item | Nombre de evento | Descripción | Parámetros | |---------- |-------- |---------- | | click | callback ejecutado cuando se hace click sobre menu-item | el: instancia de menu-item | ### Atributos SubMenu | Atributo | Descripción | Tipo | Valores aceptados | Valores por defecto | |---------- |-------- |---------- |------------- |-------- | | index | identificador único | string | — | — | ### Atributos Menu-Item | Atributo | Descripción | Tipo | Valores aceptados | Valores por defecto | |---------- |-------- |---------- |------------- |-------- | | index | identificador único | string | — | — | | route | Object Vue Router | object | — | — | ### Atributos Menu-Group | Atributo | Descripción | Tipo | Valores aceptados | Valores por defecto | |---------- |-------- |---------- |------------- |-------- | | title | título del grupo | string | — | — |