Tab bar
La Tab bar est une navigation qui permet de passer d'une destination principale à une autre dans une application.
Description
La Tab bar est une navigation qui permet de passer d'une destination principale à une autre dans une application.
Elle contient jusqu'à cinq éléments de navigation qui représente les destinations clefs de l'application.
La Tab bar est placée au bas des écrans pour un accès pratique. Chaque destination est représentée par une icône et un libellé.
Plateformes
-
Web
Indisponible -
Anatomie
- Page active : indique la page sur laquelle l'utilisateur se trouve
- Page inactive : indique les pages accessibles par l'utilisateur
- Icône : illustre la page (on utilisera les icones d'action)
- Label : nom de la page
Usage
Quand l'utiliser ?
- Lorsque l'on veut créer une navigation principale sur mobile ou tablette.
- Lorsque les destinations de haut niveau doivent être accessibles depuis n'importe quelles pages de l'application.
- Lorsqu'il y a deux à cinq destinations. Si il y a plus de cinq destinations principales :
- Soit le cinquième élément ouvrira un menu secondaire qui contient les autres destinations.
- Soit un menu burger dans la Navigation bar sera utilisé comme navigation principale.
Do's and don'ts
-
Do
Utiliser deux à cinq destinations dans la navigation
-
Don't
Utiliser deux à cinq destinations dans la navigation
-
Do
Rédiger des labels clairs et concis
-
Don't
Il est interdit de rédiger des labels longs et complexes
-
Do
Utiliser des icônes simples et qui illustrent correctement le label
-
Don't
Il est interdit d’utiliser des icônes trop détaillées
-
Do
Afficher un seul élément actif dans la navigation
-
Don't
Il est interdit d’afficher plusieurs éléments actifs dans la navigation
-
Do
Utiliser des icônes et des labels pour chaque élément de navigation
-
Don't
Il est interdit d'utiliser des éléments de navigation sans labels ou sans icônes
Des questions ou un feedback ?
N’hésitez pas à contacter la team Design System par mail.