--- title: "TabBar: chega uma nova geração" description: "Numa app mobile, a navegação não serve apenas para passar de uma secção a outra. Estrutura a experiência, cria referências visuais fortes e contribui diretament" canonical_url: "https://pt.goodbarber.com/blog/tabbar-chega-uma-nova-geracao-a1247/" lang: pt date: 2026-05-13 last_updated: 2026-08-05 --- # TabBar: chega uma nova geração [Voltar](/blog/make-it-r19/) # TabBar: chega uma nova geração Escrito por [Lesia PIETRI](https://pt.goodbarber.com/blog/author/lesia-pietri/) na Quarta-Feira 13 Maio 2026· Última atualização: Quarta-Feira 5 Agosto 2026 ## Com a nova TabBar, enriquecemos a navegação das tuas apps com 3 novos layouts, mais opções de personalização, animações de seleção e uma abordagem multi-device pensada para cada ecrã. ![](https://cmsphoto.ww-cdn.com/superstatic/121801/art/grande/96542976-67308773.jpg?v=1778684132.8829107) Numa app mobile, a navegação não serve apenas para passar de uma secção a outra. Estrutura a experiência, cria referências visuais fortes e contribui diretamente para a perceção global do produto. Com o novo componente TabBar, abrimos uma nova etapa no design da navegação, com mais liberdade de design, mais flexibilidade na personalização e uma adaptação mais cuidada a cada dispositivo. ## Três novos layouts para dar o tom ![](https://cmsphoto.ww-cdn.com/superstatic/121801/art/grande/96542976-67308774.jpg?v=1778684134.7509038) Esta nova geração de TabBar chega com três layouts disponíveis desde o lançamento: **Bold TabBar**, **Minimal TabBar** e **Clean TabBar**. - **Bold TabBar** dá mais presença à navegação, com uma estrutura visual forte e assumida. - **Minimal TabBar** propõe uma abordagem mais moderna e mais compacta. - **Clean TabBar** oferece um equilíbrio elegante, com um acabamento depurado, versátil e fácil de integrar em universos gráficos muito variados. Com estas três direções, a barra de navegação torna-se uma verdadeira alavanca de estilo. Pode alinhar-se de forma mais precisa com a identidade da app, quer se trate de um projeto editorial, de uma app de marca, de um serviço, de um universo lifestyle ou de uma aplicação de e-commerce. ## Uma TabBar mais rica para personalizar [blog_post-tabbar-bloc2](https://player.vimeo.com/video/1191923031?badge=0&autopause=0&player_id=0&app_id=58479&autoplay=1&muted=1&loop=1) O novo componente não se resume a novos layouts. Inscreve-se na evolução contínua do **Design System GoodBarber** e amplia as possibilidades para personalizar a navegação. Fundos, formas, sombras, estrutura dos itens, estados selecionados, menu "More", variações consoante os dispositivos: cada dimensão foi pensada para oferecer mais precisão na renderização, mantendo a coerência visual da app. Esta nova TabBar ilustra plenamente a ambição do nosso Design System: dar mais liberdade de criação, sem nunca abdicar da qualidade de execução. As **animações de seleção** acompanham esta evolução trazendo mais fluidez às interações, uma melhor leitura das mudanças de estado e uma sensação de interface ainda mais cuidada. Em iOS, Android e PWA, a nova TabBar também pode beneficiar dos **efeitos Material Blur**, que acrescentam profundidade e um toque ainda mais premium à renderização visual. ## Uma navegação pensada para cada ecrã ![](https://cmsphoto.ww-cdn.com/superstatic/121801/art/grande/96542976-67308776.jpg?v=1778684136.7828963) Esta evolução reflete também uma abordagem multi-device mais afirmada. No mobile, a TabBar mantém a sua posição natural na parte inferior do ecrã. No desktop, torna-se vertical para aproveitar melhor o espaço disponível e inserir-se nos usos próprios das interfaces de ecrã grande. Esta escolha prolonga a lógica mobile-first de GoodBarber afirmando ao mesmo tempo uma verdadeira qualidade de adaptação no desktop. Não se trata simplesmente de mostrar a mesma navegação em todo o lado, mas de propor uma experiência coerente com cada contexto de utilização. ## Uma nova etapa para o design das apps na GoodBarber ![](https://cmsphoto.ww-cdn.com/superstatic/121801/art/grande/96542976-67308777.jpg?v=1778684138.714889) Com este novo componente, GoodBarber amplia ainda mais as possibilidades oferecidas a quem quer criar uma app mobile com design premium, sem sair da simplicidade de produção própria do no-code. Mais expressiva, mais personalizável, mais fluida e melhor pensada para cada ecrã, esta nova TabBar dá uma nova dimensão à navegação nas apps GoodBarber. Uma evolução que reforça tanto a qualidade percebida das interfaces como a liberdade criativa oferecida a designers, marcas, media e a todos os criadores de apps. ![Lesia PIETRI](https://blog.goodbarber.com/_public/profile/e1/e1822db470e60d090affd0956d743cb0e7cdf113-default.jpg) Sobre o autor[Lesia PIETRI](https://pt.goodbarber.com/blog/author/lesia-pietri/)Head of Product Design Sou Head of Product Design da GoodBarber. Conduzo o design do produto: o design system sobre o qual todas as apps são construídas, os layouts que servem de ponto de partida e o percurso que leva de uma ideia a uma app publicada. O meu trabalho é que alguém que nunca abriu uma ferramenta de design publique na mesma uma app cuidada, ecrã após ecrã. Designer de alma, passo os dias nos detalhes que ninguém nomeia: os espaçamentos, os contrastes, o peso de um título. Escrevo aqui sobre o design da GoodBarber e sobre as novidades do produto: as funcionalidades, os layouts e os temas. [Saiba mais](https://pt.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/)