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