Navigation Menu
Un Side Menu o menu de navegación, proporciona una navegación intuitiva con los distintos modulos del producto y acceso rápido a los contenidos principales y destinos. La barra lateral es útil si espera que un usuario cambie con frecuencia entre destinos a nivel de aplicación.
Playground
Opciones
Anatomía
La columna principal contiene los modulos. La superficie a la derecha contiene un encabezado, una lista de elementos, un footer y un divisor vertical.
1. Container
2. Header
Contiene los elementos principales, logo, avatar en el caso del menu colaborador.
3. Divider
Linea separadora.
4. Contenedor de primer nivel
Puede usarse de forma individual para representar el estado colapsado o en conjunto del contenedor de segundo nivel.
5. Caja de texto inactivo
6. Caja de texto activo
Permite al usuario saber donde se encuentra.
7. Caja de texto Hover
8. Módulo primer nivel activo
9. Módulo primer nivel hover
10. Módulo primer nivel default
11. Categoría dropdown activa
12. Categoría dropdown default
Iconos
Los iconos funcionan como indicadores de un destino. Solo se utilizan en el menu de modulos en el primer nivel y en el segundo nivel. Las opciones desplegadas por los dropdown nunca llevarán iconos.
Usos
Los “cajones” de navegación brindan acceso a los destinos y la funcionalidad de la aplicación. Pueden estar permanentemente en pantalla o controlados por un icono de menú de navegación tipo hamburguesa, ubicado en el navbar. Esta acción permite colapsar o expandir el menú.
Comportamiento e Interacción
Selección
las opciones del menú se seleccionan y se representa con un estado activo. Cuando el menu se abre por primera vez, por defecto aparecerá activa la primera sección de la lista. Solo se puede activar una celda en la barra lateral a la vez.
Agrupamiento / Dropdown
Los destinos de una misma categoría se pueden agrupar como un grupo delimitado. Un grupo delineado tiene un encabezado y la lista de destinos. El encabezado contiene el nombre del grupo y el chevrón. Tocar un encabezado abre o contrae la lista de destinos debajo del encabezado. (Para esto utilzaremos la librería de bootsrap)
