UI Shell
El shell de la interfaz de usuario está formado por tres componentes: el encabezado, el panel izquierdo y el panel derecho. Los tres se pueden usar de forma independiente, pero los componentes fueron diseñados para trabajar juntos.
Header
Este componente es parte de UI Shell y contempla el más alto nivel de navegación. El header se utiliza para la navegación con más jerarquía dentro del software, es recomendado tener a primera vista las acciones más necesarias, o con más prioridad para el usuario, este menu puede activar los paneles izquierdo y derecho.
El header se compone de varios elementos:
Logo o nombre del proyecto
Navegación Identificador
Logo del producto
Nombre del producto
Navegación
Links: muestra la navegación en nivel 1 (máximo 6 elementos)
Dropdown: muestra la navegación en un segundo nivel de detalle (máximo 4 elementos)
Acciones
Buscar: despliega el input de búsqueda
Notificaciones: Despliega un dropdown de notificaciones con link relacionado.
Administración: Aquí se debe desplegar todo lo que esté relacionado a la administración del software por parte del cliente.
Usuario: es donde el usuario encontrará todas las opciones que estén relacionados a las preferencias de usuario.
Sidebar
Este panel izquierdo es parte de la carcasa del UI Shell. El panel izquierdo contiene navegación secundaria y se coloca debajo del encabezado y se fija a la izquierda. Tanto los enlaces como los submenús se pueden usar en la navegación lateral y se pueden mezclar.
Use el panel izquierdo si hay más de cinco elementos de navegación secundarios, o si espera que un usuario cambie entre elementos secundarios con frecuencia. Los submenús se indican con el icono de caret down y se expanden cuando se hace clic, empujando los otros elementos hacia abajo en el panel. Para contraer el submenú, el usuario debe hacer clic nuevamente en el encabezado del menú en el panel izquierdo.
Consideraciones de accesibilidad
Las etiquetas deben ser claras y concisas.
Los títulos deben ser únicos y describir claramente el contenido de la página.
Evite nombres de opciones de menú muy largos para facilitar la comprensión y la perceptibilidad.
No use la misma palabra o frase al comienzo de un conjunto de elementos de menú.
Use una identificación única para cada elemento del menú.
Más componentes de navegación
Breadcrumbs
Counter
Los componentes Counter son utilizados como una especie de input numérico, tienen la capacidad de aumentar o reducir un valor.
Progress
Los componentes Progress son utilizados para representar avance o progreso en cualquier contexto.
Navigation
El componente Navigation permite tener acceso directo al contenido mas relevante.
Navbar
App Bar
El componente App Bar es utilizado para mostrar información y permire realizar una acción al usuario en relaión a la página actual.
Drawer
Menu
Menú de uso contextual, también puede ser usado en Drop List.
Pagination
Los controles de Paginación proporcionan acceso rápido a todas las páginas, mientras que indican que existen más páginas.
Tabs
Los componentes Tabs son utilizados para organizar el contenido y permite una navegación mas ordenada.
