--- title: "Clean TabBar: una navegación text-only, sutil y elegante" description: "Entre los tres layouts de lanzamiento de la nueva generación de TabBar, Clean TabBar es el que expresa con mayor claridad una búsqueda de sobriedad y precisión." canonical_url: "https://es.goodbarber.com/blog/clean-tabbar-una-navegacion-text-only-sutil-y-elegante-a1058/" lang: es date: 2026-06-01 last_updated: 2026-06-01 --- # Clean TabBar: una navegación text-only, sutil y elegante [Atrás](/blog/make-it-r8/) # Clean TabBar: una navegación text-only, sutil y elegante Escrito por [Lesia PIETRI](https://es.goodbarber.com/blog/author/lesia-pietri/) el Lunes 1 Junio 2026 ## Clean TabBar está pensada para las apps que buscan una navegación más discreta, más elegante y más editorial. Con su enfoque text-only, la ausencia de fondo en el estado activo y sus distintos indicadores de selección, este layout propone una lectura especialmente cuidada y refinada de la navegación. ![](https://cmsphoto.ww-cdn.com/superstatic/81328/art/grande/96799482-67473833.jpg?v=1780302633.1927419) Entre los tres layouts de lanzamiento de la *nueva generación de TabBar*, **Clean TabBar** es el que expresa con mayor claridad una búsqueda de sobriedad y precisión. Aquí, la navegación no se apoya ni en iconos muy demostrativos, ni en un fondo marcado para señalar el estado activo. Se basa en una escritura más discreta, más textual, más elegante. Es un layout que da a la tabBar un lugar muy legible en la interfaz, conservando al mismo tiempo una presencia mesurada. Clean TabBar funciona especialmente bien en las apps que quieren dejar más espacio al contenido, al ritmo de la página y a la calidad global de la composición. ## Una navegación text-only, clara a primera vista ![](https://cmsphoto.ww-cdn.com/superstatic/81328/art/grande/96799482-67473834.jpg?v=1780302634.8447392) El principio de Clean TabBar es simple: **la navegación se expresa ante todo a través del texto**. Las etiquetas se convierten en los principales puntos de referencia. Este enfoque da inmediatamente a la tabBar una tonalidad más editorial, más serena, casi más calmada. La navegación parece menos cargada, más directa, y a menudo más natural en las interfaces donde el contenido, la maquetación y la tipografía ocupan ya un lugar importante. Esta elección también cambia el ritmo visual de la pantalla. La barra de navegación se vuelve más ligera en su construcción, sin perder legibilidad. Acompaña a la interfaz con discreción, pero sigue siendo perfectamente identificable. ## Un estado seleccionado expresado con finura ![](https://cmsphoto.ww-cdn.com/superstatic/81328/art/grande/96799482-67473835.jpg?v=1780302636.4447367) En Clean TabBar, el estado activo no se marca con un fondo aplicado al texto o al icono. Se expresa de manera más sutil, gracias a un **indicador de selección**. El componente permite aquí jugar con varios estilos de indicadores: - **Dot** - **Tiny** - **Line** Esta variedad es especialmente interesante, porque permite ajustar de forma muy fina el nivel de acento dado al item activo. Según el universo gráfico de la app, la selección puede mantenerse muy discreta o, al contrario, ser un poco más afirmada, conservando siempre la elegancia propia del layout. Es uno de los puntos fuertes de Clean TabBar: demuestra que es posible tener una navegación muy legible sin recurrir a efectos visuales demasiado marcados. ## Animaciones al servicio de la discreción [blog_post_clean_tabbar_bloc3](https://player.vimeo.com/video/1197268406?badge=0&autopause=0&player_id=0&app_id=58479&autoplay=1&muted=1&loop=1) Como los demás layouts de esta nueva generación de TabBar, Clean TabBar se beneficia de animaciones de selección que se adaptan al estilo elegido. Aquí, estas animaciones cobran todo su sentido, precisamente porque la navegación se apoya en signos más sutiles. El movimiento acompaña así la selección con precisión, sin sobreactuar el efecto. Refuerza la legibilidad del cambio de estado y prolonga la sensación de finura que aporta el layout. Esta coherencia entre diseño, indicador de selección y animación contribuye en gran medida a la calidad percibida del componente. Los efectos hápticos participan también en esta calidad de ejecución, aportando una respuesta táctil discreta y coherente con la elegancia del layout. ## Un menú "More" en la misma lógica de simplicidad ![](https://cmsphoto.ww-cdn.com/superstatic/81328/art/grande/96799482-67473837.jpg?v=1780302645.9047225) El **menú "More"** de Clean TabBar, para el acceso a las pestañas ocultas, prolonga esa misma búsqueda de sobriedad. También privilegia una presentación sencilla, muy legible, con una jerarquía visual clara y un diseño depurado. Se mantiene en la continuidad del layout, sin introducir ninguna ruptura de estilo con la barra principal. Tanto en móvil como en escritorio, esta continuidad funciona especialmente bien. El menú "More" conserva la misma contención, la misma claridad y la misma calidad de presentación que la navegación en sí. Permite abrir la arborescencia sin sobrecargar la experiencia, lo que encaja perfectamente con el espíritu del layout. ## Una navegación discreta, pero muy trabajada Clean TabBar demuestra que una navegación puede ser a la vez muy simple en su apariencia y muy trabajada en su concepción. Con su enfoque text-only, sus indicadores de selección, la ausencia de fondo en el estado activo y su menú "More" en continuidad con el layout, propone una lectura especialmente elegante de la navegación móvil. Para las apps que buscan una navegación más editorial, más sobria y más refinada, **Clean TabBar** constituye una base especialmente sólida. ![Lesia PIETRI](https://blog.goodbarber.com/_public/profile/e1/e1822db470e60d090affd0956d743cb0e7cdf113-default.jpg) Sobre el autor[Lesia PIETRI](https://es.goodbarber.com/blog/author/lesia-pietri/)Head of Product Design Soy Head of Product Design en GoodBarber. Dirijo el diseño del producto: el design system sobre el que se construyen todas las apps, los layouts que sirven de punto de partida y el recorrido que va de una idea a una app publicada. Mi trabajo es que alguien que nunca ha abierto una herramienta de diseño publique igualmente una app cuidada, pantalla tras pantalla. Diseñador de corazón, dedico mis días a los detalles que nadie nombra: los espaciados, los contrastes, el peso de un título. Escribo aquí sobre el diseño de GoodBarber y sobre las novedades del producto: las funcionalidades, los layouts y los temas. [Leer más](https://es.goodbarber.com/blog/author/lesia-pietri/) [![LinkedIn](https://portal.ww-cdn.com/portal_static/svg/base2021/linkedin.3ed8162e2a2b.svg)](https://www.linkedin.com/in/lesia-pietri-150824116/)