Item : l'élément qui dessine chaque onglet de votre app

Ecrit par 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.

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, c'est lui qui donne à chaque navigation son caractère.

Une icône, un libellé, un indicateur

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, tout en icônes, de la Clean TabBar, tout en texte : le même élément, composé autrement.

17 propriétés pour les TabBar d'aujourd'hui et de demain

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

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, 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

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

Après la TabBar, l'Item a sa page dans le Design System GoodBarber, et il arrive en famille. Avec l'Item Icon, l'Item Label et l'Item Indicator, il ouvre une nouvelle catégorie : les 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. Et pour le voir à l'œuvre, choisissez votre TabBar dans la section Menu de votre back-office.