Componente TopMenu actualizado

En la versión 3.1 del UX fomo Design system publicamos el componente TopMenu actualizado con varias mejoras significativas.

Aquí tienes la lista de todas las novedades de nuestro sistema de diseño, la primera de ellas te permitirá personalizar la barra de navegación según tus necesidades.

Campo de Búsqueda

Añadimos un buscador que se puede mostrar u ocultar con una propiedad booleana llamada showSearchInput.

Utilizamos una instancia de componente Text field con casi todas sus propiedades ocultas.

De esta forma hemos conseguido un campo de búsqueda simple, con un icono Search y un placeholder que se puede editar desde el panel de propiedades del componente.

Menú para tablets y móviles

También diseñamos un botón especial llamado BurgerMenu que se utilizará únicamente en las variantes tablet y mobile del TopMenu.

Este nuevo botón tiene dos variantes: closed y opened, y posee el mismo tamaño que la variante md del componente IconButton. La diferencia es que en su interior hemos usado iconos más grandes para mejorar la accesibilidad.

Menú vertical

Creamos una nueva variante para el componente MainMenu con alineación vertical de enlaces, facilitando su uso en diseños que requieren esta disposición.

Componente ResponsiveMenu

Con todos los elementos comentados, diseñamos el ResponsiveMenu con la misma estructura que la versión desktop.

• Bloque de links (MainMenu)
• Buscador (SearchInput)
• UserMenu, frame contenedor con botones primary y tertiary editables

Tanto el campo de búsqueda como los botones Log in y Sign Up de menú de usuario se pueden mostrar u ocultar mediante propiedades booleanas.

Variables

Finalmente, preparando la siguiente versión, actualizamos la tabla de Variables añadiendo una nueva colección llamada Typography, con dos variables de font-family y font-weight.

Duplica ahora el design system y diseña con el componente TopMenu para mejorar la navegación de tus diseños.

Compartido bajo licencia Creative Commons 4.0

Sigue con atención las publicaciones, en próximas versiones de nuestro sistema de diseño habrá una actualización importante en prácticamente todas las variables.

Muchas gracias.