--- title: "Item: o elemento que desenha cada separador da sua app" description: "O Item compõe cada separador da navegação da sua app: ícone, rótulo e indicador. Descubra como o concebemos." canonical_url: "https://pt.goodbarber.com/blog/item-o-elemento-que-desenha-cada-separador-da-sua-app-a1355/" lang: pt date: 2026-09-24 last_updated: 2026-09-24 --- # Item: o elemento que desenha cada separador da sua app Cada separador da navegação da sua app assenta num mesmo elemento: o Item, que pode reunir um ícone, um rótulo e um indicador. Concebemo-lo para desenhar as nossas TabBar de hoje e de amanhã. Está agora documentado no Design System da GoodBarber. ![](https://blog.goodbarber.com/_public/profile/21/212215c51625b9eaa5ea86f45bb46da875792630-default.jpg) [Marie-Pierre Jeffard](https://pt.goodbarber.com/blog/author/marie-pierre-jeffard/)UI Designer 24 de set. de 2026 · 3 min de leitura ![](https://cmsphoto.ww-cdn.com/superstatic/121801/art/grande/98137936-68342892.jpg?v=1790245614.5448287) Os seus conteúdos estão cuidados, as suas cores escolhidas. Falta a barra de navegação, por onde os seus utilizadores passam de uma secção para outra e que pesa muito na impressão que a sua app deixa. Cada um dos seus separadores assenta num elemento concebido como uma peça de construção: o **Item**. Na [nova geração de TabBar](https://pt.goodbarber.com/blog/tabbar-chega-uma-nova-geracao-a1247/), é ele que dá a cada navegação o seu carácter. ## Um ícone, um rótulo, um indicador [O Item destaca-se da sua TabBar e revela os seus elementos filhos](https://player.vimeo.com/video/1229824805?badge=0&autopause=0&player_id=0&app_id=58479&autoplay=1&muted=1&loop=1) Num Item, cada elemento tem o seu papel. O ícone representa a secção, o rótulo mostra o seu nome e o indicador, opcional, assinala o separador ativo. Cada um mostra-se ou oculta-se separadamente, o que dá três composições: ícone e rótulo, só ícone, só rótulo. É o que separa a [Minimal TabBar](https://pt.goodbarber.com/blog/minimal-tabbar-uma-navegacao-compacta-icon-only-e-resolutamente-moderna-a1256/), toda em ícones, da [Clean TabBar](https://pt.goodbarber.com/blog/clean-tabbar-uma-navegacao-text-only-subtil-e-elegante-a1262/), toda em texto: o mesmo elemento, composto de outra forma. ## 17 propriedades para as TabBar de hoje e de amanhã ![](https://cmsphoto.ww-cdn.com/superstatic/121801/art/grande/98137936-68342894.jpg?v=1790245615.9248347) Para conceber uma TabBar, os nossos designers dispõem de 17 propriedades: 8 para o Item, 6 para o seu ícone e 3 para o seu rótulo. A superfície do Item aceita uma cor sólida, um gradiente ou um efeito de desfocagem, um contorno, uma sombra, cantos retos ou arredondados. A sua disposição define o tamanho, a orientação, a margem interior, que delimita a zona tátil, e o espaçamento que deixa os seus elementos respirar. Esta riqueza não lhe pede que ajuste tudo. Serve-nos para compor layouts de TabBar completos, alinhados com os códigos atuais do design de apps: a Bold, a Minimal e a Clean TabBar são os três primeiros. Quando esses códigos evoluírem, novos layouts nascerão do mesmo elemento, sem partir do zero. Assim podemos propor-lhe TabBar sempre atuais. No seu back office, escolhe a sua TabBar e depois ajusta-a à sua identidade: tamanho dos separadores, arredondamento dos cantos, cores, tipo de letra dos rótulos, forma de assinalar o separador ativo. Os seus próprios ícones podem até conviver com os do sistema. ## Estados legíveis, animações cuidadas [Dot, Tiny, Line: os indicadores e as suas animações de seleção](https://player.vimeo.com/video/1229806792?badge=0&autopause=0&player_id=0&app_id=58479&autoplay=1&muted=1&loop=1) Um Item tem dois estados: predefinido e selecionado. Para distinguir o separador ativo, dispõe de quatro meios, isolados ou combinados: a cor, o fundo, o contorno e o indicador. Este último só aparece no separador selecionado, em três formas: um ponto (**Dot**), um pequeno traço (**Tiny**) ou uma linha (**Line**). Cada forma tem o seu próprio movimento. O ponto e a linha encolhem no separador anterior e crescem no novo; o pequeno traço desliza de um para o outro. Quando a seleção passa pelo fundo, como na [Bold TabBar](https://pt.goodbarber.com/blog/bold-tabbar-uma-navegacao-mais-presente-pensada-para-estruturar-a-interface-a1252/), é o fundo colorido que se desloca. Transições curtas, que tornam cada mudança legível sem exageros. ## O mesmo Item, do mobile ao desktop ![](https://cmsphoto.ww-cdn.com/superstatic/121801/art/grande/98137936-68342896.jpg?v=1790245617.524842) O Item adapta a orientação, a margem interior e o espaçamento a cada ecrã: mobile, tablet e desktop. Na parte inferior de um telemóvel, o ícone fica por cima do rótulo. Em desktop, a TabBar torna-se uma barra lateral e o Item pode passar para a horizontal para lá caber. Configura a sua navegação uma única vez: cada ecrã recebe a versão que lhe convém. ## O Item entra no Design System ![](https://cmsphoto.ww-cdn.com/superstatic/121801/art/grande/98137936-68342897.jpg?v=1790245619.4648507) Depois da [TabBar](https://pt.goodbarber.com/uxdesign/tabbar/), o Item tem [a sua página](https://pt.goodbarber.com/uxdesign/item/) no [Design System da GoodBarber](https://pt.goodbarber.com/uxdesign/), e chega em família. Com o [Item Icon](https://pt.goodbarber.com/uxdesign/item-icon/), o [Item Label](https://pt.goodbarber.com/uxdesign/item-label/) e o [Item Indicator](https://pt.goodbarber.com/uxdesign/item-indicator/), abre uma nova categoria: os [UI Elements](https://pt.goodbarber.com/uxdesign/ui-elements/), as peças de base dos nossos componentes, cada uma dedicada a um único papel. Para descobrir o Item em pormenor, visite [a sua página do Design System](https://pt.goodbarber.com/uxdesign/item/). E para o ver em ação, escolha a sua TabBar na secção Menu do seu back office. ![](https://blog.goodbarber.com/_public/profile/21/212215c51625b9eaa5ea86f45bb46da875792630-default.jpg) Sobre o autor Marie-Pierre Jeffard UI Designer Sou UI Designer da GoodBarber. Design system das apps, componentes, layouts, site, ilustrações, animações: tudo o que faço gira em torno da interface. O que me agrada no nosso produto é inventar regras universais, que funcionam em todos os ecrãs e acolhem todas as identidades visuais. A app torna-se uma montra para o seu conteúdo. Gosto do que parece simples, e de todo o trabalho invisível necessário para lá chegar: as regras, as escolhas e as restrições que mantêm uma interface de pé. É isso que conto aqui. [Mais de Marie-Pierre](https://pt.goodbarber.com/blog/author/marie-pierre-jeffard/)[LinkedIn](https://www.linkedin.com/in/marie-pierre-jeffard/)