Crear una barra de navegación inferior que permanezca siempre visible mientras el usuario se desplaza por la página es una técnica fundamental en el diseño móvil. En esta práctica se construye una tab bar completamente funcional usando Tailwind CSS, íconos SVG y navegación por anclas con IDs, logrando una experiencia de usuario fluida y profesional.
¿Qué es una tab bar y por qué es clave en diseño móvil?
La tab bar es una barra de navegación fija en la parte inferior de la pantalla que permite moverse entre las distintas secciones de una landing page. A diferencia del navbar superior, la tab bar está pensada específicamente para dispositivos móviles, donde el pulgar del usuario alcanza cómodamente la zona inferior [0:06].
En el diseño trabajado en Figma, la tab bar incluye cinco íconos principales:
- Home: dirige a la sección principal.
- Búsqueda (explorar): lleva a la sección de rentas destacadas.
- Corazón (recomendaciones): redirige a la sección de recomendados.
- Luna: reservado para activar el dark mode en una etapa posterior.
- Usuario: sección de perfil que queda como reto para desarrollar de forma independiente.
¿Cómo se estructura la tab bar en el HTML?
El primer paso consiste en ubicar correctamente la tab bar dentro del documento. Aunque inicialmente se colocó junto al navbar en la parte superior, lo correcto es moverla debajo del footer para que la posición fija funcione sin conflictos [2:08].
Cada ícono se envuelve dentro de una etiqueta <a> con un atributo href que apunta al ID de la sección correspondiente. Esto permite la navegación interna mediante anclas, usando el símbolo # seguido del nombre del ID [3:17].
html
<a href="#home">
<!-- SVG del ícono de home -->
</a>
<a href="#recomendados">
<!-- SVG del ícono de búsqueda -->
</a>
Para el botón de dark mode, en lugar de un <a>, se utiliza un elemento <button> porque no redirige a ninguna sección sino que ejecutará funcionalidad JavaScript más adelante [7:52].
¿Qué estilos de Tailwind se aplican a la tab bar?
Las clases de Tailwind configuran la barra como un contenedor fijo y visible en todo momento [3:50]:
fixed: posiciona la barra de forma fija en la ventana.left-0 y bottom-0: la ancla en la esquina inferior izquierda.w-full: ocupa todo el ancho disponible.h-16: define una altura compacta.shadow-md: agrega sombra para separar visualmente la barra del contenido.bg-white: fondo blanco para la versión clara.
¿Cómo se organizan los íconos con Flexbox?
Para distribuir los íconos de manera uniforme se aplican propiedades de Flexbox directamente con clases de Tailwind [6:03]:
flex: activa el modelo de caja flexible.items-center: centra los elementos verticalmente.justify-center: centra los elementos horizontalmente.space-x-4: establece un espaciado horizontal uniforme entre cada ícono.
Esta combinación garantiza que, sin importar cuántos íconos se agreguen, todos mantengan la misma separación y alineación.
¿Cómo cambiar el color de un ícono SVG con Tailwind?
Uno de los puntos más importantes es la técnica para modificar el color de los SVG directamente con Tailwind. A diferencia de las imágenes convencionales, los SVG permiten manipular su color mediante la propiedad fill [5:08].
Dentro del elemento <path> del SVG se agrega una clase con dos utilidades:
fill-current: indica que el SVG debe tomar el color del texto actual.text-gray-200: define el color deseado.
html
<path class="fill-current text-gray-200" d="..." />
Para simular un ícono activo o seleccionado, se cambia la clase de color a text-primary, lo que visualmente indica al usuario en qué sección se encuentra [6:24].
El tamaño de cada ícono se controla ajustando los atributos width y height del SVG, estableciéndolos en un valor de treinta para mantener proporción dentro de la barra [4:50].
¿Cómo funciona la navegación por IDs?
La navegación entre secciones se logra asignando un atributo id a cada <div> o sección del HTML y referenciándolo en el href de los enlaces de la tab bar. Al hacer clic, el navegador desplaza la vista automáticamente hasta ese punto [9:17].
Es fundamental que el nombre del ID en el href coincida exactamente con el definido en la sección. En la práctica, un error de nomenclatura entre "destacadas" y "recomendados" causó que el enlace no funcionara hasta corregir la referencia [9:30].
Con todos los íconos configurados y los IDs correctamente vinculados, la tab bar queda completamente operativa: permanece visible durante el scroll gracias a su posición fija y cada botón redirige a la sección correspondiente. El ícono de la luna permanece inactivo por ahora, ya que controlará el dark mode en una fase posterior del proyecto. ¿Te animas a construir la pantalla de usuario como reto adicional? Comparte tu solución en los comentarios.
