--- title: "TabBar : place à une nouvelle génération" description: "Avec la nouvelle TabBar, nous enrichissons la navigation de vos apps avec 3 nouveaux layouts, davantage de personnalisation, des animations de sélection et une" canonical_url: "https://fr.goodbarber.com/blog/tabbar-place-a-une-nouvelle-generation-a1343/" lang: fr date: 2026-05-13 last_updated: 2026-08-05 --- # TabBar : place à une nouvelle génération [Retour](/blog/reussir-mon-app-r13/) # TabBar : place à une nouvelle génération Ecrit par [Lesia PIETRI](https://fr.goodbarber.com/blog/author/lesia-pietri/) le Mercredi 13 Mai 2026· Dernière mise à jour: Mercredi 5 Août 2026 ## Avec la nouvelle TabBar, nous enrichissons la navigation de vos apps avec 3 nouveaux layouts, davantage de personnalisation, des animations de sélection et une approche multi-device pensée pour chaque écran. ![](https://cmsphoto.ww-cdn.com/superstatic/40142/art/grande/96542409-67308314.jpg?v=1778681550.834109) Dans une app mobile, la navigation ne sert pas seulement à passer d'une section à l'autre. Elle structure l'expérience, crée des repères visuels forts et contribue directement à la perception globale du produit. Avec le nouveau composant TabBar, nous ouvrons une nouvelle étape dans la conception de la navigation, avec plus de liberté de design, plus de flexibilité dans la personnalisation et une adaptation plus poussée selon les devices. ## Trois nouveaux layouts pour donner le ton ![](https://cmsphoto.ww-cdn.com/superstatic/40142/art/grande/96542409-67308315.jpg?v=1778681553.0541189) Cette nouvelle génération de TabBar s'accompagne de trois layouts disponibles dès le lancement : **Bold TabBar**, **Minimal TabBar** et **Clean TabBar**. - **Bold TabBar** donne plus de présence à la navigation, avec une structure visuelle forte et assumée. - **Minimal TabBar** propose une approche plus moderne et plus compacte. - **Clean TabBar** offre un équilibre élégant, avec un rendu épuré, polyvalent et facile à intégrer dans des univers graphiques variés. Avec ces trois directions, la barre de navigation devient un véritable levier de style. Elle peut s'aligner plus finement sur l'identité de l'app, qu'il s'agisse d'un projet éditorial, d'une app de marque, d'un service, d'un univers lifestyle ou d'une application e-commerce. ## Une TabBar plus riche à personnaliser [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) Le nouveau composant ne se résume pas à de nouveaux layouts. Il s'inscrit dans l'évolution continue du **Design System GoodBarber** et enrichit les possibilités offertes pour personnaliser la navigation. Backgrounds, formes, ombres, structure des items, états sélectionnés, menu "More", variations selon les appareils : chaque dimension a été pensée pour offrir plus de précision dans le rendu, tout en conservant la cohérence visuelle de l'app. Cette nouvelle TabBar illustre pleinement l'ambition portée par notre Design System : donner plus de liberté de création, sans jamais perdre en qualité d'exécution. Les **animations de sélection** accompagnent cette évolution en apportant plus de fluidité aux interactions, une meilleure lisibilité des changements d'état et une sensation d'interface encore plus soignée. Sur iOS, Android et PWA, la nouvelle TabBar peut également profiter d'**effets Material Blur**, qui apportent de la profondeur et une touche encore plus premium au rendu visuel. ## Une navigation pensée pour chaque écran ![](https://cmsphoto.ww-cdn.com/superstatic/40142/art/grande/96542409-67308317.jpg?v=1778681554.7781265) Cette évolution reflète aussi une approche multi-device plus affirmée. Sur mobile, la TabBar conserve sa position naturelle en bas de l'écran. Sur desktop, elle devient verticale afin de mieux exploiter l'espace disponible et de s'inscrire dans les usages propres aux interfaces sur grands écrans. Ce choix prolonge la logique mobile-first de GoodBarber tout en affirmant une vraie qualité d'adaptation sur desktop. Il ne s'agit pas simplement d'afficher la même navigation partout, mais de proposer une expérience cohérente avec chaque contexte d'usage. ## Une nouvelle étape pour le design des apps sur GoodBarber ![](https://cmsphoto.ww-cdn.com/superstatic/40142/art/grande/96542409-67308318.jpg?v=1778681556.6181345) Avec ce nouveau composant, GoodBarber enrichit encore les possibilités offertes à celles et ceux qui veulent créer une app mobile au design premium, sans sortir de la simplicité de production propre au no-code. Plus expressive, plus personnalisable, plus fluide et mieux pensée pour chaque écran, cette nouvelle TabBar donne une nouvelle dimension à la navigation dans les apps GoodBarber. Une évolution qui renforce à la fois la qualité perçue des interfaces et la liberté de création offerte aux designers, aux marques, aux médias et à tous les créateurs d'apps. ![Lesia PIETRI](https://blog.goodbarber.com/_public/profile/e1/e1822db470e60d090affd0956d743cb0e7cdf113-default.jpg) À propos de l'auteur[Lesia PIETRI](https://fr.goodbarber.com/blog/author/lesia-pietri/)Head of Product Design Je suis Head of Product Design chez GoodBarber. Je dirige le design du produit : le design system sur lequel toutes les apps sont construites, les layouts qui servent de point de départ, et le parcours qui mène d'une idée à une app publiée. Mon travail, c'est qu'une personne qui n'a jamais ouvert un outil de design publie quand même une app qui a l'air pensée, écran après écran. Designer dans l'âme, je passe mes journées sur les détails que personne ne nomme : les espacements, les contrastes, le poids d'un titre. J'écris ici sur le design de GoodBarber, et sur les nouveautés du produit : les fonctionnalités, les layouts et les thèmes. [En savoir plus](https://fr.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/)