--- title: "Item: el elemento que da forma a cada pestaña de tu app" description: "El Item compone cada pestaña de la navegación de tu app: icono, etiqueta e indicador. Descubre cómo lo diseñamos." canonical_url: "https://es.goodbarber.com/blog/item-el-elemento-que-da-forma-a-cada-pestana-de-tu-app-a1152/" lang: es date: 2026-09-24 last_updated: 2026-09-24 --- # Item: el elemento que da forma a cada pestaña de tu app Cada pestaña de la navegación de tu app se apoya en un mismo elemento: el Item, que puede reunir un icono, una etiqueta y un indicador. Lo diseñamos para dar forma a nuestras TabBar de hoy y de mañana. Ya está documentado en el Design System de GoodBarber. ![](https://blog.goodbarber.com/_public/profile/21/212215c51625b9eaa5ea86f45bb46da875792630-default.jpg) [Marie-Pierre Jeffard](https://es.goodbarber.com/blog/author/marie-pierre-jeffard/)UI Designer 24 sept 2026 · 3 min de lectura ![](https://cmsphoto.ww-cdn.com/superstatic/81328/art/grande/98137933-68342877.jpg?v=1790245599.3847604) Tus contenidos están cuidados, tus colores elegidos. Queda la barra de navegación, la que usan tus usuarios para pasar de una sección a otra y que pesa mucho en la impresión que deja tu app. Cada una de sus pestañas se apoya en un elemento concebido como una pieza de construcción: el **Item**. En la [nueva generación de TabBar](https://es.goodbarber.com/blog/tabbar-llega-una-nueva-generacion-a1043/), es él quien da a cada navegación su carácter. ## Un icono, una etiqueta, un indicador [El Item se separa de su TabBar y revela sus elementos hijos](https://player.vimeo.com/video/1229824805?badge=0&autopause=0&player_id=0&app_id=58479&autoplay=1&muted=1&loop=1) En un Item, cada elemento tiene su función. El icono representa la sección, la etiqueta muestra su nombre y el indicador, opcional, señala la pestaña activa. Cada uno se muestra u oculta por separado, lo que da tres composiciones: icono y etiqueta, solo icono, solo etiqueta. Es lo que separa la [Minimal TabBar](https://es.goodbarber.com/blog/minimal-tabbar-una-navegacion-compacta-icon-only-y-resueltamente-moderna-a1052/), toda en iconos, de la [Clean TabBar](https://es.goodbarber.com/blog/clean-tabbar-una-navegacion-text-only-sutil-y-elegante-a1058/), toda en texto: el mismo elemento, compuesto de otra manera. ## 17 propiedades para las TabBar de hoy y de mañana ![](https://cmsphoto.ww-cdn.com/superstatic/81328/art/grande/98137933-68342879.jpg?v=1790245600.9887676) Para diseñar una TabBar, nuestros diseñadores disponen de 17 propiedades: 8 para el Item, 6 para su icono y 3 para su etiqueta. La superficie del Item admite un color sólido, un degradado o un efecto de desenfoque, un borde, una sombra, esquinas rectas o redondeadas. Su maquetación define su tamaño, su orientación, su margen interior, que delimita la zona táctil, y el espaciado que deja respirar a sus elementos. Toda esta riqueza no te obliga a ajustarlo todo. Nos sirve para componer layouts de TabBar completos, alineados con los códigos actuales del diseño de apps: Bold, Minimal y Clean TabBar son los tres primeros. Cuando esos códigos evolucionen, nacerán nuevos layouts del mismo elemento, sin partir de cero. Así podemos ofrecerte TabBar siempre al día. En tu back office, eliges tu TabBar y luego la adaptas a tu identidad: tamaño de las pestañas, redondeo de las esquinas, colores, tipografía de las etiquetas, forma de señalar la pestaña activa. Tus propios iconos pueden incluso convivir con los del sistema. ## Estados claros, animaciones cuidadas [Dot, Tiny, Line: los indicadores y sus animaciones de selección](https://player.vimeo.com/video/1229806792?badge=0&autopause=0&player_id=0&app_id=58479&autoplay=1&muted=1&loop=1) Un Item tiene dos estados: por defecto y seleccionado. Para distinguir la pestaña activa, dispone de cuatro recursos, solos o combinados: el color, el fondo, el borde y el indicador. Este último solo aparece en la pestaña seleccionada, en tres formas: un punto (**Dot**), un trazo corto (**Tiny**) o una línea (**Line**). Cada forma tiene su propio movimiento. El punto y la línea se encogen en la pestaña anterior y crecen en la nueva; el trazo corto se desliza de una a otra. Cuando la selección se marca con el fondo, como en la [Bold TabBar](https://es.goodbarber.com/blog/bold-tabbar-una-navegacion-mas-presente-pensada-para-estructurar-la-interfaz-a1048/), es el fondo de color el que se desplaza. Transiciones breves, que hacen legible cada cambio sin excederse. ## El mismo Item, del móvil al escritorio ![](https://cmsphoto.ww-cdn.com/superstatic/81328/art/grande/98137933-68342881.jpg?v=1790245602.368774) El Item adapta su orientación, su margen interior y su espaciado a cada pantalla: móvil, tableta y escritorio. En la parte inferior de un teléfono, el icono se coloca encima de la etiqueta. En escritorio, la TabBar se convierte en una barra lateral y el Item puede pasar a horizontal para encajar en ella. Configuras tu navegación una sola vez: cada pantalla recibe la versión que le conviene. ## El Item entra en el Design System ![](https://cmsphoto.ww-cdn.com/superstatic/81328/art/grande/98137933-68342882.jpg?v=1790245605.3927875) Después de la [TabBar](https://es.goodbarber.com/uxdesign/tabbar/), el Item tiene [su página](https://es.goodbarber.com/uxdesign/item/) en el [Design System de GoodBarber](https://es.goodbarber.com/uxdesign/), y llega en familia. Con el [Item Icon](https://es.goodbarber.com/uxdesign/item-icon/), el [Item Label](https://es.goodbarber.com/uxdesign/item-label/) y el [Item Indicator](https://es.goodbarber.com/uxdesign/item-indicator/), abre una nueva categoría: los [UI Elements](https://es.goodbarber.com/uxdesign/ui-elements/), las piezas básicas de nuestros componentes, cada una dedicada a una sola función. Para descubrir el Item en detalle, visita [su página del Design System](https://es.goodbarber.com/uxdesign/item/). Y para verlo en acción, elige tu TabBar en la sección Menú de tu back office. ![](https://blog.goodbarber.com/_public/profile/21/212215c51625b9eaa5ea86f45bb46da875792630-default.jpg) Sobre el autor Marie-Pierre Jeffard UI Designer Soy UI Designer en GoodBarber. Design system de las apps, componentes, layouts, sitio web, ilustraciones, animaciones: todo lo que hago gira en torno a la interfaz. Lo que me gusta de nuestro producto es inventar reglas universales, que funcionan en todas las pantallas y acogen todas las identidades visuales. La app se convierte en el escaparate de tu contenido. Me gusta lo que parece sencillo, y todo el trabajo invisible que hace falta para lograrlo: las reglas, las decisiones y las restricciones que hacen que una interfaz se sostenga. Eso es lo que cuento aquí. [Más de Marie-Pierre](https://es.goodbarber.com/blog/author/marie-pierre-jeffard/)[LinkedIn](https://www.linkedin.com/in/marie-pierre-jeffard/)