--- title: "Bold TabBar: uma navegação mais presente, pensada para" description: "Entre os três layouts de lançamento da nova geração de TabBar, o Bold TabBar é o que assume de forma mais clara a sua presença na interface.Aqui, a navegação nã" canonical_url: "https://pt.goodbarber.com/blog/bold-tabbar-uma-navegacao-mais-presente-pensada-para-estruturar-a-interface-a1252/" lang: pt date: 2026-05-20 last_updated: 2026-05-20 --- # Bold TabBar: uma navegação mais presente, pensada para [Voltar](/blog/make-it-r19/) # Bold TabBar: uma navegação mais presente, pensada para estruturar a interface Escrito por [Lesia PIETRI](https://pt.goodbarber.com/blog/author/lesia-pietri/) na Quarta-Feira 20 Maio 2026 ## O Bold TabBar destina-se às apps que querem uma navegação visível, estruturante e totalmente integrada na sua identidade visual. Com o seu separador distinto, o seu elemento selecionado fortemente destacado e o seu menu "More" como prolongamento direto da tabBar, este layout confere um verdadeiro papel visual à navegação. ![](https://cmsphoto.ww-cdn.com/superstatic/121801/art/grande/96650117-67370956.jpg?v=1779281997.2950726) Entre os três layouts de lançamento da nova geração de TabBar, o **Bold TabBar** é o que assume de forma mais clara a sua presença na interface. Aqui, a navegação não procura apagar-se. Enquadra o ecrã, estabelece uma hierarquia visual nítida e participa plenamente no estilo da app. Este layout é particularmente adaptado às apps ricas em conteúdo ou com uma forte identidade, onde a navegação deve ser visível, legível e envolvente. ## Um elemento distinto para destacar um acesso importante ![](https://cmsphoto.ww-cdn.com/superstatic/121801/art/grande/96650117-67370957.jpg?v=1779282013.2871733) O Bold TabBar permite integrar um **elemento distinto**, ou seja, um acesso separado visualmente do resto da barra. Esta lógica recorda a evolução recente das tab bars da Apple, onde certos acessos importantes, nomeadamente o Search, podem ser apresentados como um separador visualmente distinto para permanecerem imediatamente acessíveis e mais facilmente identificáveis. No GoodBarber, este elemento distinto permite destacar uma secção importante, um ponto de entrada prioritário ou um acesso específico sem sobrecarregar a leitura da navegação principal. Visualmente, encontra o seu lugar na composição e reforça a ideia de uma TabBar mais expressiva. Este é um ponto forte do layout: a navegação pode hierarquizar os seus acessos de forma muito mais clara, mantendo ao mesmo tempo a coerência. ## Uma seleção fortemente destacada ![](https://cmsphoto.ww-cdn.com/superstatic/121801/art/grande/96650117-67370958.jpg?v=1779282033.5753007) O princípio do Bold TabBar é simples: **o elemento selecionado é visto imediatamente**. Este destaque é conseguido através de um fundo sólido que sublinha claramente o separador ativo. O utilizador localiza de relance onde se encontra, enquanto a navegação ganha em impacto visual. Este tratamento funciona particularmente bem em interfaces que procuram uma hierarquia nítida e uma presença gráfica mais marcada. O resultado é muito direto: a TabBar não se limita a alinhar ícones ou etiquetas. Estrutura a leitura do ecrã e dá mais peso ao estado ativo. ## Um menu "More" que prolonga naturalmente a tabBar, em mobile e desktop ![](https://cmsphoto.ww-cdn.com/superstatic/121801/art/grande/96650117-67370959.jpg?v=1779282049.7834022) Outro contributo importante do layout: o **menu "More"**. O menu "More" dá acesso às secções não visíveis na TabBar, preservando ao mesmo tempo uma navegação clara e equilibrada. Aqui, não se assemelha a um painel genérico adicionado ao lado da navegação. Pelo contrário, adota os códigos visuais da barra e segue os seus parâmetros de design. Formas, estilo geral, nível de presença: o menu "More" permanece no mesmo linguagem visual da TabBar. No desktop, esta lógica faz ainda mais sentido. A navegação torna-se vertical e o menu "More" estende-se na sua continuidade. O conjunto dá a impressão de um componente único, coerente e bem desenhado, em vez de um conjunto de elementos separados. Esta continuidade nota-se particularmente no momento de abertura do menu "More", com uma animação que acompanha naturalmente a retração da tabBar e prolonga o movimento do 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) ## Efeitos e animações [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) O Bold TabBar não se baseia apenas na sua estrutura visual. Distingue-se também pela qualidade dos seus efeitos e animações. Quando o elemento selecionado utiliza uma cor de fundo, a transição ganha em riqueza com uma animação de seleção muito fluida, que acompanha o deslocamento do estado ativo e reforça a legibilidade da navegação. A isto acrescentam-se os efeitos hápticos, que conferem mais consistência às interações e contribuem para essa impressão de componente premium, reativo e cuidado. ## Um layout pensado para as apps que querem assumir a sua navegação O Bold TabBar destina-se às apps que querem fazer da navegação um elemento forte da sua interface. Apps de marca, universos editoriais, projetos lifestyle, apps de eventos, certos contextos de e-commerce ou premium: em todos os casos onde a navegação deve participar ativamente na identidade do produto, este layout oferece uma resposta clara. Mais presente, mais estruturante e mais expressivo, o Bold TabBar permite estabelecer uma estrutura visual sólida, valorizar melhor o estado ativo, integrar com naturalidade um separador distinto e prolongar a qualidade do componente até ao menu "More" e às animações. Para as apps que querem uma navegação visível, coerente e bem desenhada, esta é uma base particularmente sólida. ![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/)