Bold TabBar : une navigation plus présente, pensée pour structurer l’interface

Parmi les trois layouts de lancement de la nouvelle génération de TabBar, Bold TabBar est celui qui assume le plus clairement sa présence dans l’interface.

Ici, la navigation ne cherche pas à s’effacer. Elle cadre l’écran, pose une hiérarchie visuelle nette et participe pleinement au style de l’app. Ce layout est particulièrement adapté aux apps riches en contenu ou à forte identité, où la navigation doit être visible, lisible et engageante.

Bold TabBar permet d’intégrer un élément distinct, c’est-à-dire un accès séparé visuellement du reste de la barre.

Cette logique rappelle l’évolution récente des tab bars Apple, où certains accès clés, notamment Search, peuvent être présentés comme un onglet visuellement distinct afin de rester immédiatement accessibles et mieux identifiables.

Dans GoodBarber, cet élément distinct permet de mettre en avant une section importante, une entrée prioritaire ou un point d’accès particulier sans brouiller la lecture de la navigation principale. Visuellement, il prend sa place dans la composition et renforce l’idée d’une TabBar plus expressive.

C’est un point fort du layout : la navigation peut hiérarchiser ses accès de manière beaucoup plus claire, tout en restant cohérente.

Le principe de Bold TabBar est simple : l’élément sélectionné se voit immédiatement.

Cette mise en avant passe par un fond plein qui souligne clairement l’onglet actif. L’utilisateur repère d’un coup d’œil où il se trouve, tandis que la navigation gagne en impact visuel. Ce traitement fonctionne particulièrement bien dans les interfaces qui recherchent une hiérarchie nette et une présence graphique plus marquée.

Le résultat est très direct : la TabBar ne se contente pas d’aligner des icônes ou des libellés. Elle structure la lecture de l’écran et donne plus de poids à l’état actif.

Autre apport important du layout : le menu “More”. Le menu “More” donne accès aux sections non visibles dans la TabBar, tout en préservant une navigation claire et équilibrée.

Ici, il ne ressemble pas à un panneau générique ajouté à côté de la navigation. Il reprend au contraire les codes visuels de la barre et suit ses paramètres de design. Formes, style général, niveau de présence : le menu "More" reste dans le même langage visuel que la TabBar.

Sur desktop, cette logique prend encore plus de sens. La navigation devient verticale, et le menu "More" s’étire dans sa continuité. L’ensemble donne l’impression d’un composant unique, cohérent et bien dessiné, plutôt que d’un assemblage d’éléments séparés. Cette continuité se ressent particulièrement bien au moment de l’ouverture du menu "More", avec une animation qui accompagne naturellement la rétractation de la tabBar et prolonge le mouvement du composant.