--- title: "Bold TabBar: una navegación más presente, pensada para" description: "Entre los tres layouts de lanzamiento de la nueva generación de TabBar, Bold TabBar es el que asume de manera más clara su presencia en la interfaz.Aquí, la nav" canonical_url: "https://es.goodbarber.com/blog/bold-tabbar-una-navegacion-mas-presente-pensada-para-estructurar-la-interfaz-a1048/" lang: es date: 2026-05-20 last_updated: 2026-05-20 --- # Bold TabBar: una navegación más presente, pensada para estructurar la interfaz Bold TabBar está pensado para las apps que quieren una navegación visible, estructurante y plenamente integrada en su identidad visual. Con su pestaña distinta, su elemento seleccionado muy destacado y su menú "More" como prolongación directa de la tabBar, este layout otorga un verdadero papel visual a la navegación. ![](https://blog.goodbarber.com/_public/profile/e1/e1822db470e60d090affd0956d743cb0e7cdf113-default.jpg) [Lesia PIETRI](https://es.goodbarber.com/blog/author/lesia-pietri/)Head of Product Design 20 may 2026 · 4 min de lectura ![](https://cmsphoto.ww-cdn.com/superstatic/81328/art/grande/96650069-67370910.jpg?v=1779281864.958234) Entre los tres layouts de lanzamiento de la nueva generación de TabBar, **Bold TabBar** es el que asume de manera más clara su presencia en la interfaz. Aquí, la navegación no trata de pasar desapercibida. Enmarca la pantalla, establece una jerarquía visual clara y participa plenamente en el estilo de la app. Este layout es especialmente adecuado para apps con mucho contenido o con una identidad fuerte, donde la navegación debe ser visible, legible y atractiva. ## Un elemento distinto para destacar un acceso clave ![](https://cmsphoto.ww-cdn.com/superstatic/81328/art/grande/96650069-67370911.jpg?v=1779281880.2903318) Bold TabBar permite integrar un **elemento distinto**, es decir, un acceso separado visualmente del resto de la barra. Esta lógica recuerda la evolución reciente de las tab bars de Apple, donde ciertos accesos clave, en particular Search, pueden presentarse como una pestaña visualmente distinta para permanecer inmediatamente accesibles y ser más fácilmente identificables. En GoodBarber, este elemento distinto permite destacar una sección importante, un punto de entrada prioritario o un acceso particular sin saturar la lectura de la navegación principal. Visualmente, encuentra su lugar en la composición y refuerza la idea de una TabBar más expresiva. Este es un punto fuerte del layout: la navegación puede jerarquizar sus accesos de manera mucho más clara, manteniendo al mismo tiempo la coherencia. ## Una selección muy destacada ![](https://cmsphoto.ww-cdn.com/superstatic/81328/art/grande/96650069-67370912.jpg?v=1779281900.6424613) El principio de Bold TabBar es sencillo: **el elemento seleccionado se ve de inmediato**. Este énfasis se logra mediante un fondo sólido que subraya claramente la pestaña activa. El usuario localiza de un vistazo dónde se encuentra, mientras la navegación gana en impacto visual. Este tratamiento funciona especialmente bien en interfaces que buscan una jerarquía clara y una presencia gráfica más marcada. El resultado es muy directo: la TabBar no se limita a alinear iconos o etiquetas. Estructura la lectura de la pantalla y da más peso al estado activo. ## Un menú "More" que prolonga naturalmente la tabBar, tanto en móvil como en escritorio ![](https://cmsphoto.ww-cdn.com/superstatic/81328/art/grande/96650069-67370913.jpg?v=1779281916.6705632) Otra aportación importante del layout: el **menú "More"**. El menú "More" da acceso a las secciones no visibles en la TabBar, preservando al mismo tiempo una navegación clara y equilibrada. Aquí, no se parece a un panel genérico añadido junto a la navegación. Al contrario, adopta los códigos visuales de la barra y sigue sus parámetros de diseño. Formas, estilo general, nivel de presencia: el menú "More" permanece en el mismo lenguaje visual que la TabBar. En escritorio, esta lógica cobra aún más sentido. La navegación se vuelve vertical y el menú "More" se extiende en su continuidad. El conjunto da la impresión de un componente único, coherente y bien diseñado, en lugar de un conjunto de elementos separados. Esta continuidad se aprecia especialmente al abrir el menú "More", con una animación que acompaña naturalmente la retracción de la tabBar y prolonga el movimiento del componente. [blog_post_bold_tabBar_bloc5-video](https://player.vimeo.com/video/1193981298?badge=0&autopause=0&player_id=0&app_id=58479&autoplay=1&muted=1&loop=1) ## Efectos y animaciones [blog_post_bold_tabBar_bloc6-video](https://player.vimeo.com/video/1193981301?badge=0&autopause=0&player_id=0&app_id=58479&autoplay=1&muted=1&loop=1) Bold TabBar no se basa únicamente en su estructura visual. También destaca por la calidad de sus efectos y animaciones. Cuando el elemento seleccionado utiliza un color de fondo, la transición gana en riqueza con una animación de selección muy fluida, que acompaña el desplazamiento del estado activo y refuerza la legibilidad de la navegación. A esto se suman los efectos hápticos, que dan más consistencia a las interacciones y contribuyen a esa impresión de componente premium, reactivo y cuidado. ## Un layout pensado para las apps que quieren asumir su navegación Bold TabBar está pensado para las apps que quieren hacer de la navegación un elemento fuerte de su interfaz. Apps de marca, universos editoriales, proyectos lifestyle, apps de eventos, ciertos contextos de e-commerce o premium: en todos los casos donde la navegación debe participar activamente en la identidad del producto, este layout ofrece una respuesta clara. Más presente, más estructurante y más expresiva, Bold TabBar permite establecer un marco visual sólido, valorizar mejor el estado activo, integrar con naturalidad una pestaña distinta y prolongar la calidad del componente hasta el menú "More" y las animaciones. Para las apps que quieren una navegación visible, coherente y bien diseñada, esta es una base especialmente sólida. ![](https://blog.goodbarber.com/_public/profile/e1/e1822db470e60d090affd0956d743cb0e7cdf113-default.jpg) Sobre el autor 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. [Más de Lesia](https://es.goodbarber.com/blog/author/lesia-pietri/)[LinkedIn](https://www.linkedin.com/in/lesia-pietri-150824116/)