# Tab bar > Découvrez comment intégrer une tab bar pour améliorer la navigation de votre application mobile, en utilisant l'avant-plan pour persévérance et des états pour iconographie dynamique, adapté à iOS guidelines. https://docs.pandasuite.com/fr/essentials/navigation/tab-bar/ **Une tab bar (barre d'onglets) apparaît au bas de l'écran d'une application et permet de passer rapidement d'une section à l'autre de l'application. C'est la structure de navigation la plus choisie par les applications mobiles. Elle contient généralement entre 4 et 5 onglets.** [Image : Tab bar au bas d'un smartphone : quatre icônes (lunettes, maison, questions-réponses, document), la première en violet] Vous pouvez compléter cette navigation principale par une navigation secondaire, par exemple des onglets au niveau de la section. ## Créer une tab bar Comme pour tout élément de navigation, il est préférable d' [utiliser l'avant-plan](https://docs.pandasuite.com/fr/essentials/project-properties/foreground-and-background/) pour créer la tab bar. Ainsi cette barre est persistante tout au long de l'application et vous pouvez utiliser les états pour représenter la sélection de chaque icône. Rendez-vous sur l'avant-plan. ### Insérer les éléments graphiques Importez les éléments graphiques de votre tab bar : la barre de fond et les icônes. Pour la barre de fond, vous pouvez utiliser une **Forme**. Si vous souhaitez colorer vos icônes à la sélection, privilégiez un format `.svg` ou importez vos fichiers d'icônes en deux couleurs. Dans l'exemple ci-dessous, des icônes blanches sont posées sur des formes colorées : seule la couleur des formes change d'un avant-plan à l'autre. Dans le 1er avant-plan, représentez votre tab bar pour la 1ère section, ici il s'agit de la section "Articles". Indiquez visuellement à l'utilisateur que la première icône a été sélectionnée. Dans cet exemple, l'icône sélectionnée est aux couleurs de la section. (NB : si vous souhaitez créer un écran d'accueil sans tab bar, il vous faut créer un avant-plan vierge.) [Image : Avant-plan 1 « Section: Articles » sélectionné dans le panneau des avant-plans : la tab bar en bas de l'écran, l'onglet Articles en violet] ### Créer le lien entre chaque icône et sa section Au-dessus de chaque icône, ajoutez un composant **Zone interactive**, ce qui vous permet d'élargir la zone de tap. Associez l'action **Changer d'écran** vers le bon écran. [Image : Zone interactive « Articles » sur le premier onglet, avec son action Single tap → Go to screen 1 Articles ; une zone par icône] ### Décliner les autres avant-plans Déclinez les autres sections ("Procédure", "Quiz", "Formulaire") en créant de nouveaux avant-plans liés : dans le panneau **Avant-plans**, ouvrez le menu **+** et choisissez **Créer un avant-plan lié**. Chaque avant-plan est lié au précédent pour conserver les liens et les transitions. Sur chacun, changez la couleur de l'icône et représentez visuellement l'icône sélectionnée. [Image : Quatre avant-plans liés, un par section, chacun lié au précédent ; dans Section: Procedure, l'onglet Procedure est violet] ### Associer chaque section à son avant-plan Dernière étape : il reste à associer chaque section au bon avant-plan ! Sélectionnez l'écran et, dans son panneau **Propriétés**, choisissez le bon avant-plan dans la liste **Avant-plan**. [Image : Propriétés de l'écran Articles : dans la liste des avant-plans ouverte, l'avant-plan 1 « Section: Articles » est sélectionné] ## Conseils iOS Guidelines :