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.

⬛ Link a Figma

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:

• 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.

Mobile

Tanto el menú de navegación principal como los items del sidebar se unen en el menú de navegación móvil, donde muestra la hamburguesa.

⬛ Link a Figma

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 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ú.

Vea también las consideraciones de tipografía y color.

⬛ Link a Figma

Breadcrumbs

El componente de breadcrumbs (también conocido como migas de pan) es un patrón de navegación secundario que muestra la jerarquía entre el contenido o rastrea la ruta de un usuario. Las migas de pan permiten a los usuarios moverse rápidamente a un nivel principal o paso anterior. Se debe poder hacer clic en todos los enlaces de una ruta de exploración.

Las migas de pan son muy efectivas en productos y experiencias que tienen una gran cantidad de contenido organizado en una jerarquía de más de dos niveles. También son altamente efectivos en flujos que contienen múltiples pasos, operando de manera similar a un indicador de progreso. Las migas de pan siempre se tratan como secundarias y nunca deben reemplazar por completo la navegación primaria.

Consideraciones de accesibilidad

• Los breadcrumbs deben permanecer en el mismo orden y ubicación en cada página web.

• El texto del enlace debe ser claro, reflejar la ubicación de la ruta de navegación de forma precisa y fácil de entender para todos los usuarios.

• El enlace al elemento de página actual en los breadcrumbs debe tener el atributo aria-label. Si la página actual no es un enlace, el aria-label es opcional.

Vea también las consideraciones de tipografía y color.

⬛ Link a Figma

CSS:

font-family: Nunito;
font-style: normal;
font-weight: normal;
font-size: 9px;
color: #9E9E9E;

:hover
color: #2C2C2C;
text-decoration: underline;