--- title: "Item : l'élément qui dessine chaque onglet de votre app" description: "L'Item compose chaque onglet de la navigation de votre app : icône, libellé, indicateur. Découvrez comment nous l'avons conçu." canonical_url: "https://fr.goodbarber.com/blog/item-l-element-qui-dessine-chaque-onglet-de-votre-app-a1454/" lang: fr date: 2026-09-24 last_updated: 2026-09-24 --- # Item : l'élément qui dessine chaque onglet de votre app [Retour](/blog/reussir-mon-app-r13/) # Item : l'élément qui dessine chaque onglet de votre app Ecrit par [Marie-Pierre Jeffard](https://fr.goodbarber.com/blog/author/marie-pierre-jeffard/) le Jeudi 24 Septembre 2026 ## Chaque onglet de la navigation de votre app repose sur un même élément : l'Item, qui peut réunir une icône, un libellé et un indicateur. Nous l'avons conçu pour dessiner nos TabBar d'aujourd'hui et de demain. Il est désormais documenté dans le Design System GoodBarber. ![](https://cmsphoto.ww-cdn.com/superstatic/40142/art/grande/98137685-68342722.jpg?v=1790244596.9485447) Vos contenus sont soignés, vos couleurs choisies. Reste la barre de navigation, par laquelle vos utilisateurs passent d'une section à l'autre, et qui pèse lourd dans l'impression que laisse votre app. Chacun de ses onglets repose sur un élément conçu comme une pièce de construction : l'**Item**. Dans la [nouvelle génération de TabBar](https://fr.goodbarber.com/blog/tabbar-place-a-une-nouvelle-generation-a1343/), c'est lui qui donne à chaque navigation son caractère. ## Une icône, un libellé, un indicateur [L'Item se détache de sa TabBar et révèle ses éléments enfants](https://player.vimeo.com/video/1229824805?badge=0&autopause=0&player_id=0&app_id=58479&autoplay=1&muted=1&loop=1) Dans un Item, chaque élément a son rôle. L'icône représente la section, le libellé affiche son nom, et l'indicateur, facultatif, signale l'onglet actif. Chacun s'affiche ou se masque séparément, ce qui donne trois compositions : icône et libellé, icône seule, libellé seul. C'est ce qui sépare la [Minimal TabBar](https://fr.goodbarber.com/blog/minimal-tabbar-une-navigation-compacte-icon-only-et-resolument-moderne-a1352/), tout en icônes, de la [Clean TabBar](https://fr.goodbarber.com/blog/clean-tabbar-une-navigation-text-only-subtile-et-elegante-a1359/), tout en texte : le même élément, composé autrement. ## 17 propriétés pour les TabBar d'aujourd'hui et de demain ![](https://cmsphoto.ww-cdn.com/superstatic/40142/art/grande/98137685-68342724.jpg?v=1790244598.3165514) Pour concevoir une TabBar, nos designers disposent de 17 propriétés : 8 pour l'Item, 6 pour son icône et 3 pour son libellé. La surface de l'Item accepte une couleur unie, un dégradé ou un effet de flou, une bordure, une ombre, des angles droits ou arrondis. Sa mise en page règle sa taille, son orientation, sa marge intérieure, qui délimite la zone tactile, et l'espacement qui fait respirer ses éléments. Cette richesse ne vous demande pas de tout régler. Elle nous sert à composer des modèles de TabBar complets, alignés sur les codes actuels du design des apps : la Bold, la Minimal et la Clean TabBar sont les trois premiers. Quand ces codes évolueront, de nouveaux modèles naîtront du même élément, sans repartir de zéro. De quoi vous proposer des TabBar toujours dans l'air du temps. Dans votre back-office, vous choisissez votre TabBar, puis vous l'accordez à votre identité : taille des onglets, arrondi des angles, couleurs, police des libellés, façon de signaler l'onglet actif. Vos propres icônes peuvent même côtoyer celles du système. ## Des états lisibles, des animations soignées [Dot, tiny, line : les indicateurs et leurs animations de sélection](https://player.vimeo.com/video/1229806792?badge=0&autopause=0&player_id=0&app_id=58479&autoplay=1&muted=1&loop=1) Un Item a deux états : par défaut et sélectionné. Pour distinguer l'onglet actif, il dispose de quatre moyens, seuls ou combinés : la couleur, le fond, la bordure et l'indicateur. Ce dernier n'apparaît que sur l'onglet sélectionné, sous trois formes : un point (**Dot**), un petit trait (**Tiny**) ou une ligne (**Line**). Chaque forme a son propre mouvement. Le point et la ligne rétrécissent sur l'ancien onglet et grandissent sur le nouveau, le petit trait glisse de l'un à l'autre. Quand la sélection passe par le fond, comme sur la [Bold TabBar](https://fr.goodbarber.com/blog/bold-tabbar-une-navigation-plus-presente-pensee-pour-structurer-l-interface-a1348/), c'est le fond coloré qui se déplace. Des transitions courtes, qui rendent chaque changement lisible sans en faire trop. ## Le même Item, du mobile au desktop ![](https://cmsphoto.ww-cdn.com/superstatic/40142/art/grande/98137685-68342726.jpg?v=1790244599.712558) L'Item adapte son orientation, sa marge intérieure et son espacement à chaque écran : mobile, tablette et desktop. En bas d'un téléphone, l'icône se place au-dessus du libellé. Sur desktop, la TabBar devient une barre latérale, et l'Item peut passer à l'horizontale pour s'y loger. Vous configurez votre navigation une seule fois : chaque écran reçoit la version qui lui convient. ## L'Item entre au Design System ![](https://cmsphoto.ww-cdn.com/superstatic/40142/art/grande/98137685-68342727.jpg?v=1790244601.4125664) Après la [TabBar](https://fr.goodbarber.com/uxdesign/tabbar/), l'Item a [sa page](https://fr.goodbarber.com/uxdesign/item/) dans le [Design System GoodBarber](https://fr.goodbarber.com/uxdesign/), et il arrive en famille. Avec l'[Item Icon](https://fr.goodbarber.com/uxdesign/item-icon/), l'[Item Label](https://fr.goodbarber.com/uxdesign/item-label/) et l'[Item Indicator](https://fr.goodbarber.com/uxdesign/item-indicator/), il ouvre une nouvelle catégorie : les [UI Elements](https://fr.goodbarber.com/uxdesign/ui-elements/), les briques de nos composants, chacune dédiée à un seul rôle. Pour découvrir l'Item en détail, rendez-vous sur [sa page du Design System](https://fr.goodbarber.com/uxdesign/item/). Et pour le voir à l'œuvre, choisissez votre TabBar dans la section Menu de votre back-office. ![Marie-Pierre Jeffard](https://blog.goodbarber.com/_public/profile/21/212215c51625b9eaa5ea86f45bb46da875792630-default.jpg) À propos de l'auteur[Marie-Pierre Jeffard](https://fr.goodbarber.com/blog/author/marie-pierre-jeffard/)UI Designer Je suis UI Designer chez GoodBarber. Design system des apps, composants, layouts, site, illustrations, animations : tout ce que je fais tourne autour de l'interface. Ce qui me plaît dans notre produit, c'est d'inventer des règles universelles, qui tiennent sur tous les écrans et accueillent toutes les identités visuelles. L'app devient un écrin pour votre contenu. J'aime ce qui a l'air simple, et tout le travail invisible qu'il faut pour y arriver : les règles, les choix et les contraintes qui font qu'une interface tient debout. C'est ce que je raconte ici. [En savoir plus](https://fr.goodbarber.com/blog/author/marie-pierre-jeffard/) [![LinkedIn](https://portal.ww-cdn.com/portal_static/svg/base2021/linkedin.3ed8162e2a2b.svg)](https://www.linkedin.com/in/marie-pierre-jeffard/)